Стилизация Кнопки 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.

В частности, то, что должно выглядеть следующим образом:

Заканчивается глядя, как это (без учета разницы в цвете):

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

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

Answer 1

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

Answer 2

Использование высота свойство фиксировать высоту изображения, чтобы сказать 30 (в зависимости от вашего reqirement) и использовать HorzontalAllignment к центру для TextBlock Это Виль работать нормально

Answer 3

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

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 4

Я думаю, что это сработает, если вы установите ContentTemplate Button вместо Content.

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