如何仅使用 xaml 获得悬停图像

Question

我想重构我只使用 XAML 所做的事情。我所拥有的正在工作，但它有代码在后面，如果可能的话我不希望它。

首先是我的 ViewModel class

    public class ViewModelCommandButton : ViewModelMenuItem
{
    public ViewModelCommandButton(ICommand cmd, string toolTip, string imageUrl, string hoverImageUrl, MenuData menuData)
        : base(cmd, menuData)
    {
        this.ToolTip = toolTip;
        this.ImageUrl = imageUrl;
        this.HoverImageUrl = hoverImageUrl;
    }
    public string ToolTip { get; private set; }
    public string ImageUrl { get; private set; }
    public string HoverImageUrl { get; private set; }
}

我的 XAML 看起来像这样。

    <UserControl.Resources>

    <Style x:Key="ImageHyperLink" TargetType="Hyperlink">
        <Setter Property="TextDecorations" Value="{x:Null}" />       
    </Style>

</UserControl.Resources>

和

    <Hyperlink x:Name="HyperLink" Command="{Binding ClickedCommand}" CommandParameter="{Binding }"  Style="{DynamicResource ImageHyperLink}">
    <Rectangle  Name="_button" Style="{DynamicResource RectangleButton}"
                  Grid.Column="1" 
                  MouseEnter="DoHover" MouseLeave="DoNormal"
                  Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="30" Height="25"                     
                  Fill="{DynamicResource Normal}" />


    <Hyperlink.Resources>
        <ImageBrush x:Key="Normal" ImageSource="{Binding ImageUrl}"></ImageBrush>
        <ImageBrush x:Key="Hover" ImageSource="{Binding HoverImageUrl}"></ImageBrush>            
    </Hyperlink.Resources>

</Hyperlink>

为了让它工作，我写了这个 "CodeBehind"

    public partial class ViewCommandButton : UserControl
{
    public ViewCommandButton()
    {
        InitializeComponent();
    }

    private void DoHover(object sender, MouseEventArgs e)
    {
        _button.Fill = (ImageBrush)HyperLink.Resources["Hover"];
    }

    private void DoNormal(object sender, MouseEventArgs e)
    {
        _button.Fill = (ImageBrush)HyperLink.Resources["Normal"];

    }
}

我尝试编写一种样式来为我做这件事，但没有成功。如果我针对宽度或高度而不是针对填充，则样式会正确触发。

我从一张图片开始，但认为这可能是个问题，所以采用了您在此处看到的方法。

我的风格是这样的。

    <Style x:Key="RectangleButton" TargetType="{x:Type Rectangle}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="{DynamicResource Hover}"  />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Fill" Value="{DynamicResource Normal}"  />
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 1

这应该可以工作，没有 ImageBrushes 作为资源：

<Rectangle ...>
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill">
                <Setter.Value>
                    <ImageBrush ImageSource="{Binding ImageUrl}"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill">
                        <Setter.Value>
                            <ImageBrush ImageSource="{Binding HoverImageUrl}"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

您可以将样式设为资源：

<UserControl.Resources>
    <Style TargetType="{x:Type Rectangle}" x:Key="RectangleButton">
        <Setter Property="Fill">
            <Setter.Value>
                <ImageBrush ImageSource="{Binding ImageUrl}"/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill">
                    <Setter.Value>
                        <ImageBrush ImageSource="{Binding HoverImageUrl}"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
...
<Rectangle ... Style="{StaticResource RectangleButton}"/>

如何仅使用 xaml 获得悬停图像

How to have a hover image only using xaml

c#

xaml

mvvm