Изменение стиля внешней границы мыши

У меня есть 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 не может быть установлено в Style Setter.

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

ОТВЕТЫ

Ответ 1

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

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

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

  • Что касается теста попадания на сетку: поместите прозрачную рамку за сеткой, чтобы 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>

Ответ 2

Установите триггеры непосредственно на объект Border. Кроме того, не устанавливайте 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>

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

Ответ 3

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

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

Ответ 4

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

  • Снимите прозрачную кисть. Кажется, он сочетается с цветной кистью, не позволяя вам видеть границу.
  • У вас есть триггер непосредственно на самой границе.

  • Если вы хотите использовать триггер только в сетке, вы можете использовать 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>