Question

我周围有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属性。

但我想不出有任何其他方法可以做到这一点。非常感谢帮助。使用任何代码隐藏是不可能的。

Answer 1

您需要执行以下操作：

从Border定义中删除BorderBrush。触发器可以覆盖样式中setter设置的属性，但不能覆盖标记中直接设置的属性。
将Trigger放入Border而不是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>

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>

此外，如果您无法查看触发器的功能，请查看如何调试触发器here。非常有帮助。
希望这会有所帮助。

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>

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

更改鼠标上的周围边框样式

4 个答案: