Создание кнопки WPF с изображением + текст

В моем приложении С#/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.

В частности, что должно выглядеть так:

correct look

Кончается со следующим (без учета разницы цветов):

incorrect look

Я видел подобные вопросы, заданные раньше, но в решениях использовались разные подходы (я не хочу создавать пользовательский элемент управления, все мои потребности, кроме этого один из них рассматривается в настоящем коде, и переписывание будет неприятным). Мне просто нужно исправить мой Style так, чтобы TextBlock был центрирован, а Image центрирован и уменьшен.

Как перезаписать Style, чтобы исправить внешний вид моих кнопок?

Ответы

Ответ 1

Решение вашей проблемы может заключаться в перемещении стилей Image и TextBlock в раздел ResourceTemplate Resource. Я не уверен, почему, но я считаю, что стили не входят в объем, если они являются частью ресурсов презентатора контента.

Ответ 2

Попробуйте что-то вроде этого:

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 в соответствии с вашими потребностями.

Ответ 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 для центра textblock. Это хорошо работает