Question

我想重新考虑我仅使用XAML所做的事情。我所拥有的是工作，但它背后有代码，如果可能，我更愿意这样做。

首先是我的ViewModel类

    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创建悬停图像

1 个答案: