Изменить фон прямоугольника при наведении мыши

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>

(Обратите внимание, что если вы установите 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

Вы можете добавить два 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

Мне кажется, этот ответ близок к вашему. Они устанавливают фон для кисти вместо изображения. - Изменение динамически создаваемого фона кнопки в WPF