Using compiled bindings in your Windows 10 universal app

One of the news in the Windows 10 SDK is that you can use compiled binding. In pre Windows 10 bindings was created in run time. When you’re building your windows universal app for windows 10 you can created bindings in compile time. This to boost the performance of the bindings, compiled bindings will make the page load much faster. This blog post will introduce you with the basics of compiled bindings.

To create a binding that will be created in compile time you will use x:Bind instead of Binding to create the binding.

      <TextBlock Text="{x:Bind Title}" />

One big difference against is that the binding will not be to DataContext, it will be to the page. If the code above should work you have to create a Title property in the code behind file. If you don’t do that you will get a error when you compiling your app. The reason to to bind to the actuall page instead of DataContext is that DataContext is of type object and the compiler will not know what you will assign to it during run time. Because you binding to the actual page it is also possible to bind directly to other controls on your page.

If you using a binding in a data template you have to specify data type for the data template with x:DataType as in the code below. Don’t forget to declare the namespace for your data type. In this example I have created a property in my code behind file called ViewModel that has a Items property that I binding to the ItemsSource of the ListView.

<ListView ItemsSource="{x:Bind ViewModel.Items}">  
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="model:ItemModel">
                        <TextBlock Text="{x:Bind Title}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

The code behind can looks like the code below. In this example DataContext is set when the view is created and the ViewModel will have a method for loading data.

public sealed partial class ItemsView
{
        protected ItemsViewModel ViewModel { get { return DataContext as ItemsViewModel; } }
 
        public ItemsView()
        {
            this.InitializeComponent();
            DataContextChanged += ItemsView_DataContextChanged;
        }
 
        private async void ItemsView_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
        {
            if(ViewModel != null)
            {
                await ViewModel.LoadData();
            }
        }
}

11 thoughts on “Using compiled bindings in your Windows 10 universal app

    • Daniel Hindrikes says:

      I have updated the blog post with some explanations. The main reason to use compiled bindings is that you will get much better performance. The page will load much faster.

  1. Emiliano says:

    Hi Daniel,

    so with compiled binding it’s not possible to notify the UI of the changes and update the values in the UI? for example if I write ViewModel.Title = “newtitle”, the UI will be not updated right? what is the best practice? use the old binding or call bindings.update() ?

    thanks

  2. Eyal says:

    ViewModel is property MvxWindowsPage.
    When doing direct binding to it with casting you get the following error:
    Xaml Internal Error error WMC9999: Unable to cast object of type ‘Microsoft.MetadataReader.MetadataOnlyPropertyInfo’ to type ‘System.Reflection.MethodInfo’.

    the following encounter with that error:
    code behind:
    protected MainShellViewModel ViewModel { get { return DataContext as MainShellViewModel; } }

    xaml:
    <ListView x:Name="NavigationListView"
    ItemsSource="{x:Bind ViewModel.NavigationLinks}"

    • lindexi_gd says:

      I build an empty Page but vs say “C:\Program Files (x86)\MSBuild\Microsoft\WindowsXaml\v14.0\8.2\Microsoft.Windows.UI.Xaml.Common.targets(350,5): Xaml intenal error WMC9999: Unable to cast object of type “Microsoft.MetadataReader.MetadataOnlyFieldInfo” to type “System.Reflection.MethodInfo”.”
      Can you give me a suggest.
      mailto:lindexi_gd@163.com

      • I know this is an old comment, but have you checked the property you are binding to if it hides an inherited property. I had the same issue, and I fixed it by not using that hidden property in the model.

Leave a Reply

Your email address will not be published. Required fields are marked *