Question

我想为我的Wpf应用程序提供一个图像按钮。起初我很高兴我找到了这个答案（WPF Button with Image）。

但是，现在我想要制作一个样式/模板，所以我不需要一遍又一遍地写同样的东西。

我能得到的最接近的是这张照片：

Image showing the three buttons i got so far

问题是：我已经失去了背景（好像什么都没有！）。我已经尝试使用矩形返回背景，但是，按钮没有动画 - 没有鼠标悬停或点击不同的颜色。似乎通过使用模板我删除了所有...

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

到目前为止，这是我的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>

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

有一种简单的方法吗？到目前为止，我不想搞乱触发器，我发现的所有链接都试图教会如何制作一个完整的自定义按钮。

Answer 1

如果你想保留默认的Button模板并且只是在某种程度上装饰它的内容，那么你最好的选择是促进Button.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的值，因此绑定没有指定路径。

Answer 2

简单：使用ContentTemplate，它仅模仿Button的内容区域，而不是整个事物。 Button支持这一点，因为它继承自ContentControl。 WPF中具有Content属性的任何东西都支持完全相同的东西。

DataTemplate中的Content具有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>绑定即可。而且我冒昧地给图像一点点右边距，所以它不会碰到常规按钮内容。

<td class="network-cell">
 <center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>                      
</td>

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

2 个答案: