DataBinding in Windows Store App

Introduction

In Windows 8 developer preview Metro Style Applications we will present the data binding models. In this section we will describe the data binding models. The data binding models are for binding to different types of data. It shows the differences between the available binding modes. A binding model shows that to bind forms controls to a data model and receive change notifications and show that to bind forms controls to a data model and receive change notifications. Here we will present an example to see the different types in this application with the help of this example.

So, we have to use the steps given below.

Step 1 :  First of all you have to 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 -> Visual C# -> Windows Metro Style -> 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 an (any) image to the application.

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

Code :  Let us see the code, as given below:

<Grid x:Name="LayoutRoot" Background="LightCyan">
    <!--App Orientation States-->
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="OrientationStates">
        <VisualState x:Name="Full"/>
        <VisualState x:Name="Fill">
          <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="Description">
                <DiscreteObjectKeyFrame KeyTime="0" Value="700">
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Portrait">
            <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="Description">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="700">
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
        </VisualState>
        <VisualState x:Name="Snapped">
          <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="Description">
                <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>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups> 
    <Grid x:Name="ContentRoot" Background="White" 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">
        <StackPanel x:Name="ContentPanel" Background="DarkGoldenrod">
          <StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">
            <StackPanel>
             <TextBlock Text="Select" Style="{StaticResource H3Style}" Foreground="LightCoral"/>
              <ListBox x:Name="ScenarioList" Margin="0,0,20,0" HorizontalAlignment="Left" Foreground="HotPink">
                <ListBox.ItemTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                  </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBoxItem x:Name="Scenario1" Foreground="Red">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="1. Binding modes" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario2" Foreground="Green">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="2. Value converters" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario3" Foreground="Blue">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="3. Binding to a model" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario4" Foreground="DarkViolet">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="4. Indexers" />
                </ListBoxItem>
                <ListBoxItem x:Name="Scenario5" Foreground="Yellow">
                    <TextBlock Style="{StaticResource ListBoxTextStyle}" Text="5. Data templates" />
               </ListBoxItem>             
               </ListBox>
            </StackPanel>
            <StackPanel Margin="0,31,0,0" >
              <TextBlock Text="Description:" Style="{StaticResource H3Style}"/>
              <StackPanel x:Name="Description" MaxWidth="900">                 
                  <!-- Section 1 -->
                <StackPanel x:Name="Scenario1Input">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="This section below shows the differences between the available binding modes (OneWay, TwoWay, and OneTime)." />
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0"/>
                    <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                        <Button x:Name="scenario1Clear" Content="Reset" Margin="0,0,10,0" Click="Scenario1Reset" />
                    </StackPanel>
                </StackPanel>                 
                  <!-- Section 2 -->
                <StackPanel x:Name="Scenario2Input" Visibility="Collapsed">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="This section below shows how a custom value converter is used to control how data is displayed." />
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                    <StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
                        <Button x:Name="scenario2Reset" Content="Reset" Margin="0,0,10,0" Click="Scenario2Reset"/>
                    </StackPanel>
                </StackPanel>
                  <!-- Section 3 -->
                <StackPanel x:Name="Scenario3Input" Visibility="Collapsed">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="This section below shows how to bind form controls to a data model and receive change notifications (through INotifyPropertyChanged) when the model is updated." />
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" />
                    <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                        <Button x:Name="scenario3Reset" Content="Reset" Margin="0,0,10,0" Click="Scenario3Reset" />
                    </StackPanel>
               </StackPanel>                 
                <StackPanel x:Name="Scenario4Input">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="The demonstration below shows how to bind controls to values in an array or collection using integer and string indexers." />
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0"/>
                    <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                        <Button x:Name="scenario4Reset" Content="Reset" Margin="0,0,10,0" Click="Scenario4Reset"/>
                    </StackPanel>
                </StackPanel> 
                <StackPanel x:Name="Scenario5Input">
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="The demonstration below shows how to use data binding with templates to customize the look of each item." />
                    <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0"/>
                    <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                        <Button x:Name="scenario5Reset" Content="Reset" Margin="0,0,10,0" Click="Scenario5Reset" />
                    </StackPanel>
               </StackPanel>
                 <!-- Output section -->
          <TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>
          <StackPanel x:Name="Output"  HorizontalAlignment="Left">
              <!-- Section 1-->
            <Grid x:Name="Scenario1Output">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="400"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="5"/>
                    <RowDefinition/>
                    <RowDefinition Height="5"/>
                    <RowDefinition/>
                    <RowDefinition Height="5"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Text="Binding mode" Style="{StaticResource DescriptionTextStyle}" FontWeight="Bold" Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Left"/>
                <TextBlock Text="Data source" Style="{StaticResource DescriptionTextStyle}" FontWeight="Bold" Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Left"/>
                <TextBlock Text="Data bound" Style="{StaticResource DescriptionTextStyle}" FontWeight="Bold" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left"/>
               <TextBlock Text="Description" Style="{StaticResource DescriptionTextStyle}" FontWeight="Bold" Grid.Column="3" Grid.Row="0" HorizontalAlignment="Left"/>
                 <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="OneWay" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Slider x:Name="sliderOneWayDataSource" Minimum="1" Maximum="100" Value="10" Grid.Column="1" Grid.Row="2" Width="180"/>
                <TextBox x:Name="tbOneWayDataBound" Text="{Binding ElementName=sliderOneWayDataSource, Path=Value, Mode=OneWay}" Grid.Column="2"
Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top"  Width="150"/>
                <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="Updates the target property when the binding is created. Changes to the source object can also propagate to the target." Grid.Column="3" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap"/> 
                <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="TwoWay" Grid.Column="0" Grid.Row="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Slider x:Name="sliderTwoWayDataSource" Minimum="1" Maximum="100" Value="50" Grid.Column="1" Grid.Row="4" Width="180" />
                <TextBox x:Name="tbTwoWayDataBound" Text="{Binding ElementName=sliderTwoWayDataSource, Path=Value, Mode=TwoWay}" Grid.Column="2"
