主页 / coding / 问题 / 79065115
Accepted
Alex Wright
Asked: 2024-10-08 16:55:20 +0800 CST

如何让 Border 元素在鼠标进入其区域时触发悬停事件？

  • 772

我想在鼠标进入边框区域时制作悬停效果。我有以下 XAML 代码：

<Border CornerRadius="5"
        Width="190"
        Height="40"
        Margin="0,5,0,0">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="35" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0"
                   Text="تجهیزات"
                   FlowDirection="RightToLeft"
                   VerticalAlignment="Center"
                   Margin="0,0,10,0">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.FontFamily" Value="{StaticResource Vazir}"/>
                    <Setter Property="TextBlock.FontSize" Value="14"/>
                    <Setter Property="TextBlock.Foreground" Value="White"/>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <Viewbox Grid.Column="1" Width="25" Height="25" Stretch="Uniform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
            <Canvas Height="512" Width="512">
                <Path Fill="White" Data="M135.2 117.4L109.1 192l293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 144 0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L96 400l0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
            </Canvas>
        </Viewbox>
    </Grid>
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True" >
                    <Setter Property="Background" Value="White"  />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

问题是，鼠标进入文本和图像区域时会触发悬停效果，而不是整个 Border 元素区域。我该如何修复这个问题？

wpf

1 个回答

  1. Best Answer

    UIElements 仅在实际绘制的区域接收鼠标事件，例如具有非空的Background、Foreground或Brush 的区域。FillStroke

    因此添加默认背景，例如透明：

    <Border.Style>
    <Style TargetType="Border">
        <Setter Property="Background" Value="Transparent" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True" >
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Border.Style>

    请注意，您不能直接Background="Transparent"在 Border 元素上设置，因为这样的分配比 Style Setter 中的分配具有更高的优先级，因此会使 Trigger 无效。

    • 2

相关问题