Universal Windows Platform - Data Binding

Data binding is a useful technique to populate data into your application. It’s really useful when you’ve massively structured code, and you’ve to handle a lot of data. It binds your whole bunch of data into a single control, such as ListView, ListBox, FlipView or it can be your custom control. XAML gives us the power to bind the data into these structural controls with less effort and in an efficient way.

So, let’s get started with Universal Windows Platform app development with a simple data binding technique.

Different Binding Modes

There are a number of different binding modes, as defined in the BindingMode enumeration:

• TwoWay – Changes to the UI or model automatically update the other. This is used for editable forms or other interactive scenarios.
  
  
• OneWay – Updates the UI when the model changes. This is appropriate for read-only controls populated from data.
  
  
• OneTime – Updates the UI when the application starts or when the data context changes. This is used when the source data static/does not change.
  
  
• OneWayToSource – Changes to the UI update the model.
  
  
• Default – Uses the default mode for the particular binding target (UI control). This differs based on the control.

The Universal Windows Platform, introduces a new kind of binding is Compile Binding (x:Bind). Comparing traditional binding techniques, it is really efficient and also faster. If you have less amount of data, may be you won’t notice the actual change of execution time but when you’re working on vast amount of data, you will notice the actual differences. To start with our project, firstly, create a new blank application. Then, create a new folder and give it a name “Images”. I have used Images from Microsoft theme download site. Now, add these images into this folder.


Figure 1

Designing UI

To design the UI element, we’ve used FlipView control. Because we want to show the images by using data binding technique. Paste the code into your main grid element.

<FlipView Name="MyFlipView" BorderBrush="Black" BorderThickness="1" ItemsSource="{x:Bind Items}" xmlns:m="using:App2">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="m:Images">
            <Grid>
                <Image Source="{x:Bind images}" Stretch="Fill" />
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{x:Bind title}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20" /> </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Listing 1

Here, the name of the FlipView control is “MyFlipView” and there are two main child element: Image and TextBox. TextBox control is wrapped by a Border control which give a little bit of effect in the UI.

Most importantly, if you notice we’ve bind the ItemSource by compile binding and that’s why we’ve to define DataType (m:Images) by its class name. Here Images is the name of the class which contains an image and string attribute.

public class Images
{
   public BitmapImage images { get; set; }
   public string title { get; set; }
}

Listing 2

Lastly, we bind the Image and TextBox with “images” and “title”. The backend code will be like the following code snippet.

public ObservableCollection<Images> Items { get; private set; } = new ObservableCollection<Images>();
…
BitmapImage[] bitmapImage = new BitmapImage[9];
bitmapImage[0] = new BitmapImage(new Uri("ms-appx:///Images/milkyway1.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[1] = new BitmapImage(new Uri("ms-appx:///Images/milkyway2.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[2] = new BitmapImage(new Uri("ms-appx:///Images/milkyway3.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[3] = new BitmapImage(new Uri("ms-appx:///Images/milkyway4.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[4] = new BitmapImage(new Uri("ms-appx:///Images/milkyway5.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[5] = new BitmapImage(new Uri("ms-appx:///Images/milkyway6.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[6] = new BitmapImage(new Uri("ms-appx:///Images/milkyway7.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[7] = new BitmapImage(new Uri("ms-appx:///Images/milkyway8.jpg", UriKind.RelativeOrAbsolute));
bitmapImage[8] = new BitmapImage(new Uri("ms-appx:///Images/milkyway9.jpg", UriKind.RelativeOrAbsolute));

string[] title = new string[] { "Milkyway 1", "Milkyway 2", "Milkyway 3", "Milkyway 4", "Milkyway 5", "Milkyway 6", "Milkyway 7", "Milkyway 8", "Milkyway 9" };

for (int i = 0; i < 9; i++)
{
    this.Items.Add(new Images { images = bitmapImage[i], title = title[i] });
}

MyFlipView.ItemsSource = Items;

Listing 3

Here, we declare a list item named “Items” and assign it to “MyFlipView” control. We’ve added the image and title array to the collection list by using a for loop.

If we run the application, it will look like the following screenshot:


Figure 2

Another way to bind is the traditional way that’s we did before in Windows Phone 8.1 and later. We’ve changed a little bit to our XAML code.

<FlipView Name="MyFlipView" BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding Items}">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding images}" Stretch="UniformToFill" />
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding title}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20" /> </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Listing 4

If we compare two binding techniques, we can see that compile binding is much faster than normal binding.


Figure 3: Compile Binding

Here the memory process is 60 bytes. If you look at the normal binding, the memory process is 70 bytes.


Figure 4: Normal Binding

Closure

Hopefully, you have understood the binding techniques in Universal Windows Platform app development. You can apply this procedure in any form of application and make an efficient way to serve you data. Happy coding!

You can download the full source code, here.