Grid.Row="4" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="Updates either the target or the source object when either changes. When the binding is created, the target property is updated from the source." Grid.Column="3" Grid.Row="4" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap"/>
                <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="OneTime" Grid.Column="0" Grid.Row="6" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Slider x:Name="sliderOneTimeDataSource" Minimum="1" Maximum="100" Value="100" Grid.Column="1" Grid.Row="6" Width="180"/>
                <TextBox x:Name="tbOneTimeDataBound" Text="{Binding ElementName=sliderOneTimeDataSource, Path=Value, Mode=OneTime}" Grid.Column="2"
Grid.Row="6" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="Updates the target property when the binding is created." Grid.Column="3" Grid.Row="6"HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap"/>
            </Grid>
            <!-- Section 2 -->
            <StackPanel x:Name="Scenario2Output" >
                <Border BorderBrush="LightBlue" BorderThickness="4" CornerRadius="20" Margin="5">
                    <StackPanel Margin="5">
                        <!-- Add converter as a resource to reference it from a Binding. -->
                        <StackPanel.Resources>
                            <local:S2Formatter x:Key="GradeConverter"/>
                        </StackPanel.Resources>
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="Percent grade:" Margin="5" />
                        <Slider x:Name="sliderValueConverter" Minimum="1" Maximum="100" Value="70" Margin="5"/>
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="Letter grade:" Margin="5"/>
                        <TextBox x:Name="tbValueConverterDataBound" Text="{Binding ElementName=sliderValueConverter, Path=Value, Mode=OneWay, Converter{StaticResource GradeConverter}}" Margin="5" Width="150"/>
                   </StackPanel>
                </Border>
            </StackPanel>             
              <!-- Section 3 -->
            <StackPanel x:Name="Scenario3Output" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150"/>
                        <ColumnDefinition Width="400"/>
                        <ColumnDefinition Width="400"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                   </Grid.RowDefinitions>
                     <Border BorderBrush="LightBlue" BorderThickness="4,4,0,4" Grid.Column="0" Grid.Row="0">
                        <TextBlock Style="{StaticResource DescriptionTextStyle}" Text="Employee data model"  HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" />
                    </Border>
                    <Border BorderBrush="LightBlue" BorderThickness="4" Grid.Column="1" Grid.Row="0">
                        <StackPanel Margin="5">
                            <TextBlock Text="Name:" Style="{StaticResource DescriptionTextStyle}" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <TextBox Text="{Binding Path=Name, Mode=TwoWay}" Width="350" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <TextBlock Text="Organization:" Style="{StaticResource DescriptionTextStyle}" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            <TextBox Text="{Binding Path=Organization, Mode=TwoWay}" Width="350" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                        </StackPanel>
                    </Border>
                    <Border BorderBrush="LightBlue" BorderThickness="0,4,4,4" Grid.Column="2" Grid.Row="0">
                        <TextBlock x:Name="tbBoundDataModelStatus" Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Center"
VerticalAlignment="Center"/>
                    </Border>
                </Grid>
           </StackPanel>
             <StackPanel x:Name="Scenario4Output" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400">
                <Border BorderBrush="LightBlue" BorderThickness="4" CornerRadius="20" Margin="5">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Team name:" Style="{StaticResource DescriptionTextStyle}" Margin="5" FontWeight="Bold"/>
                            <TextBlock Text="{Binding Path=[3].Name }" Style="{StaticResource DescriptionTextStyle}" Margin="5" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Team manager:" Style="{StaticResource DescriptionTextStyle}" Margin="5" FontWeight="Bold"/>
                            <TextBlock Text="{Binding Path=[3][Gaffer]}" Style="{StaticResource DescriptionTextStyle}" Margin="5"/>
                        </StackPanel>
                    </StackPanel>
                </Border>
                <TextBlock Text="Binds to the 3rd item in a collection and to a string key in the object."
FontStyle="Italic" HorizontalAlignment="Left" TextWrapping="Wrap"/>
            </StackPanel>
            <StackPanel x:Name="Scenario5Output">
                <ListBox x:Name="lbDataTemplates">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                             </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </StackPanel>
      </ScrollViewer>       
            </StackPanel>
        </StackPanel>
    </Grid>
  </Grid>

Step 4 : After running this code we get the following output as given below. The first option is Binding modes as shown below. It shows the differences between the available binding modes.

The Value Converters shows how to use a custom value converter to control how data is displayed.

The Binding model shown below binds forms controls to a data model and receives change notifications.

The Indexers shows the array using integer and string indexers.

The last of the Data templates shows how to use data binding with templates to customize the look of each item.