HisTech Up

Walkthrough: Data Binding for UWP – Part 0



Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP


What are the differences between Data Mining, Machine Learning and Deep Learning? 11th February, 2018

What are the challenges of using Artificial Intelligence? 15th January, 2018

Mobile Development

Walkthrough: Data Binding for UWP – Part 0

Posted on .


Data binding is a way for your app’s UI to display data, and optionally to stay in sync with that data. Data binding allows you to separate the concern of data from the concern of UI, and that results in a simpler conceptual model as well as better readability, testability, and maintainability of your app.

You can use data binding to simply display values from a data source when the UI is first shown, but not to respond to changes in those values. This is called one-time binding, and it works well for data whose values don’t change during run-time. Additionally, you can choose to « observe » the values and to update the UI when they change. This is called one-way binding, and it works well for read-only data. Ultimately, you can choose to both observe and update, so that changes that the user makes to values in the UI are automatically pushed back into the data source. This is called two-way binding, and it works well for read-write data. Here are some examples.

  • You could use one-time binding to bind an Image to the current user’s photo.
  • You could use one-way binding to bind a ListView to a collection of real-time news articles grouped by newspaper section.
  • You could use two-way binding to bind a TextBox to a customer’s name in a form.

There are many patterns in different technologies, but we are going to see one of the most interesting pattern in UWP called MVVM. It separates the view from the real business logic of the application. MVVM stands for View-ViewModel-Model. View interacts with ViewModel and ViewModel interact with Model. View does not know the actual business logic of model, because it can’t directly interact with Model.

This walkthrough  will show you how to:

  • Perform the Classic Data Binding
  • Apply the MVVM pattern
  • Create a Data Converter
  • Perform the Compiled Binding
  • Apply the two modes of data binding on the same page

System requirements

You must have the following to complete this lab:

  • Microsoft Windows 10
  • Microsoft Visual Studio 2015


You must perform the following steps to prepare your computer for this lab:

  1. Install Microsoft Windows 10.
  2. Install Microsoft Visual Studio 2015. Choose a custom install and ensure that the Universal Windows App Development Tools are selected from the optional features list.


This series includes the following parts:

  1. Classic Data Binding
  2. Compiled Binding

Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...