How to set default mode of x:Bind in UWP

Compiled bindings with {x:Bind} are an awesome feature of Universal Windows Platform XAML. Instead of using reflection, the data bindings are evaluated at compile-time, which not only shields us against unintended typos but gives significant performance boost at runtime as well. The only “annoyance” is that opposed to classic {Binding} it has a different default setting for its mode – instead of OneWay it uses OneTime. While this also improves performance for unchanging data, it is deceptively easy to forget to explicitly set OneWay where required. Furthermore, when we are showing multiple current values from a changing data source, it is a bit verbose to have to add the Mode property to every x:Bind. Luckily, there is a remedy for that!

x:DefaultBindMode

In SDK version 14393, x:DefaultBindMode was introduced. This neat little feature allows us to set the default {x:Bind} mode for an element and all its children unless explicitly overridden.

Suppose we have the following XAML:


<Grid>
<TextBlock Text="{x:Bind ViewModel.Symbol}" />
<TextBlock Text="{x:Bind ViewModel.Price}" />
<TextBlock Text="{x:Bind ViewModel.PriceChange}" />
</Grid>

view raw

OneTime.xaml

hosted with ❤ by GitHub

Because mode has not been explicitly specified for either expression, it defaults to OneTime and after the values are evaluated for the first time, they no longer track further changes. Now, let’s change that using x:DefaultBindMode:


<Grid x:DefaultBindMode="OneWay">
<TextBlock Text="{x:Bind ViewModel.Symbol}" />
<TextBlock Text="{x:Bind ViewModel.Price}" />
<TextBlock Text="{x:Bind ViewModel.PriceChange}" />
</Grid>

view raw

OneWay.xaml

hosted with ❤ by GitHub

Just like that, all three TextBlock elements will update their text anytime the bound property changes.

To make our life even easier, if we know most data bindings will be dynamic, we can even set the x:DefaultBindMode at the root element level:


<Page
x:DefaultBindMode="OneWay">

view raw

PageLevel.xaml

hosted with ❤ by GitHub

Of course it is easy to override the setting whenever necessary:


<StackPanel x:DefaultBindMode="OneWay">
<TextBox Text="{x:Bind ViewModel.Name, Mode=TwoWay}" />
<TextBlock Text="{x:Bind ViewModel.Name}" />
</StackPanel>

While the TextBlock will use OneWay update mode, TextBox uses TwoWay instead.

A great use for DefaultBindMode is when building input forms. We can just set the default to TwoWay and no longer need to remember it:


<StackPanel x:DefaultBindMode="TwoWay">
<TextBox Header="First name" Text="{x:Bind ViewModel.FirstName}" />
<TextBox Header="Last name" Text="{x:Bind ViewModel.LastName}" />
<CheckBox Content="Is subscribed" IsChecked="{x:Bind ViewModel.IsSubscribed}" />
</StackPanel>

view raw

FormTwoWay.xaml

hosted with ❤ by GitHub

x:DefaultBindMode is a tiny but lovely XAML feature, which makes working with x:Bind so much more pleasant!

WinUI

Buy me a coffeeBuy me a coffee

6 thoughts on “How to set default mode of x:Bind in UWP”

Leave a Reply

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

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>

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.