Question

所以我有一个没有背景的矩形，当用户将鼠标悬停在它上面时，我想给它一个背景渐变，然后当鼠标离开矩形时移除渐变。

请有人发布此代码所需的代码，并告诉我将它放在.cs / xaml文件中的哪个位置？

感谢。

Answer 1

此：

<Rectangle Width="100" Height="100" StrokeThickness="1" Stroke="Black">
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill" Value="Transparent" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill">
                        <Setter.Value>
                            <!-- Change ImageSource to what image you want to use -->
                            <ImageBrush ImageSource="C:/Users/Public/1.png" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

（请注意，如果您在Rectangle本身上设置Fill="Transparent"，则触发器将不因为dependency property value precedence而工作

Answer 2

我相信这个答案很接近你的答案。他们将背景设置为画笔而不是图像。 - Changing dynamically created button's background in WPF

Answer 3

您可以为Triggers属性添加两个IsMouseOver：当它为true时（即鼠标位于矩形上方），此处我将背景更改为蓝色，否则为红色！

<Rectangle.Resources>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Blue"/>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="False">
        <Setter Property="Background" Value="Red"/>
    </Trigger>
</Rectangle.Resources>

Answer 4

最简单的方法必须是这样的（小心，没有好的风格）：

<Image>
    <Image.Style>
        <Style TargetType="Image">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Source" Value="myimage.png"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

Answer 5

将矩形的背景颜色更改为渐变的方法：

<Rectangle Width="128" Height="128" StrokeThickness="1" Stroke="Black">
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Red"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                                <GradientStop Color="#FF2824A0"/>
                                <GradientStop Color="#FF78B9DD" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter> 
                </Trigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

在鼠标悬停上更改矩形背景

5 个答案: