Windows Phone 7

WP7 UserControls

by Peter Daukintis

Since silverlight 2 we have had the concept of the UserControl which provides a simple way to compose a re-usable part of our user interface. This allows multiple uses of the same ui across an application which can be edited in one location. Expression Blend helps us out with the creation of UserControls…

I created a new Windows Phone Application project and found some of the standard application bar icons on my disk (here on my PC C:Program FilesMicrosoft SDKsWindows Phonev7.0Iconsdark). I added a reference to Microsoft.Phone.Controls.Toolkit and added a WrapPanel to the Content grid on my page. I dragged all of the icons in, tidies up the layout to give this.

 

iconsmain

 

Now in Blend I right-click my WrapPanel and select ‘Make into UserControl…’ and Blend will create the files for me and reference the new UserControl on the page I created it from.

Now, if I make any edits to anything on my user control and flip back to a page that references it Blend will provide a visual cue that something has changed and I need to recompile to have the change propagated. It looks like this with an exclamation!

 

editedusercontrol

 

Just to prove to myself that this all works as expected I added a new Windows Phone Page to my app, dragged a ‘NavigateToPageAction’ behavior onto my main page header and configured it to navigate to my new page. Once you have compiled a user control Blend will make it available in the Assets panel under controls

 

usercontrolinblend

 

So, from there I dragged my usercontrol out onto my second page.

This is all very simple but you can go much further and add properties, events, event handlers, and code, etc in your code behind. Example solution can be seen here http://cid-4f1b7368284539e5.office.live.com/self.aspx/.Public/UserControl%20WP7/WP7UserControl.zip or here with the user control in a class library

http://cid-4f1b7368284539e5.office.live.com/self.aspx/.Public/UserControlInClassLibrary/WP7UserControlInClassLibrary.zip

Technorati Tags: ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Windows Live Tags: UserControls,concept,UserControl,user,interface,location,Expression,Blend,creation,Application,disk,Program,Files,Microsoft,SDKs,reference,Controls,Toolkit,WrapPanel,Content,grid,Make,exclamation,Just,Page,NavigateToPageAction,header,Once,Assets,panel,events,event,code,icons,references,handlers
WordPress Tags: UserControls,concept,UserControl,user,interface,location,Expression,Blend,creation,Application,disk,Program,Files,Microsoft,SDKs,reference,Controls,Toolkit,WrapPanel,Content,grid,Make,exclamation,Just,Page,NavigateToPageAction,header,Once,Assets,panel,events,event,code,icons,references,handlers

Leave a Reply

Your email address will not be published. Required fields are marked *