Почему этот пример из книги Pro Silverlight 4 не работает?

Question

Я читаю книгу Pro Silverlight 4 (http://my.safaribooksonline.com/book/programming/csharp/9781430229797/xaml/element-to-element_binding),, и я делаю все примеры из книги. Но пример из обязательной главы не работает для меня. Ползунок не перемещается после того, как я скомпилирую и запускаю приложение:

<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, абсолютно правильно.Вы можете видеть проблему с Z-индексом, меняющую порядок элементов управления (поэтому TextBlock находится перед ползунком) - тогда он будет работать, потому что ползунок будет сверху 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>

см. здесь, что Z-индекс определяется порядком элементов управления в XAML.

Альтернативный способ обойти это (или продемонстрировать) - явно указать присоединенное свойство Z-Index :

<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>

Лучший способ исправить это - просто убедиться, что элементы не перекрывают друг друга, поместив их в разные строки:

<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>

В этом примереTextBlock находится в строке 0, а ползунок в строке 1, поэтому они больше не перекрываются.

Answer 2

Ползунок и текстовый блок находятся в сетке в одинаковом положении (0,0).Это означает, что TextBlock отображается нарисованным прямо сверху Slider, поэтому любые события мыши всегда будут захватываться TextBlock, а не Slider.Это подразумевается, поскольку TextBlock имеет более высокий Z-индекс, будучи определенным вторым в Grid.Если вы измените расположение сетки и примените либо Grid.Row="1", либо Grid.Column="1" к текстовому блоку, чтобы он находился рядом с элементом управления Slider, вы сможете успешно использовать Slider.