在鼠标悬停时更改周围边框的样式答案

【问题标题】：Change style of surrounding border on mouse over在鼠标悬停时更改周围边框的样式
【发布时间】：2010-01-27 09:28:27
【问题描述】：

我有一个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 属性。

但我想不出任何其他方法来做到这一点。帮助将不胜感激。使用任何代码隐藏都是不可能的。

【问题讨论】：

标签： .net wpf xaml styles mouseevent

【解决方案1】：

您需要执行以下操作：

从边框定义中移除 BorderBrush。触发器可以覆盖样式中设置器设置的属性，但不能覆盖直接在标签中设置的属性。
将触发器放入边框而不是网格（参见其他人提供的示例）。
关于 Grid 上的命中测试：在网格后面放置一个透明框，以便始终捕获 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 对象上设置触发器。另外，不要在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>

另外，如果您在查看触发器的功能时遇到问题，请查看如何调试触发器 here。可能会很有帮助。
希望这会有所帮助。

【讨论】：

【解决方案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>

【讨论】：