Silverlight DataBinding with Visual Studio 2010 IDE

I discussed Silverlight Databinding in the blog Silverlight 3 / WPF Databinding. There I tweaked the raw XAML for enabling DataBinding.

The Binding class is used to define a connection between a CLR Object and an User Interface Component. The three elements of binding are Source, Binding Mode and the Target. Source is the CLR Object and Target is the Dependency Property.

Visual Studio 2010 have support for Silverlight DataBinding in the IDE.

As in the previous example here too I am placing a Slider Control with Maximum 100 and a TextBox.

In the properties window there is an Advanced Option icon next the Text in the Text Property.


















Clicking the icon another list will appear. Select Apply Data Binding.


















First you can select the ElementName ie. slider1.











Then select the Path. In our case it is the Value.













This action will automtically generate the Binding Syntax.

Related Blogs

Silverlight 3, WPF Positioning with ZIndex

Silverlight 3/Wpf : Adding Controls Dynamicallys

Silverlight 3/WPF Templates

 

Silverlight 3 / WPF Databinding

WPF Databinding

Using Silverlight 3 / WPF Databinding any property can be bound to any other property of source using declarative syntax thereby reduce coding drastically.

Here I am binding the Text Property of TextBox to the Value property of Slider.

ElementName property is used to specify the element to use as binding source.

Path is used to specify the source property of binding source.

 <Slider x:Name="slider1" HorizontalAlignment="Left" Height="70" Margin="163,96,0,0" VerticalAlignment="Top" Width="256"/>  
 <TextBox x:Name="textBox"  
      Text="{Binding ElementName=slider1, Path=Value}"  
      HorizontalAlignment="Left" Height="54" Margin="179,225,0,0" TextWrapping="Wrap"   
      VerticalAlignment="Top" Width="185"/>  

Two way Databinding
In the previous example what we saw was One way databinding, ie. as you scroll the slider the value property is reflected in the textbox. But the user can't type a value into textbox and expect the value of slider to get updated.
This is possible by setting the Mode to TwoWay.

Mode=TwoWay.




For Silverlight 3 use TextBlock control instead of TextBox.

We can bind to any Dependency property in the like manner

<Button 
    Margin="5" Content="Click to Toggle" 
    IsEnabled="{Binding IsChecked, Mode=OneWay, 
    ElementName=EnableButton}" />
<CheckBox 
    x:Name="EnableButton" IsChecked="true" 
    Margin="5" Content="Enable Button" />

In this code we are binding the IsEnabled property of Button to the IsChecked propety of CheckBox.

ItemSource Binding
Lets see how to fill a ComboBox with the Font Names and on selecting an item from  the ComboBox the Label's Font is changed.

<ComboBox x:Name="comboBox" HorizontalAlignment="Left" VerticalAlignment="Top" Width="259" Margin="102,59,0,0" Height="29"
                  ItemsSource="{x:Static Fonts.SystemFontFamilies}" />
<Label Content="Shalvin P D" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="3.931,6.865" Margin="102,139,0,0" FontFamily="{Binding SelectedItem, ElementName=comboBox}"/>

Binding to a Class

It is possible to bind a control's property to a property of a class. I am going to create a class with a boolean property which denotes the enabled property. Based on the value of the property we are going to set the Enabled property of the class.

class EnabledCheck
{
   public bool IsButtonEnabled { get; set; }
   public EnabledCheck()
   {
      IsButtonEnabled = true;
   }
}

<Window x:Class="WpfDataBindingEg.ButtonClass"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfDataBindingEg"
        Title="ButtonClass" Height="300" Width="300">
    <Window.Resources>
        <local:EnabledCheck x:Key="ButtonState"/>
    </Window.Resources>
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="58,67,0,0" IsEnabled="{Binding IsButtonEnabled, Source={StaticResource ButtonState}}"/>

    </Grid>
</Window>

Related blogs
Silverlight 3, WPF Positioning with ZIndex
Silverlight 3/Wpf : Adding Controls Dynamicallys
Silverlight 3/WPF Templates