Why this example from Pro Silverlight 4 book doesnt work? - silverlight

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.

Answer 2

Both the Slider and the TextBlock are in the Grid in the same position (0,0). This means the TextBlock is being shown drawn directly on top of the Slider so any mouse events will always be captured by the TextBlock and not the Slider. This is implicitly implied as the TextBlock has the higher Z-Index by being defined second in the Grid. If you re-arrange the Grid and apply either Grid.Row="1" or Grid.Column="1" to the TextBlock so it is beside the Slider control you should be able to use the Slider successfully.