Control to Control Binding in WPF/Silverlight
- by psheriff
In the past if you had two controls that you needed to work together, you would have to write code. For example, if you want a label control to display any text a user typed into a text box you would write code to do that. If you want turn off a set of controls when a user checks a check box, you would also have to write code. However, with XAML, these operations become very easy to do.
Bind Text Box to Text Block
As a basic example of this functionality, let’s bind a TextBlock control to a TextBox. When the user types into a TextBox the value typed in will show up in the TextBlock control as well.
To try this out, create a new Silverlight or WPF application in Visual Studio. On the main window or user control type in the following XAML.
<StackPanel> <TextBox Margin="10" x:Name="txtData" /> <TextBlock Margin="10" Text="{Binding ElementName=txtData, Path=Text}" /></StackPanel>
Now run the application and type into the TextBox control. As you type you will see the data you type also appear in the TextBlock control. The {Binding} markup extension is responsible for this behavior. You set the ElementName attribute of the Binding markup to the name of the control that you wish to bind to. You then set the Path attribute to the name of the property of that control you wish to bind to. That’s all there is to it!
Bind the IsEnabled Property
Now let’s apply this concept to something that you might use in a business application. Consider the following two screen shots. The idea is that if the Add Benefits check box is un-checked, then the IsEnabled property of the three “Benefits” check boxes will be set to false (Figure 1). If the Add Benefits check box is checked, then the IsEnabled property of the “Benefits” check boxes will be set to true (Figure 2).
Figure 1: Uncheck Add Benefits and the Benefits will be disabled.
Figure 2: Check Add Benefits and the Benefits will be enabled.
To accomplish this, you would write XAML to bind to each of the check boxes in the “Benefits To Add” section to the check box named chkBenefits. Below is a fragment of the XAML code that would be used.
<CheckBox x:Name="chkBenefits" />
<CheckBox Content="401k" IsEnabled="{Binding ElementName=chkBenefits, Path=IsChecked}" />
Since the IsEnabled property is a boolean type and the IsChecked property is also a boolean type, you can bind these two together. If they were different types, or if you needed them to set the IsEnabled property to the inverse of the IsChecked property then you would need to use a ValueConverter class.
SummaryOnce you understand the basics of data binding in XAML, you can eliminate a lot code. Connecting controls together is as easy as just setting the ElementName and Path properties of the Binding markup extension.
NOTE: You can download the complete sample code at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "SL – Basic Control Binding" from the drop-down.
Good Luck with your Coding,Paul Sheriff
** SPECIAL OFFER FOR MY BLOG READERS **Visit http://www.pdsa.com/Event/Blog for a free eBook on "Fundamentals of N-Tier".
