Question

I am reading a Pro Silverlight 4 book (http://my.safaribooksonline.com/book/programming/csharp/9781430229797/xaml/element-to-element_binding), and I do all examples from the book. But an example from the binding chapter doesnt work for me. The slider doesnt move after I compile and run the application:

<UserControl
x:Class="SilverlightApplication14.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid
    x:Name="LayoutRoot"
    Background="White">
    <Slider
        x:Name="sliderFontSize"
        Margin="3"
        Minimum="1"
        Maximum="40"
        Value="10"></Slider>
    <TextBlock
        Margin="10"
        Text="Simple Text"
        x:Name="lblSampleText"
        FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
</Grid>

Answer 1

Dave S, is absolutely correct. You can see the Z-Index problem reversing the order of the controls (so the TextBlock is before the Slider)- it will then work because the slider will be on top of the TextBlock:

<Grid 
x:Name="LayoutRoot" 
Background="White">
    <TextBlock 
    Margin="10" 
    Text="Simple Text" 
    x:Name="lblSampleText" 
    FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
    <Slider 
    x:Name="sliderFontSize" 
    Margin="3" 
    Minimum="1" 
    Maximum="40" 
    Value="10"></Slider>
</Grid>

You can see here that Z-Index is determined by the order of controls in the XAML.

An alternate way round this (or to demonstrate) is to specify the Z-Index attached property explicitly:

<Grid 
x:Name="LayoutRoot" 
Background="White">
    <Slider 
    x:Name="sliderFontSize" 
    Margin="3" 
    Minimum="1" 
    Maximum="40" 
    Value="10" Canvas.ZIndex="1"></Slider>
    <TextBlock 
    Margin="10" 
    Text="Simple Text" 
    x:Name="lblSampleText" 
    FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
</Grid>

The best way to fix this is to simply make sure that the elements don’t overlap each other, by putting them in different rows:

<Grid 
x:Name="LayoutRoot" 
Background="White">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Slider Grid.Row="1" 
    x:Name="sliderFontSize" 
    Margin="3" 
    Minimum="1" 
    Maximum="40" 
    Value="10"></Slider>
    <TextBlock
    Margin="10" 
    Text="Simple Text" 
    x:Name="lblSampleText" 
    FontSize="{Binding ElementName=sliderFontSize, Path=Value}"></TextBlock>
</Grid>

In this sample, the TextBlock is in row 0 and the slider is in row 1, so they no longer overlap.