Data Binding Modes in Windows Store Apps Using XAML

Today we will learn about Data Binding Modes in Windows Store Apps using XAML. Data binding provides a simple way for Windows Store apps built for Windows to display and interact with data.

Data Binding is an essential part of UI elements for displaying data. When a binding is created with any UI element, it will display data. But the most important thing is that when the data changes in binding, the UI elements that are bound to that data can display changes automatically in the UI element. Similarly, the changes made by the user in a UI element can be saved in the data object.

This topic describes various data binding modes of Data Binding. Each binding has a Mode property, which determines how and when the data flows. Here in this article will talk about three available ways of binding modes in Windows Store Apps using XAML and C#.

The Binding Modes are:

1. OneWay bindings
2. TwoWay bindings
3. OneTime bindings

The binding mode is set by specifying the Mode property. We will discuss each of these Binding modes in a later section with an example.

OneWay

This is the default mode of Binding. In OneWay bindings, data flows only from the object to the UI and not vice-versa. It updates the target with the source data when the binding is created and when source data changes, it is reflected on the target data. In other words OneWay bindings update the target with the source data when the data changes.

Example

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid Height="150" Width="165">

            <TextBox  Name="textBox" Margin="0,-77,-90,0" Height="23" VerticalAlignment="Top"

               Text="One Way Binding Mode"

                Background="{Binding ElementName=listBox, Path=SelectedItem.Content, Mode=OneWay}">

            </TextBox>

            <ListBox Name="listBox" >

                <ListBoxItem Content="Green"/>

                <ListBoxItem  Content="Yellow" IsSelected="True"/>

                <ListBoxItem Content="Orange" />

            </ListBox>

       </Grid>

</Grid>

Output

When you select a color from the listbox, it will be reflected in the textbox.



TwoWay

As its name implies, this binding mode ensures the synchronization of data between the UI and objects. In other words either the source data is updated or the target data is updated. Changes are reflected on both. In the TwoWay binding mode, changes in the source or target automatically cause updates to each other.

Example

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid Height="180" Width="165">

            <TextBox  Name="textBox" Margin="0,-77,0,0" Height="23" VerticalAlignment="Top"

                Text ="{Binding ElementName=listBox,

                        Path=SelectedItem.Content,

                        Mode=TwoWay}">

            </TextBox>

            <ListBox Name="listBox" >

                <ListBoxItem Content="Gaurav"/>

                <ListBoxItem Content="Amit"/>

                <ListBoxItem Content="Deepak"/>

                <ListBoxItem Content="Manish"/>

            </ListBox>

       </Grid>

</Grid>

Output

When you select an item from the listbox it is displayed in the textbox.



When you update the value in the textbox, the changes are reflected in the listbox also. This is TwoWay binding.



OneTime

In OneTime binding, data flows from the object to the UI only once. This binding occurs only the first time when the source data is established and is not changed automatically when the target property or source property are updated. This binding is a good choice for reports where the data is loaded only once and viewed.

Example

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel Orientation="Vertical" VerticalAlignment="Center">

        <Slider x:Name="sliderOneTimeDataSource" Minimum="1" Maximum="100" Value="60" Margin="593,0,544,0"/>

        <TextBox x:Name="tbOneTimeDataBound" Text="{Binding ElementName=sliderOneTimeDataSource, Path=Value, Mode=OneTime}" Height="44" Margin="608,0,544,0"/>

    </StackPanel>

</Grid>

Output

The binding is done when the source data is being created. Therefore there is no effect in output when you change the value of the textbox or slider control.