User Control in Windows Store Apps Using C#

Today we are going to learn how to create and work with user control in Windows Store apps. You are all familiar with the advantage or feature of using user controls in an application. In Windows Store apps the user can also have the option to create their own user control and use it in an application mutliple times. You can create a User Control in the application and also add other control elements in it.

In Windows Store apps the User Control template is provided for creating composite controls. You can add this template to your application and easily create a user control. UserControls are defined within a namespace, so to use them in some page, you must declare a namespace in the XAML root elements; the namespace containing the UserControl.

In this article I will create a simple application that defines a UserControl and encapsulates it within a MainPage.XAML file.

Step 1

Create a Windows 8 Application using C#.

Step 2

Add a User Control to the application.

1. Right-click on the Solution Explorer.
2. Select Add -> New Item.
3. Select User Control template.
4. Click on the Add button.

Step 3

In the XAML file of the User Control define the control elements of XAML.

<UserControl

    x:Class="UserControl.MyUserControl1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:UserControl"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300"

    d:DesignWidth="400">

   

    <Grid>

        <StackPanel Background="Pink">

            <StackPanel Orientation="Vertical">

                <StackPanel Orientation="Horizontal" Margin="20,30">

                <TextBlock Text="Your Name: " FontSize="26.667" Margin="0,0,20,0" />

                <TextBox x:Name="NameInput" Width="250" />

            </StackPanel>

                <StackPanel Orientation="Horizontal" Margin="20,30">

                    <TextBlock Text="Your Name: " FontSize="26.667" Margin="0,0,20,0" />

                    <TextBox x:Name="pwdeInput" Width="250" />

                </StackPanel>

            <Button Content="Click Me" HorizontalAlignment="Center" Click="ClickMeButtonClicked"/>

            <TextBlock FontSize="53" x:Name="OutputText" />

        </StackPanel>

        </StackPanel>

    </Grid>

</UserControl>

Step 4

The user can also work on the code behind file of the User Control and the event handler etc. When this User control is used in another page the .cs file works like a .xaml file works.

namespace UserControl

{

    public sealed partial class MyUserControl1

    {

        public MyUserControl1()

        {

            this.InitializeComponent();

        }

        private void ClickMeButtonClicked(object sender, RoutedEventArgs e)

        {

            OutputText.Text = string.Format("Hello {0}", NameInput.Text);

        }

    }

}

Step 5

In the MainPage.XAML file include the namespace of the User Control. In this article the user control is defined under the same namespace.

xmlns:local="using:UserControl"

Step 6

Use the control like that:

<Page

    x:Class="UserControl.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:UserControl"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"> 

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FFE2BDBD" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

        <local:MyUserControl1 x:Name="usercontrol" Width="500"></local:MyUserControl1>

        </StackPanel>

    </Grid>

</Page>

Step 7

Now, all the work is done. Build your application and Run the MainPage.XAML page.