将鼠标悬停在标签上更改矩形背景渐变

发布于 2024-11-11 04:21:05 字数 1232 浏览 0 评论 0原文

我有一个矩形，上面有几个标签和图像，这样当用户将鼠标悬停在矩形上时，背景就会变成渐变：

<Rectangle Height="88" HorizontalAlignment="Left" Margin="54,28,0,0" Name="rectangle2" VerticalAlignment="Top"
        Width="327" Cursor="Hand">
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill" Value="Transparent" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="#eee" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

但是，当我将鼠标悬停在矩形上方的标签之一上时，背景渐变不显示。

我想让它在将鼠标悬停在标签和矩形上时显示渐变。

这可能吗？

原文

I have a rectange with several labels and images over it, and I have it so that when the user hovers their mouse over the rectangle the background changes to a gradient:

<Rectangle Height="88" HorizontalAlignment="Left" Margin="54,28,0,0" Name="rectangle2" VerticalAlignment="Top"
        Width="327" Cursor="Hand">
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill" Value="Transparent" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="#eee" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

However, when I hover over one of the labels that is over the rectangle the background gradient does not show.

I want to make it so that the gradient shows when hovering over the labels as well as the rectangle.

Is this possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羅雙樹 2024-11-18 04:21:05

如果“over”你的意思是覆盖而不是在上面，你可以将内容包装在网格中（对于上面你也可以这样做，我猜，但你应该定义行和列）并使用 DataTrigger，当鼠标位于环绕网格上方时触发不仅是矩形本身，例如：

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Rectangle Width="100" Height="100" StrokeThickness="1" Stroke="Black">
        <Rectangle.Style>
            <Style TargetType="{x:Type Rectangle}">
                <Setter Property="Fill" Value="Transparent" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Grid}}" Value="True">
                        <Setter Property="Fill">
                            <Setter.Value>
                                <!-- Brush here -->
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
    <Label Name="label" Content="This is a Label" />
</Grid>

或者，如果标签被覆盖，您可以通过将 IsHitTestVisible 设置为 false 来使鼠标事件通过标签。

If by "over" you mean overlayed and not above you can wrap the contents in a Grid (for above you could do this as well i guess, but you should define rows & columns) and use a DataTrigger which triggers if the mouse is over the wrapping grid and not only the rectangle itself, e.g.:

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Rectangle Width="100" Height="100" StrokeThickness="1" Stroke="Black">
        <Rectangle.Style>
            <Style TargetType="{x:Type Rectangle}">
                <Setter Property="Fill" Value="Transparent" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Grid}}" Value="True">
                        <Setter Property="Fill">
                            <Setter.Value>
                                <!-- Brush here -->
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
    <Label Name="label" Content="This is a Label" />
</Grid>

Alternatively if the label is overlayed you can make mouse events pass through the Label by setting IsHitTestVisible to false.

回复收藏 0 原文