WPF:图像按钮的可重用模板?

时间:2013-08-28 07:30:45

标签: c# wpf button

我的WPF项目使用了很多图像按钮,但由于我还没有找到正确的方法(我每次都必须编写相同的触发器和样式,只有区别是图像源),我的资源字典变得很无聊。有没有更好的方法呢?

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

<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>

谢谢:)

3 个答案:

答案 0 :(得分:10)

最简单的方法是使用Image属性创建特定控件:

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属性,而不是显式设置图像:

<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>

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

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

如果需要更多图像用于按钮的不同状态,则可以向控件添加更多依赖项属性。

另一种可能的方法是使用我称之为“参数化样式”的方法,以避免创建特定的控件;有关详细信息,请参阅this blog post

答案 1 :(得分:1)

您可以尝试创建一个继承自Button的自定义控件,并将其用作模板中的TargetType。然后,您可以在图像源中使用TemplateBinding。

<Image Source="{TemplateBinding ImageSource}" Stretch="Fill"/>

您需要在自定义控件中创建ImageSource属性。 这样您就可以在xaml中设置源代码,但只需要一个资源模板。

答案 2 :(得分:0)

您可以像这样使用BasedOn属性:

<Style x:Key="BlueHighlightedButtonStyle"  BasedOn="{StaticResource ButtonStyle}" TargetType="Button">
    <Setter Property="Background" Value="DeepSkyBlue"/>
</Style>

这将使Button Style具有与ButtonStyle相同的属性,但具有DeepSkyBlue背景。