更改鼠標 hover 上的矩形背景

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" ，則觸發器將不起作用，因為依賴屬性值優先級）

Answer 2

將背景顏色更改為矩形漸變的方法：

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

Answer 3

我相信這個答案與您的答案很接近。 他們將背景設置為畫筆而不是圖像。 - 在 WPF 中更改動態創建按鈕的背景

Answer 4

您可以為IsMouseOver屬性添加兩個Triggers ：當它為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 5

最簡單的方法必須是這樣的（當心，沒有好的風格）：

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