Saturday, February 5, 2011

What is Data Binding in WPF? how is it used?

In Windows Forms, developer creates the UI and updates the UI elements’ content and states based on the certain conditions. For example, in the designer we create a textbox  and write a logic to update the content of the textbox.

image

For the button1 and button2 Click event; we write a call  back function.

private void button1_Click(object sender, EventArgs e)
        {
            textBox1.Text = "User Uday";
        }

        private void button2_Click(object sender, EventArgs e)
        {
            textBox1.Text = "User Kiran";
        }

Now, when we click button1; textbox1 changes to “User Uday” and “User Kiran”.

In a real world situation, we have to execute the code

textBox1.Text = "User ****";

when the a user is selected from a huge list. Imagine 50 such textboxes and 100 labels and update logic in the code behind. so many lines of code, isn't it?


WPF allows data binding where the textbox1 keeps monitoring on a particular variable/string. Whenever the value of the variable/string updates; the textbox1.Text also updates. Now, wouldn’t that be nice that all the elements in the UI update keeps monitoring(binding) on a set of variables?

Here is an example. draw textBox using designer. Click here to download the sample applicatiion.

image

Write the data binding for the text property to the Windows width property in xaml,

<Window x:Name="window" x:Class="SampleTextBoxBinding.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Sample TextBox Binding" Height="188" Width="273">
    <Grid>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="62,65,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Width, ElementName=window}" />
    </Grid>
</Window>

Now, if the increase the window size the value updates during runtime;

SNAGHTML2a3294

GREAT!

Now, how cam I do this functionality to make an application? Click here for sample application

SNAGHTML6c0178

Below is the code for it.

<Window x:Class="SalutaionName.MainWindow"
        xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="DataBinding Example" Height="256.4" Width="633.8">
    <Grid>
        <CheckBox x:Name="checkBox" Content="Salutation" HorizontalAlignment="Left" Margin="13.4,46.6,0,0" VerticalAlignment="Top" FontFamily="Times New Roman" FontSize="16"/>
        <CheckBox x:Name="checkBox1" Content="First Name" HorizontalAlignment="Left" Margin="13.4,78.6,0,0" VerticalAlignment="Top" FontFamily="Times New Roman" FontSize="16"/>
        <CheckBox x:Name="checkBox2" Content="Last Name" HorizontalAlignment="Left" Margin="13.4,110.6,0,0" VerticalAlignment="Top" FontFamily="Times New Roman" FontSize="16"/>
        <TextBox x:Name="textBox" Margin="115.8,78.6,8,0" TextWrapping="Wrap" VerticalAlignment="Top" IsEnabled="{Binding IsChecked, ElementName=checkBox1}" FontFamily="Times New Roman" FontSize="16" Text="FName"/>
        <TextBox x:Name="textBox1" Margin="115.8,107.6,8,0" TextWrapping="Wrap" VerticalAlignment="Top" IsEnabled="{Binding IsChecked, ElementName=checkBox2}" FontFamily="Times New Roman" FontSize="16" Text="LName"/>
        <ComboBox x:Name="comboBox" Margin="115.8,46.6,8,0" VerticalAlignment="Top" IsEnabled="{Binding IsChecked, ElementName=checkBox}" FontFamily="Times New Roman" FontSize="16" SelectedIndex="0">
            <sys:String>Mr</sys:String>
            <sys:String>Dr</sys:String>
            <sys:String>Majesty</sys:String>
            <sys:String>Highness</sys:String>           
        </ComboBox>
        <TextBlock Margin="13.4,157,8,8" TextWrapping="Wrap" FontFamily="Times New Roman" FontSize="16">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}{0}. {1} {2}">
                  <Binding ElementName="comboBox" Path="SelectedValue" Mode="OneWay"/>
                <Binding ElementName="textBox" Path="Text" Mode="OneWay"/>
                <Binding ElementName="textBox1" Path="Text" Mode="OneWay"/>
    </MultiBinding>
  </TextBlock.Text>
        
        </TextBlock>
       
    </Grid>
</Window>

No comments: