Dot Net For All

WPF Data binding Modes with Examples

WPF Data binding Modes

In my previous article I have discussed about the data binding in WPF and how we can bind the data provided to the UI elements of WPF. In this article I will walk you through the data binding modes present in WPF with sample code examples.

Binding To Another Element

In my previous article I have used a CLR class as data source to bind the Data to Target which is TextBox Control. There can be chances in our project where we want to bind the data of a control to other control. In that case element binding is used as shown in the below code snippet

   <StackPanel Orientation="Vertical">
        <Slider Maximum="100" Minimum="0" x:Name="slider"/>
        <TextBox x:Name="tbValue" Text="{Binding ElementName=slider,Path=Value, UpdateSourceTrigger=PropertyChanged}" Width="100" Height="20"/>
    </StackPanel>

If we set some value in the TextBox the slider is automatically set to the value as shown in the figure below, as the default binding mode for the TextBox Text property is TwoWay which we can set while registering the dependency property.

Binding Modes

Though we can get the definition of the binding modes definition from msdn hereBut in this part of the article I will discuss all of these modes with the practical examples of each of them.

  1. One Way – This is the mode in which changes are propagated  only from source to target and not the other way round. One example I can state here is that suppose I have many comboboxes in my window and on click of reset button I want to reset the SelectedIndex of each of these comboboxes which I will do using a common property, but this property should not be updated on selection of any of the combobox , because if changed then it will change the SelectedIndex for all the combobox.
            <StackPanel>
                <ComboBox SelectedIndex="{Binding SelectedIndex,Mode=OneWay}" Width="100" Height="40" Margin="5"/>
                <ComboBox SelectedIndex="{Binding SelectedIndex,Mode=OneWay}" Width="100" Height="40" />
                <Button Margin="5" Width="100" Height="40"></Button>
            </StackPanel>
  2. One Way To Source – This is the mode in which source is updated with the data from the UI. One example which I can think of this scenario is the Login form where we need to send the data from the form to the model class.
  3. Two Way – This is the binding in which we the target and source will be changed on change of source property or target property as shown in the above example of binding to another element.
  4. Default – This is the binding mode which is specified while creating a dependency property . For example the binding mode for the Text property of the textbox control is Two Way. In the below code snippet I have created a MyProperty and set the Binding mode as Two way while registering
            public int MyProperty
            {
                get { return (int)GetValue(MyPropertyProperty); }
                set { SetValue(MyPropertyProperty, value); }
            }
    
            // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty MyPropertyProperty =
                DependencyProperty.Register("MyProperty", typeof(int), typeof(MainWindow), new FrameworkPropertyMetadata(0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
    
  5. One Time – This mode only updates the target only once when the application starts or the data context is changed. This mode is useful if we have some static data.

In this article I have discussed about the types of data binding in WPF and their use and utilization along with code examples.

Top career enhancing courses you can't miss

My Learning Resource

Excel your system design interview