User and Custom Controls in Windows Store App

Introduction

In this article we are going to see how to work user and custom controls in Windows 8 Metro Style Applications. In XAML, We can create composite controls, which are also called UserControl elements. You will typically create a User Control in the application where you use it, and add other Control elements to it. For example, you might create a Login control that you want to display on a particular view in your application. UserControls are defined within a namespace, so to use them in XAML, you must declare a namespace in the XAML root elements. The namespace containing the UserControl. Here, We will present an example, It is a simple UserControl encapsulating a few text elements to accept input and a button to show the output.

So, we will use the following steps to make this application as below.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visualc# -> Windows Metro Style -> Blank Application
• Rename this Application :

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.

Step 3 : The MainPage.xaml file is as in the following code.

Code : Let us see the code which is given below.

<Page x:Class="TemplateCS.MainPage"

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

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

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

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

          mc:Ignorable="d"

          d:DesignHeight="768" d:DesignWidth="1366">         

          <Page.Resources>

        <Style x:Key="BaseStatusStyle" TargetType="TextBlock">

          <Setter Property="FontFamily" Value="Segoe UI Semilight"/>

                <Setter Property="FontSize" Value="14.667"/>

        <Setter Property="Margin" Value="0,0,0,5"/>

         </Style>

           <Style x:Key="StatusStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">

           <Setter Property="Foreground" Value="Green"/>

         </Style>

          <Style x:Key="ErrorStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">

         <Setter Property="Foreground" Value="Blue"/>

         </Style>

       </Page.Resources> 

        <Grid x:Name="LayoutRoot" Background="Pink">

     <!--App Orientation States-->

      <VisualStateManager.VisualStateGroups>

        <VisualStateGroup x:Name="OrientationStates">
        <VisualState x:Name="FullScreenLandscapeScale100Percent"/>

      <VisualState x:Name="FilledScale100Percent">

             <Storyboard>

       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

          <DiscreteObjectKeyFrame KeyTime="0">

        <DiscreteObjectKeyFrame.Value>

           <Thickness>40,20,40,20</Thickness>

             </DiscreteObjectKeyFrame.Value>

            </DiscreteObjectKeyFrame>

             </ObjectAnimationUsingKeyFrames>

      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

                  <DiscreteObjectKeyFrame KeyTime="0">

      <DiscreteObjectKeyFrame.Value>

                <Orientation>Horizontal</Orientation>

               </DiscreteObjectKeyFrame.Value>

          </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="SectionInput">

            <DiscreteObjectKeyFrame KeyTime="0" Value="700">

           </DiscreteObjectKeyFrame>

        </ObjectAnimationUsingKeyFrames>

      </Storyboard>

      </VisualState>

        <VisualState x:Name="FullScreenPortraitScale100Percent">

          <Storyboard>

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

         <DiscreteObjectKeyFrame KeyTime="0">

        <DiscreteObjectKeyFrame.Value>

         <Thickness>40,20,40,20</Thickness>

       </DiscreteObjectKeyFrame.Value>

         </DiscreteObjectKeyFrame>

       </ObjectAnimationUsingKeyFrames>

       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="SectionInput">

         <DiscreteObjectKeyFrame KeyTime="0" Value="400">

     </DiscreteObjectKeyFrame>

        </ObjectAnimationUsingKeyFrames>

     </Storyboard>

        </VisualState>

      <VisualState x:Name="SnappedScale100Percent">

    <Storyboard>

       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

       <DiscreteObjectKeyFrame KeyTime="0">

       <DiscreteObjectKeyFrame.Value>

       <Thickness>20,20,20,20</Thickness>

           </DiscreteObjectKeyFrame.Value>

          </DiscreteObjectKeyFrame>

       </ObjectAnimationUsingKeyFrames>

             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

         <DiscreteObjectKeyFrame KeyTime="0">

               <DiscreteObjectKeyFrame.Value>

          <Orientation>Vertical</Orientation>

      </DiscreteObjectKeyFrame.Value>

             </DiscreteObjectKeyFrame>

             </ObjectAnimationUsingKeyFrames>

           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="SectionInput">

    <DiscreteObjectKeyFrame KeyTime="0" Value="250">

     </DiscreteObjectKeyFrame>

           </ObjectAnimationUsingKeyFrames>

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">

           <DiscreteObjectKeyFrame KeyTime="0">

                 <DiscreteObjectKeyFrame.Value>

               <Thickness>0,0,10,0</Thickness>

            </DiscreteObjectKeyFrame.Value>

            </DiscreteObjectKeyFrame>

              </ObjectAnimationUsingKeyFrames>

           </Storyboard>

        </VisualState>

      <VisualState x:Name="FullScreenLandscapeScale140Percent">

           <Storyboard>

  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

     <DiscreteObjectKeyFrame KeyTime="0">

     <DiscreteObjectKeyFrame.Value>

          <Thickness>40,20,40,20</Thickness>

        </DiscreteObjectKeyFrame.Value>

          </DiscreteObjectKeyFrame>

        </ObjectAnimationUsingKeyFrames>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

       <DiscreteObjectKeyFrame KeyTime="0">

           <DiscreteObjectKeyFrame.Value>

          <Orientation>Horizontal</Orientation>

        </DiscreteObjectKeyFrame.Value>

         </DiscreteObjectKeyFrame>

      </ObjectAnimationUsingKeyFrames>

           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="SectionInput">
     <DiscreteObjectKeyFrame KeyTime="0" Value="600">

           </DiscreteObjectKeyFrame>

           </ObjectAnimationUsingKeyFrames>

           </Storyboard>

            </VisualState>

       <VisualState x:Name="FilledScale140Percent"/>

             <VisualState x:Name="FullScreenPortraitScale140Percent">

                  <Storyboard>

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                   <DiscreteObjectKeyFrame KeyTime="0">

                             <DiscreteObjectKeyFrame.Value>

         <Thickness>40,20,40,20</Thickness>

         </DiscreteObjectKeyFrame.Value>

          </DiscreteObjectKeyFrame>

                         </ObjectAnimationUsingKeyFrames>

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="SectionInput">

                 <DiscreteObjectKeyFrame KeyTime="0" Value="250">
                 </DiscreteObjectKeyFrame>

         </ObjectAnimationUsingKeyFrames>

             </Storyboard>

              </VisualState>

               <VisualState x:Name="SnappedScale140Percent"/>

         </VisualStateGroup>

               </VisualStateManager.VisualStateGroups>

              <Grid x:Name="ContentRoot" Background="Pink" Margin="100,20,100,20">

        <Grid.RowDefinitions>

               <RowDefinition Height="Auto"/>

         <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>

       </Grid.RowDefinitions>

       <!-- Content -->

     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">

         <Grid HorizontalAlignment="Left">

       <Grid.RowDefinitions>

       <RowDefinition Height="Auto"/>

         <RowDefinition Height="Auto"/>

      <RowDefinition Height="Auto"/>

     <RowDefinition Height="Auto"/>

    <RowDefinition Height="*"/>

         </Grid.RowDefinitions>

       <TextBlock Grid.Row="0" Text="Input" Style="{StaticResource H2Style}"/> <StackPanel x:Name="InputPanel" Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Left">

      <StackPanel>

   <TextBlock Text="Select Section:" Style="{StaticResource H3Style}" Margin="0,5,0,0"/>

      <Frame x:Name="SectionList" MaxWidth="250" Margin="0,5,0,0" IsTabStop="False"/>

      </StackPanel>

          <StackPanel>

      <TextBlock Margin="0,5,0,0"  Text="Description:" Style="{StaticResource H3Style}"/>

           <!-- Input Sections -->

  <Frame x:Name="SectionInput" Margin="0,5,0,0" MaxWidth="800" IsTabStop="False" />

       </StackPanel>

     </StackPanel>

     <!-- Output section -->

   <TextBlock Text="Output" Grid.Row="2"  Margin="0,25,0,20" Style="{StaticResource H2Style}" />

       <TextBlock x:Name="StatusBlock" Grid.Row="3" Margin="0,0,0,5"/>

     <!-- Output Sections -->

   <Frame x:Name="SectionOutput" Grid.Row="4" MaxWidth="1050"  IsTabStop="False"/> 
        </Grid>

    </ScrollViewer>

      </Grid>

    </Grid>

</Page>

Step 4 : After running this code we get the following output.