Question

                <Button Margin="10,0,2,0" Width="90" Command="Open">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Content" Value="{Binding Source={StaticResource tstImage}}"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Content" Value="{Binding Source={StaticResource tstImage1}}"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Content" Value="{Binding Source={StaticResource tstImage2}}"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>

我想创建一个支持热图像的按钮：当鼠标悬停在按钮上时，图像会变为另一个图像。我用上面的代码实现了一个按钮实例。但实际上我想创建一个模板，每个按钮都可以使用这种风格。为每个按钮编写相同的样式很麻烦。

我认为应该：

    <Style TargetType="Button">
        <Setter Property="Content" Value="{Binding Source= normalImage"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Content" Value="{Binding Source=hotImage"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Content" Value="{Binding Source=disableImage"/>
            </Trigger>
        </Style.Triggers>
    </Style>

然后使用如下样式：

 <Button command="Open" normalImage="icon1.png" hotImage="icon2.png" disableImage="icon3.png"/>

我对WPF更新鲜，我已经尝试了很多方法来做到这一点，但仍然坚持这个问题。我想创建一个可以应用于每个按钮的模板或样式。第二个和第三个片段是我想要实现的。但它不起作用。在第二个片段中，normalImage，hotImage和disableImage是动态路径，可以通过按钮指定，就像我在第三个片段中所写的那样。请帮忙。感谢。

我正在尝试使用附加属性，但我遇到了另一个问题： Style binding attached-property didn't show up anything

Answer 1

我自己通过使用附属物来解决它。它可以帮助其他人，所以我发布了我的代码。

首先，创建附加属性：

class ImageAttached : DependencyObject
{
    public static Image GetNormalImage(DependencyObject obj)
    {
        return (Image)obj.GetValue(NormalImageProperty);
    }

    public static void SetNormalImage(DependencyObject obj, Image value)
    {
        obj.SetValue(NormalImageProperty, value);
    }

    // Using a DependencyProperty as the backing store for NormalImage.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty NormalImageProperty =
        DependencyProperty.RegisterAttached("NormalImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));

    public static Image GetHotImage(DependencyObject obj)
    {
        return (Image)obj.GetValue(HotImageProperty);
    }

    public static void SetHotImage(DependencyObject obj, Image value)
    {
        obj.SetValue(HotImageProperty, value);
    }

    // Using a DependencyProperty as the backing store for HotImage.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HotImageProperty =
        DependencyProperty.RegisterAttached("HotImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));


    public static Image GetDisableImage(DependencyObject obj)
    {
        return (Image)obj.GetValue(DisableImageProperty);
    }

    public static void SetDisableImage(DependencyObject obj, Image value)
    {
        obj.SetValue(DisableImageProperty, value);
    }

    // Using a DependencyProperty as the backing store for DisableImage.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DisableImageProperty =
        DependencyProperty.RegisterAttached("DisableImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
}

其次，为按钮创建样式目标：

     <Style x:Key="btnStyle" TargetType="{x:Type Button}">
        <Setter Property="Content" Value="{Binding Path=(local:ImageAttached.NormalImage), RelativeSource={RelativeSource Self}}"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Content" Value="{Binding Path=(local:ImageAttached.HotImage), RelativeSource={RelativeSource Self}}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Content" Value="{Binding Path=(local:ImageAttached.DisableImage), RelativeSource={RelativeSource Self}}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

最后，使用它。 e.g：

        <Button x:Name="btn1" Click="Button_Click_1" Width="100" Height="48" Style="{DynamicResource btnStyle}"
            local:ImageAttached.NormalImage="{StaticResource tstImage}"
            local:ImageAttached.HotImage="{StaticResource tstImage2}"
            local:ImageAttached.DisableImage="{StaticResource tstImage1}"/>

带有热图像的WPF按钮

1 个答案: