代码之家 › 专栏 › 技术社区 › Alex

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

mouseevent styles xaml wpf .net

Alex · 技术社区 · 16 年前

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

Heinzi 16 年前

您需要执行以下操作:

从边界定义中删除边界笔刷。触发器可以覆盖样式中setter设置的属性,但不能覆盖直接在标记中设置的属性。
将触发器放在边框中,而不是网格中(参见其他人提供的示例)。

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

RoelF 16 年前

    <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
希望这有帮助。

paolot 16 年前

这个怎么样?

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

Jonathan Allen 16 年前

妈的,那太狡猾了。

放下透明边框笔刷。它似乎与彩色画笔结合在一起,使你看不到边界。
您可以将触发器直接置于边框上。

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