Silverlight Toys - Silverlight 3 Tutorials

Element Data Binding

Element data binding allows you to bind element properties to each other. In previous versions of Silverlight, this would require more work on the code side because the element would fire its changed method and have that update the necessary elements. Silverlight 3 simplifies this process by performing the task directly in XAML.

In this tutorial, we will show you how to use element data binding for a variety of scenarios.

Element Binding

Element binding is performed in the same manner as Data Binding with one addition: the ElementName property. ElementName defines the name of the binding source element.

The following code snippet shows the basic syntax for element binding. The TextBlock is databound to element's Value property.

<TextBlock Text="{Binding ElementName=element, Path=Value}" />

Slider and TextBlock Scenario

The TextBlock control can maintain the value of the Slider control. This can be used to inform the user of the selected value. When the user moves the slider, the textblock is refreshed with its value.

<StackPanel Orientation="Horizontal" Margin="5">
    <Slider x:Name="slider1" Minimum="1" Maximum="100" Width="100" Margin="5" />
    <TextBlock Text="{Binding ElementName=slider1, Path=Value}" Width="100" Margin="5" />
</StackPanel>

Slider and TextBox Scenario

The TextBox and Slider controls can manipulate each other using TwoWay binding. This is useful when you want your users to have multiple ways to enter numerical data.

<StackPanel Orientation="Horizontal" Margin="5">
    <Slider x:Name="slider2" Minimum="1" Maximum="100" Width="100" Margin="5" />
    <TextBox Text="{Binding ElementName=slider2, Path=Value, Mode=TwoWay}" />
</StackPanel>

Sliders and Image Scenario

Slider controls can be used to manipulate a variety of element properties. The following examples demonstrate how a slider control can resize the image and manipulate its rotation.

<Grid HorizontalAlignment="Left" Margin="5">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Slider x:Name="slider3" Minimum="160" Maximum="640" Value="200" Width="100" 
    <Image Grid.Row="1" 
           Width="{Binding ElementName=slider3, Path=Value}" 
           Height="{Binding ElementName=slider3, Path=Value}" 
           Source="Autumn Leaves.jpg"  />
</Grid>

<Grid HorizontalAlignment="Left" Margin="5">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Slider x:Name="slider4" Minimum="0" Maximum="360" Width="100" 
            Value="{Binding RotationX, Mode=TwoWay, ElementName=projection}"  />
    <Image Grid.Row="1" Width="160" Height="120" Source="Autumn Leaves.jpg">
        <Image.Projection>
            <PlaneProjection x:Name="projection" />
        </Image.Projection>
    </Image>
</Grid>

Selection Scenario

Selection events are useful for element binding with the TextBlock control to display the currently selected item.

<StackPanel Margin="5" >
    <controls:Calendar x:Name="cal"  />
    <TextBlock 
        Text="{Binding ElementName=cal, Path=SelectedDate}" 
        Margin="5" HorizontalAlignment="Center" />
</StackPanel>

<StackPanel Margin="5" Width="150">
    <ComboBox x:Name="cb">
        <sys:String>Apple</sys:String>
        <sys:String>Banana</sys:String>
        <sys:String>Orange</sys:String>                
    </ComboBox>
    <TextBlock 
        Text="{Binding ElementName=cb, Path=SelectedItem}" 
        Margin="5" HorizontalAlignment="Center" />
</StackPanel>

<StackPanel Margin="5" Orientation="Horizontal">
    <ListBox x:Name="lb">
        <sys:String>Apple</sys:String>
        <sys:String>Banana</sys:String>
        <sys:String>Orange</sys:String>                
    </ListBox>
    <TextBlock Text="{Binding ElementName=lb, Path=SelectedItem}" Margin="5" />
</StackPanel>

Conclusion

Element Binding extends Silverlight's capabilities by providing advanced binding among XAML elements. The feature also reduces the amount of code required to connect the elements. As shown in this tutorial, there are several scenarios in which element binding can perform powerful binding in minimal XAML code.