Using compiled bindings (x:Bind) with #mvvmlight

Build, MVVM, Technical stuff, Universal Windows Platform UWP, Windows 10, Work, XAML
See comments

One of the XAML-related announcements at Build this year was the availability of compiled bindings. These new bindings can be used instead of the “classic” {Binding} syntax in XAML. Note that this syntax is only available in Windows 10 universal applications, not in WPF yet.

The advantage of compiled bindings over normal bindings is that (wait for it) they are compiled. So there is syntax check by the compiler when you build your project. Also, the bindings will be resolved much faster because they do not rely on reflection during runtime.

For example, if you have the following property in a Windows 10 Universal application page:

public string TimeWhenLoadingPage
{
    get
    {
        return DateTime.Now.ToString("HH:mm:ss");
    }
}

Then you can consume this property in the XAML with:

<TextBlock HorizontalAlignment="Center"
           VerticalAlignment="Center"
           FontSize="18"
           Text="{x:Bind TimeWhenLoadingPage}" />

Using x:Bind with MVVM

Of course these bindings will react to the PropertyChanged event, just like normal bindings too. So you can use these in an MVVM app without issues. There are also the usual parameters you can use, such as Converter, ConverterParameter, Mode, etc.

The only parameter missing, however, is the Source one. ElementName is also missing from there, but for an MVVM app, Source is more annoying. So how can you do, for instance in an MVVM Light application?

In fact it’s not that hard: Since you can bind to a property of the Page, and since the x:Bind syntax supports access to nested properties, you just have to expose the ViewModel as a property of the Page. In general, we set the ViewModel as the DataContext of the Page, for example with:

<Page x:Class="App8.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      DataContext="{Binding Main, Source={StaticResource Locator}}">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

Then we can expose the DataContext in the Page with:

public sealed partial class MainPage : Page
{
    public MainViewModel Vm
    {
        get
        {
            return (MainViewModel)DataContext;
        }
    }

    public MainPage()
    {
        InitializeComponent();
    }
}

(by the way, if you install the MVVM Light Visual Studio extension (VSIX) available on Codeplex, you get code snippets in Visual Studio. One of these has the shortcut mvvmvm and create the code show above, which is a convenient shortcut).

Once this property is exposed, we can use the properties within the ViewModel, for example with:

<TextBlock HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="18"
            Text="{x:Bind Vm.Hello}" />

Hopefully this will help MVVM Light users to take advantage of these new bindings!

Happy coding
Laurent

Previous entry | Next blog entry

Responses to “Using compiled bindings (x:Bind) with #mvvmlight”

  1. Lee McPherson Says:

    There’s such a lack of documentation on this subject. I don’t suppose you have figured out a way to insert design-time values into compiled bindings? It seems to want to use the property names no matter what (which is better than nothing).

  2. Jakub Krampl Says:

    Hello Laurent,

    basically it means that a view will be “dependent” on specific ViewModel via “Vm” property. Does not it destroy MVVM approach?

  3. lbugnion Says:

    Partly; here I am using the DataContext to access the ViewModel. It puts some restrictions on the binding, since you cannot use an implicit/inherited DataContext like in a true MVVM scenario. So I guess it is a trade-off somehow. I suspect that this is an early feature for now and it will get better. Supporting Source (notably implicit data template and ElementName) would be a good continuation.

  4. Bill Reiss Says:

    You said compiled bindings are not in WPF “yet”, do we know if this is coming? There is a very large WPF app I helped develop for a customer that could see some big benefits from this.

  5. lbugnion Says:

    Hey Bill, yes this was announced in a tweet (iirc), i will try to find it. We don’t know about dates though.

  6. Chevon Says:

    Hey Laurent,

    So I am running into an issue with X:Bind when it comes to ViewModels with a inheritance structure. It seems that the generated compiled bindings don’t know how to resolve the inheritance structure if you use a new keyword to change the property type to a more derived type.

    See http://stackoverflow.com/questions/34357545/using-xbind-with-mvvmcross

    Do you have any thoughts on how to solve this, besides creating a new property?

  7. lbugnion Says:

    I will check that out with Microsoft. Thanks for the feedback.

Comments for Using compiled bindings (x:Bind) with #mvvmlight