In this blog we will illustrate some features of the Binding concepts applied to Text properties. Some of the characteristics will be appliable to other kind of bindings, not only Text Properties.

Prerequisites

In this post, we assume you know the “Property Change Notification” technology that is the base of the WPF binding system. To focus the code on the target of the blog, we will use the CommunityToolkit.MVVM, to manage the notification process.

Binding

<Textbox Text="{Binding MyTextVariable}"/>

Consider this example:

ViewModel:

namespace BlogApp
{
    public class User : ObservableObject
    {
        private string name;
        public string Name
        {
            get =&gt; name;
            set =&gt; SetProperty(ref name, value);
        }

        private string surname;
        public string Surname
        {
            get =&gt; surname;
            set =&gt; SetProperty(ref surname, value);
        }

        public User()
        {
            Name = "Luigi";
        }
    }
}

Window XAML:

<Window x:Class="BlogApp.MainWindow"
        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"
        xmlns:local="clr-namespace:BlogApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"/>
    <Window.DataContext>
        <local:User />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="15"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Name: " FontWeight="Bold"/>
        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Name}"/>

        <TextBlock Grid.Row="1" Grid.Column="3" Text="Test: " FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="4" Text="{Binding Name}"/>

        <TextBlock Grid.Row="2" Grid.Column="0" Text="Surname: " FontWeight="Bold"/>
        <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Surname}"/>

        <TextBlock Grid.Row="2" Grid.Column="3" Text="Test: " FontWeight="Bold"/>
        <TextBlock Grid.Row="2" Grid.Column="4" Text="{Binding Surname}"/>
    </Grid>
</Window>

This is very simple example. The Binding part is in the third last line (in bold).

This binding works due to the NotifyPropertyChanged process of the property “Name” of the ViewModel User.

How It Works:

When the application start, the MainWindow instanciate a new User class (View Model). During the initialization, the property Name is initialized with the name “Luigi”.

Now try to change the “Name” from Luigi to your name: you will see the name change in the TextBox, but not in the Test TexBlock on its right! Now move the focus on the “Surname” Textbox and… Here the Magic! The Test for the name changed to the new value! Wonderful! But… Why it changes only when the TextBox for the name looses focus? If we would chenge it “live”?

UpdateSourceTrigger

Now try to change the Xaml code for the Name Textbox like the follow:

<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"/>

Then start the app, go to the Name Textbox and start type something: you will see the test for the Name change in real time!

UpdateSourceTrigger is an attribute of the Binding that manage the moment in which the the ViewModel property is read, The possibilities are:

  • Default: in other words… the dafault value for the property. According to MSDN, it is “PropertyChanged” for most of properties and “LostFocus” for “TextBox.Text“.
  • Explicit: binded ViewModel property will be update only when you call UpdateSource() method.
  • LostFocus: binded ViewModel property is updated when the TextBox we are editing loose focus.
  • PropertyChanged: binded ViewModel property is updated every time the property is changed. In our example, every time we press a key, we change the Text of the text box.

 

Bibliography