使用图像+文本设置WPF按钮的样式

Question

在我的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.

具体来说,需要看起来像这样:

结束看起来像这样(忽略色差):

我之前看到过类似的问题,但是解决方案使用了不同的方法(我不想创建自定义用户控件,除了这一个之外,我的所有需求都包含在当前代码中,重写将是一个麻烦).我只需要修复我Style,使其TextBlock居中,并使其Image居中并缩小.

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

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

您可能需要更改Height/ Margin为Image在Style满足您的需求.

Answer 2

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