Изменить стиль окружающей границы при наведении мыши - PullRequest
Новая
       12

Изменить стиль окружающей границы при наведении мыши

13 голосов
/ 27 января 2010

У меня есть Grid с Border вокруг. При наведении указателя мыши на Grid я хочу изменить стиль на Border. Как бы я поступил так? Вот что я пробовал, но пока безуспешно: 

<Border Name="Border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2">
    <Grid>
        <Grid.Style>
            <Style TargetType="{x:Type Grid}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="#FFB9D7FC" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        ...
    </Grid>
</Border>

При попытке построить этот XAML я получаю сообщение об ошибке

Свойство TargetName не может быть установлено в установщике стилей.

но я не могу придумать другого способа сделать это. Помощь будет высоко ценится. Использование какого-либо кода позади исключено.

Ответы [ 4 ]

14 голосов
/ 27 января 2010

Вам нужно сделать следующее:

  1. Удалите BorderBrush из определения границы. Триггеры могут перезаписывать свойства, установленные установщиками в стилях, но не свойства, заданные непосредственно внутри тега.

  2. Поместите триггер в границу, а не в сетку (см. Примеры, которые предоставили другие).

  3. Относительно теста на попадание в сетке: поместите прозрачную рамку за сеткой, чтобы MouseOver всегда захватывался:

Пример кода для пункта 3: 

<Grid>
    <Rectangle Fill="Transparent" /><!-- make sure that the mouse is always over "something" --> 
    <Grid Name="myGrid">       
        <Grid.ColumnDefinitions> 
            <ColumnDefinition /> 
            <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Name="myText">sadasdsa</TextBlock> 
    </Grid> 
</Grid>
10 голосов
/ 27 января 2010

Установите триггеры непосредственно на объекте Граница. Кроме того, не устанавливайте BorderBrush для объекта Border, но также устанавливайте его с помощью триггера: 

    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Border.BorderBrush" Value="Yellow" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Border.BorderBrush" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>

Кроме того, если у вас возникли проблемы с просмотром, что означают триггеры, посмотрите, как отлаживать триггеры здесь Может быть очень полезным.
Надеюсь, это поможет.

1 голос
/ 27 января 2010

Как насчет этого? 

    <Border BorderThickness="1" CornerRadius="2">
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Setter Property="BorderBrush" Value="Transparent" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" Value="#FFB9D7FC" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>

        <Grid Background="Transparent">

            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <TextBlock Name="myText">sadasdsa</TextBlock>
        </Grid>

    </Border>
0 голосов
/ 27 января 2010

Черт, это было сложно.

  1. Опустите прозрачную границу кисти. Кажется, он сочетается с цветной кистью, не давая вам увидеть границу.
  2. У вас может быть триггер прямо на самой границе.

  3. Если вы хотите, чтобы триггер был только на сетке, вы можете использовать PyBinding для привязки к правильному элементу управления. (Я не знаю, как это сделать без PyBinding.) 

    <Border Name="myBorder" Margin="4"  BorderThickness="4" CornerRadius="2">
    <Border.Style>
                <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                 <!-- option 1 -->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="#FFB9D7FC" />
                </Trigger>
                 <!-- option 2 -->
                    <DataTrigger Binding="{p:PyBinding $[myBorder.IsMouseOver]}" Value="True">
                    <Setter Property="BorderBrush" Value="#FFB9D7FC" />
                </DataTrigger>
            </Style.Triggers>
            </Style>
    </Border.Style>
    <Grid Name="myGrid">      
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Name="myText">sadasdsa</TextBlock>
    </Grid>
</Border>
...