HisTech Up

Walkthrough: Data Binding for UWP – Part 3 – Compiled Binding

Introduction

user

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


LATEST POSTS

Xamarin: Stratégie de partage de code pour iOS et OS X 10th April, 2016

Walkthrough: Data Binding for UWP – Part 2 – Converters 31st March, 2016

Windows Apps

Walkthrough: Data Binding for UWP – Part 3 – Compiled Binding

Posted on .

Compiled Binding

Compiled bindings (often just referred to as x:Bind) is a new type of binding mechanism in Windows 10 Universal Windows Platform (UWP) which does all the heavy lifting during compile time, instead of doing it during runtime via reflection, which improves performance significantly but also has some other benefits such as strong typing and compile time validation (no more typos in binding expressions and then scratching your head and going through Output window trying to figure out why something isn’t being shown in the UI).

 

Implement the x:Bind on MainPage

So here we are back in our previous app – DataBindingHOL  -

1. Open the file MainPage.Xaml and paste in the following just after the existing GridView in the main Grid.
XAML


            
                
                    
                        
                        
                        
                        
 
                    
                
            
        

Actually, it’s just a copy the previous GridView. We just rename the header to “Compiled Binding” and set the grid column to 1. So we’re going to compare side by side.
2. Replace the GridView ItemsSource by the following: ItemsSource= »{x:Bind Aliens} »

Next, build the project.

So we got a compile error, because there’s no “Aliens” property on our code behind, so we need to fix that first.

In compiled binding, the data context is always the code behind of the page that it’s on.

Figure 1  In compiled binding, the data context is always the code behind of the page that it’s on.

 

  1. Open the MainPage code behind and, now create a public property called ViewModel of a type MainPageViewModel
public MainPageViewModel ViewModel { get; set; }

4. Go the MainPage.Xaml and update the GridView ItemsSource like this:
XAML

ItemsSource="{x:Bind ViewModel.Aliens}"

So now we’ve got our ViewModel is the property on our code behind, and the Aliens property, and so this should, work out

If you run on local machine, it should work. But we don’t get the full efficiency of this because we need to do x:Bind on the Text property of the TextBlock and also on the Source property of the Image and the Visibility property of the Border.

  1. Use x:Bind inside the DataTemplate

XAML


            
                
                    
                        
                        
                        
                        
                    
                
            
        

If you try to build the project, you got the compilation error “No DataType defined for DataTemplate

In compiled binding, you need to define the datatype for the data template - fig 2

Figure 2  In compiled binding, you need to define the datatype for the data templat

 

  1. Define the datatype of the data template

– You first declare the namespace of the model

XAML


–  After you declare the datatype on the DataTemplate

XAML


– Here is the complete GridView
XAML


            
                
                    
                        
                        
                        
                        
                    
                
            
        

Now, the GridView is using 100% of compiled binding.

  1. Tie the two, the classic binding and the compiled binding, together.

You might notice that the data displayed by the two lists are different.

You need the tie the ViewModel if you want to use the two binding models - fig 3

Figure 3 You need the tie the ViewModel if you want to use the two binding models

It’s not a bug. Actually, it’s just because there are two different instances of the MainPageViewModel.
To address we’re going to use a little trick. Modify the MainPage constructor like this:

public MainPage()
       {
           this.InitializeComponent();
 
           //ViewModel = new MainPageViewModel();
           this.DataContextChanged += (s,e) => { 
ViewModel = DataContext as ViewModels.MainPageViewModel; };
 
       }

This is tying the two, the old model and the new model, together. So when we set data context in the traditional way, we’re actually going to set that property on our code behind, as well.
So now, we could still declare it in Xaml the old way but get the benefits of x:Bind.

Now the two lists are in sync - fig 4

Figure 4 Now the two lists are in sync

We are done! :)

profile

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=""> <strike> <strong>

View Comments (0) ...
Navigation