Custom Control in Windows Store Apps Using C#

Today we will learn how to use custom controls in Windows Store Apps. In my previous article I showed you how to create and use a User Control template in Windows Store Apps. The user can also create Custom Controls in Windows Store Apps. The user can use a Custom Control the same as a User Control by including their namespaces.

The Custom Control is a control that can be used in multiple projects. It allows the user to restyle and change the default behavior when needed. A Custom Control is built with the help of the core control of Windows Store Apps such that button, image etc.

In Visual Studio 2012 RC you can create a Custom Control in Windows Store Apps using the Templated Control. Windows Store Apps provide the Templated Control item template to add a custom control within the project and use it anywhere. When you add a custom control, the app automatically creates two necessary to files to process the custom control; they are:

Theme/generic.xaml: It contains the default style and template layout for the custom control.
The class file of Custom Control: This file contains the control login if needed.

Now we are going to add a Custom Control in the Windows Store Apps project.

Step 1

Create a Windows 8 Application using C#.

Step 2

Add a Custom Control to the application project.

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

Step 3

Adding the Custom Control Template creates two required elements for the Custom Control.



Step 4

Open the Class file CustomControl.cs file. In the constructor of your class you must set the DefaultStyleKey to the type of your control. This enables application of the style and the template for this type whenever it is used.

namespace UserAndCustomControls

{

    public sealed class BasicCustomControl : Control

    {

        public BasicCustomControl()

        {

            this.DefaultStyleKey = typeof(BasicCustomControl);

        }

    }

}

Step 5

In the generic.xaml we write the code for the style and design for the custom control; see:

<ResourceDictionary

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

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

    xmlns:local="using:UserAndCustomControls">

    <!-- generic.xaml can contain one or more definitions for any number of custom controls within the project -->

    <!-- a project only has one themes\generic.xaml -->

    <!-- this is the definition for our basic control -->

    <Style TargetType="local:BasicCustomControl">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="local:BasicCustomControl">

                    <StackPanel Orientation="Vertical">

                        <ListBox >

                            <ListBoxItem>

                                <StackPanel  Orientation="Horizontal">

                                    <Image Source="Windows 8.jpg" Height="200" Width="300" Stretch="Fill"></Image>

                                    <Image Source="Windows_8.jpg" Height="200" Width="300"   Stretch="Fill"></Image>

                                    <Image Source="windows8(1).jpg" Height="200" Width="300"   Stretch="Fill">
                                    </Image>                              

                                </StackPanel>

                            </ListBoxItem>

                        </ListBox>

                    </StackPanel>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>
</ResourceDictionary>

Step 6

Here we use Custom Contol in the MainPage.XAML file. We need to add the namespace of the Custom Control. In this article the User Control is defined under the same namespace; see:

xmlns:local="using:UserControl"

Step 7

Use the Custom 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 x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">

      <StackPanel HorizontalAlignment="Center">

          <TextBlock Text="Below is the result of using our custom control" />

      <!-- observe the xmlns:local scope declaration in the root node of this view -->

         <local:BasicCustomControl Width="auto" Height="auto"/>

      </StackPanel>

 </Grid>
</Page>

Step 8

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