WPF:图像按钮的可重用模板? [英] WPF : Re-usable template for image buttons?

问题描述

我的WPF项目使用了很多图片按钮，但是由于我还没有找到合适的方法(我每次都要写相同的触发器和样式，唯一不同的是图片来源)，我的资源字典变得非常渴望一无所有.有没有更好的方法来做到这一点?

My WPF project uses a lot of image buttons, but since I haven't found a way to do it properly (I have to write the same triggers and style each time, only difference is the image source), my resource dictionary became very long for nothing. Is there a better way of doing this?

这是我用于按钮的样式示例:

Here's a sample of the style I'm using for my buttons :

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <!-- Some setters -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Image Source="Images.png" Stretch="Fill"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- Some triggers ( IsFocused, IsMouseOver, etc.) -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

谢谢:)

推荐答案

最简单的方法是创建一个带有 Image 属性的特定控件:

The easiest way is to create a specific control with an Image property:

public class ImageButton : Button
{
    static ImageButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof (ImageButton),
            new FrameworkPropertyMetadata(typeof (ImageButton)));
    }


    public ImageSource Image
    {
        get { return (ImageSource)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(default(ImageSource)));

}

然后你只需在 generic.xaml 中为它创建一个样式，并绑定到 Image 属性而不是显式设置图像:

Then you just create a style for it in generic.xaml, and bind to the Image property instead of setting the image explicitly:

<Style x:Key="{x:Type my:ImageButton}" TargetType="{x:Type my:ImageButton}">
    <!-- Some setters -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type my:ImageButton}">
                <Grid>
                    <Image Source="{TemplateBinding Image}" Stretch="Fill"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- Some triggers ( IsFocused, IsMouseOver, etc.) -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后你可以像这样使用它:

Then you can just use it like this:

<my:ImageButton Image="Image.png" />

如果按钮的不同状态需要更多的图片，可以给控件添加更多的依赖属性.

If you need more images for different states of the button, you can add more dependency properties to the control.

另一种可能的方法是使用我所谓的参数化样式"，以避免创建特定控件；请参阅这篇博文 了解详情.

Another possible approach is to use what I call a "parameterized style", to avoid creating a specific control; see this blog post for details.

这篇关于WPF:图像按钮的可重用模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！