带图像的Wpf按钮-使用样式/模板

我想为我的Wpf应用程序有一个图像按钮。起初，我对我找到的这个答案很满意（）

然而，现在我想用它制作一个样式/模板，所以我不需要一遍又一遍地写同样的东西

我能得到的最接近的图像是：

问题是：我失去了背景（好像什么都没有！）。我已经试着用一个矩形恢复背景，但是，按钮没有动画-没有鼠标悬停或单击不同的颜色。好像是用了一个模版我把它都抹掉了

那不是我想要的我只想设置一个模板，并拥有所有默认颜色/动画

这是到目前为止我的XAML：

<Style x:Key="btnSave" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="100"></Setter>
    <Setter Property="Height" Value="25"></Setter>
    <Setter Property="Margin" Value="5"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Resources/save.png"></Image>

                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想要的只是将其用作：

<Button Style="{StaticResource btnSave}">Save File</Button>

保存文件

并且有一个带有图像和默认颜色/动画的按钮

---

有没有一个简单的方法可以做到这一点？到目前为止，我不想弄乱触发器，我找到的所有关于它的链接都试图教你如何制作一个完全定制的按钮。

简单：使用

ContentTemplate

，它只模板化

按钮的内容区域，而不是整个内容<代码>按钮

支持此功能，因为它继承自

ContentControl

。WPF中几乎所有具有

Content

属性的内容都将支持完全相同的内容

其中的

DataTemplate

为其

DataContext

具有控件的

Content

属性，因此只需使用

{Binding}

即可绑定

内容。我还冒昧地给了这张图片一点右边距，这样它就不会与常规的按钮内容产生摩擦

<Style x:Key="btnSave" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="100"></Setter>
    <Setter Property="Height" Value="25"></Setter>
    <Setter Property="Margin" Value="5"></Setter>
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image 
                        VerticalAlignment="Center" 
                        Source="/Resources/save.png"
                        Margin="0,0,8,0"
                        />

                    <ContentControl
                        Content="{Binding}"
                        VerticalAlignment="Center"
                        />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果您希望保留默认的
按钮
模板，并且只在某种程度上装饰它的内容，最好的办法是简化
按钮.ContentTemplate
属性。由于它是一个依赖属性，因此可以设置样式/绑定/等等。以下是在您的案例中它的外观：

<Style x:Key="btnSave" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="100"></Setter>
    <Setter Property="Height" Value="25"></Setter>
    <Setter Property="Margin" Value="5"></Setter>
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Resources/save.png"></Image>
                    <ContentPresenter Content="{Binding}"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>



唯一的区别是使用
DataTemplate
而不是
ControlTemplate
，并且需要在模板内绑定
ContentPresenter.Content
属性。请注意，在本例中，我们将对象模板化为
Button.Content
的值，因此绑定没有指定路径。
正是我想要的。我想知道为什么我以前从未发现过ContentTemplate，它似乎如此明显。我能问你怎么知道的吗？我是WPF的新手，想做更多的研究edt：我会接受ed的回答，因为你们的回答都一样正确，但他在3分钟前就这么做了。。。我有点抱歉，我不能接受也不能支持这两个问题。@diego.dona当我面临问题时，我通常会学到一些东西——无论是在工作中，还是当我发现一个问题，所以我不知道答案（并且很想知道）。然后我从MSDN文档开始，然后搜索类似的问题。如果失败了，那么我会回到谷歌和/或简单的尝试和错误方法来处理代码。