Как вставить кнопку без рамки, с фоновым изображением и текстом

Question

Я хотел бы создать кнопку WPF без рамки, с фоновым изображением и вставить центр текста. Поэтому у меня есть следующее:

  <Style TargetType="Button" x:Key="TransparentButton"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Background="Transparent"> 
          <ContentPresenter/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <Button Style="{StaticResource TransparentButton}"> 
      <Button.Content> 
      <StackPanel Orientation="Horizontal"> 
       <Image Source="./Resources/Images/bottone_indietro.png" /> 
       <Label content="Pippo"/> 
      </StackPanel> 
      </Button.Content> 
     </Button> 

Это работает, но текст «Pippo» отображается справа от изображения. Можно ли центрировать текст ???

Reguards ...

Answer 1

Если вы хотите центр выравнивания текста по изображению можно поместить оба элемента в Grid вместо StackPanel

<Grid> 
    <Image Source="./Resources/Images/bottone_indietro.png" /> 
    <Label Content="Pippo" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
</Grid> 

StakcPanel сложит своих детей по горизонтали или по вертикали в то время как Grid позволяет поместить один элемент поверх другого. От MSDN:

Детские элементы сетки нарисованы в том порядке, в котором они отображаются в разметке или коде. Как следствие, слоистый порядка (также известный как г-го порядка) может быть достигнуто, когда элементы имеют одинаковые координаты

Вы можете прочитать больше о WPF панелей here

Answer 2

Вы можете использовать HorizontalAlignment свойство центрирования текст, хотя он всегда будет справа от вашего Image. Кроме того, необходимо будет удалить настройки на StackPanelOrientation так, что текст будет отображаться под Image ... попробуйте это:

<Button Style="{StaticResource TransparentButton}"> 
    <Button.Content> 
     <StackPanel> 
     <Image Source="./Resources/Images/bottone_indietro.png" /> 
     <TextBlock Text="Pippo" HorizontalAlignment="Center" /> 
     </StackPanel> 
    </Button.Content> 
</Button> 

Обратите внимание, что если вы хотите, чтобы ваш текст появится поверх вашего Image, то вы не должны использовать StackPanel вообще ... в этом случае вместо этого вы должны заменить его Grid.