Why and how to create a User Control in Windows Phone

published on: 03/01/2020

by WindowsPhoneGeek

I am starting a series of quick tips related to UserControls in Windows Phone, why and how to use them.

Why and how to create a User Control in Windows Phone

How to expose properties of a User Control in Windows Phone

Why using UserControl?

UserControl provides the base class for defining a new control that encapsulates related existing controls and provides its own logic. You have a XAML file and C# class file for a user control. The class file extends the UserControl class and adds additional behaviours and properties. The XAML file encapsulates the composing controls, the styles, the templates, animations and whatever necessary to form the UI. Since it is a just composition, it is really easy to create.

NOTE: Use a UserControl when you want :

to separate functionality into smaller, manageable pieces of logic that can be created independently from an application and other controls.

to group related controls that can be used more than once in an application.

NOTE: The major advantage of using UserControls is the ease with which they can be created and reused.

Creating a User Control in Windows Phone

Step1. Create a new Windows Phone application project.

Step2. Right click the project tile in Solution Explorer and then select Add->New Item as demonstrated below:

Step3. Select Windows Phone User Control from the pop up windows, set the name that you want to use(in our case MyUserControl.xaml) and then press the Add button.

Step4. You should see you new User Control added to your project as shown on the next screen shot:

Step5. Add the following code inside the XAML part of the user control(MyUserControl.xaml):

<StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> <TextBlock Text="My User Control" FontSize="34"/> <Image Source="Images/image1.jpg"/> </StackPanel>

**NOTE:**image1.jpg is a sample image stored in the Image folder of our project.

**Step6.**Go to MainPage.xaml and includeadd the user control in this way:

<local:MyUserControl x:Name="myUserControl" />

NOTE: xmlns:local="clr-namespace:PhoneApp6 is the namespace where our User Control is created.

That was the basic of creating a User Control in Windows Phone. Have a look at the second part of the article: How to expose properties of a User Control in Windows Phone

Hope the tip was helpful.

You can also follow us on Twitter: @winphonegeek for Windows Phone; @winrtgeek for Windows 8 / WinRT

Comments

thanking posted by: sravan on 01/16/2014 14:57:03 your post helped me a lot in reusing the layout, thanks

Error when run posted by: James W on 01/17/2014 21:49:05 If you follow the steps above you still get the following error in MainPage.xaml The namespace prefix "local" is not defined. Can you please add the <local:? definition. Can you also give an example of how you use the user control in MainPage.xaml if the user control is in a sub directory.

How to use buttons in common? posted by: Vijayadhas on 02/05/2014 13:50:09 Hi.. Very interesting and useful post.. This post is very helpful to me to get some ideas about the Common control for all the pages. But i am facing some problem here. When i click the button it should navigate to one page and the button back ground color also want to change. Here the page navigation is working. But Bg color is not change in first click. If i click the same button again mean it get changed. May i know what have to do to change the button back ground and navigation? Thanks in advance..

Answer "How to use buttons in common?" posted by: Hoang Quan on 08/12/2014 09:14:15 You can use eventhandler Fisrt: in usercontrol -You make two avariables are : public event EventHandler GoToView; public event EventHandler ChangeColor; -You have 2 event in Usercontrol is : private void _Gotoview(object sender, System.Windows.Input.GestureEventArgs e) { try { GoToView("View", new EventArgs()); } catch (Exception) { } } And... private void _Changecolor(object sender, System.Windows.Input.GestureEventArgs e) { try { ChangeColor("Color", new EventArgs()); } catch (Exception) { } } Second: In mainpage Declare in mainload 2 envent : (Usercontrol : is name of your usercontrol) Usercontrol.GoToView+= GotoviewEvent; Usercontrol.ChangeColor+= ChangeColorEvent; void GotoviewEvent(object sender, EventArgs e) { if ((string)sender == "View") { //do navigation } } void ChangeColorEvent(object sender, EventArgs e) { if ((string)sender == "Color") { //change color } } .Contacts me if you have trouble : [email protected]

Simple posted by: Pravin on 10/02/2014 14:27:20 Simply simple