使用图像+文本样式化 WPF 按钮答案

【问题标题】：Styling a WPF Button with Image+Text使用图像+文本样式化 WPF 按钮
【发布时间】：2013-04-03 11:53:17
【问题描述】：

在我的 C#/WPF/.NET 4.5 应用程序中，我有带有图像的按钮，这些按钮是按以下方式实现的：

<Button Style="{StaticResource BigButton}">
  <StackPanel>
    <Image Source="Images/Buttons/bt_big_save.png" />
    <TextBlock>save</TextBlock>
  </StackPanel>
</Button>

我有一个资源字典 UIStyles.xaml，我在其中声明了以下内容：

<Style TargetType="Button" x:Key="BigButton">
  <Setter Property="Cursor" Value="Hand" />
  <Setter Property="Height" Value="80" />
  <Setter Property="Width" Value="80" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border x:Name="border" 
            CornerRadius="5" 
            Background="#FF415360">
          <ContentPresenter x:Name="ButtonContentPresenter"
              VerticalAlignment="Center"  
              HorizontalAlignment="Center">
            <ContentPresenter.Resources>
              <Style TargetType="TextBlock">
                <Setter Property="TextAlignment" Value="Center" />
              </Style>
              <Style TargetType="Image">
                <Setter Property="Width" Value="10" />
                <Setter Property="Margin" Value="10" />
              </Style>
            </ContentPresenter.Resources>
          </ContentPresenter>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

光标、高度、边框等属性工作正常，但我无法设置TextBlock 和Image 的样式。

具体来说，需要如下所示：

最终看起来像这样（忽略色差）：

我见过similar questions 之前问过，但解决方案使用了不同的方法（我不想创建自定义用户控件，除了这个之外我的所有需求都包含在当前代码中，并且重写将是麻烦）。我只需要修复我的Style，使TextBlock 居中，Image 居中并变小。

如何重新编写 Style 以更正按钮的外观？

【问题讨论】：

标签： c# wpf xaml styles .net-4.5

【解决方案1】：

试试这样的：

Button：

<Button Style="{StaticResource BigButton}" Content="save">
    <Button.Tag>
        <ImageSource>../GreenLamp.png</ImageSource>
    </Button.Tag>
</Button>

Style:

<Style TargetType="Button" x:Key="BigButton">
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Height" Value="80" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border"
                        CornerRadius="5"
                        Background="#FF415360">
                    <StackPanel>
                        <Image Source="{TemplateBinding Tag}" 
                                VerticalAlignment="Top"
                                HorizontalAlignment="Center"
                                Height="50"
                                Margin="5" />
                        <ContentPresenter x:Name="ButtonContentPresenter"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center">
                    </ContentPresenter>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可能需要将Style 中的Image 更改为Margin 以满足您的需求。

【讨论】：

【解决方案2】：

解决您的问题的方法可能是将您的 Image 和 TextBlock 样式移动到 ControlTemplate 的 Resource 部分。我不确定为什么，但我相信如果样式是内容演示者资源的一部分，则它们不在范围内。

【讨论】：

这是正确的，<ContentPresenter.Resources> 中的样式没有被应用。将它们移至 <ControlTemplate.Resources> 会使 UI 看起来符合预期。

【解决方案3】：

我认为，如果您设置 Button 的 ContentTemplate 而不是 Content，它会起作用。

<Button Style="{StaticResource BigButton}">
    <Button.ContentTemplate>
        <DataTemplate>
          <StackPanel>
            <Image Source="Resources/icon_cancel.png" />
            <TextBlock>save</TextBlock>
          </StackPanel>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

【讨论】：

【解决方案4】：

使用 height 属性来修复图像高度以设置为 30（取决于您的要求）并使用 HorzontalAllignment 将文本块居中它会正常工作

【讨论】：

不幸的是，它没有。