C# 使用图像+文本设计 WPF 按钮样式

Styling a WPF Button with Image+Text

提问by mbaytas

In my C#/WPF/.NET 4.5 application I have buttons with images that I implemented in the following fashion:

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

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

I have a resource dictionary UIStyles.xamlin which I declare the following:

我有一个资源字典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>

The cursor, height, border etc. properties work fine, but I can't style the TextBlockand the Image.

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

Specifically, what needs to look like this:

具体来说，需要看起来像这样：

Ends up looking like this (disregarding the color difference):

最终看起来像这样（不考虑色差）：

I've seen similar questionsasked before but the solutions used different approaches (I don't want to create a custom User Control, all of my needs except this one are covered in the present code and re-writing will be a nuisance). I merely need to fix my Styleso that the TextBlockis centered and the Imageis centered and made smaller.

我之前看到过类似的问题，但解决方案使用了不同的方法（我不想创建自定义用户控件，我的所有需求除了这个都包含在当前代码中，重写会很麻烦）。我只需要修复我的，Style以便TextBlock居中，Image居中并变小。

How do I re-write the Styleto correct the look of my buttons?

我如何重写Style以纠正我的按钮的外观？

采纳答案by Dan Busha

The solution to your problem may be to move your Image and TextBlock styles to the ControlTemplate's Resource section. I'm not sure why, but I believe the styles aren't in scope if they are part of the content presenter's resources.

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

回答by Rajeev Ranjan

Use height property to fix Image height to let say 30(depend on your reqirement) and use HorzontalAllignment to center for textblock It wil work fine

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

回答by Eirik

Try something like this:

尝试这样的事情：

The Button:

的Button：

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

The Style:

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

You might have to change the Height/Marginfor the Imagein the Styleto fit your needs.

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

回答by sthotakura

I think, it will work if you set Button's ContentTemplate instead of Content.

我认为，如果您设置 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>