当鼠标悬停在周围边框上时更改样式

Question

我有一个周围带有边框的网格。当鼠标悬停在网格上时，我希望更改边框的样式。我应该如何进行操作？这是我尝试过的，但目前还没有成功：

<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属性。

但是我想不到其他方法来解决这个问题。非常感谢任何帮助。不考虑使用任何代码后台。

- Alex

Answer 1

您需要按照以下步骤操作：

1. 从边框定义中删除BorderBrush。触发器可以覆盖在样式中设置的Setter属性，但不能覆盖直接在标记中设置的属性。

2. 将触发器放入Border中而不是Grid中（请参见其他人提供的示例）。

3. 关于Grid上的命中测试：在Grid后面放置一个透明框，以便始终捕获MouseOver：

第三点的代码示例：

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

- Heinzi

Answer 2

直接在 Border 对象上设置触发器。另外，不要在 Border 对象上设置 BorderBrush，而是使用触发器设置它:

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

此外，如果你无法看清触发器的作用，请查看如何使用触发器进行调试这里。可能非常有帮助。
希望这可以帮到你。

- RoelF

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

- paolot

Answer 4

该死，那真是棘手的。

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>
   

- Jonathan Allen