Element to Element Binding

To help explain element to element binding in Silverlight, let's build a very simple application. The application will include a buttona a checkbox. When the checkbox is checked, the button is enabled, when the checkbox is unchecked. the button is disabled. Let's get started.

1. Create a silverlight application in VS 2010. Name the project ElementBinding and allow VS to create a Web application project to host your application.

2. Edit the mainPage.xmal file to add a StackPanel to the root Grid. Place a ToggleButton and CheckBOx named EnabledButton within that StackPanel so the ToggleButton appears above the CheckBox. Add a margin of 20 on the StackPanel and 2 on the ToggleButton and CheckBox to add some spacing between the controls. The Code for the page follows:

<Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Margin="20">
            <ToggleButton Margin="5" Content="Click to Toggle" />
            <CheckBox Margin="5" Content="Enable Button" IsChecked="True" />
        </StackPanel>
    </Grid>

3. Next, we need to bind the ToggleButton's IsEnabled property to the checkbox's IsChecked property. We will do this with one way binding as described earlier before, and we will set the ElementName to EnableButton, which is the name we gave our CheckBox. The updated source code should nwo look like the following:

4. That is it! No coding is required for this demo. Run the sample and will see that the ToggleButton is enabled.

5. Now uncheck the Enable Button Checkbox and you will see that the ToggleButton is no longer enabled.