Styling un pulsante WPF con l'immagine + Testo

Question

Nel mio C#/WPF/.NET 4.5 applicazione ho pulsanti con le immagini che ho implementato nel modo seguente:

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

Ho un dizionario risorse UIStyles.xaml in cui dichiaro quanto segue:

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

il cursore, altezza, ecc confine proprietà funzionano bene, ma non posso lo stile del TextBlock e Image.

In particolare, ciò che deve assomigliare a questo:

finisce per guardare come questo (trascurando la differenza di colore):

Ho visto similar questions chiesto prima ma le soluzioni hanno utilizzato approcci diversi (non voglio creare un controllo utente personalizzato, tutti i miei bisogni eccetto questo sono trattati nel presente codice e riscrittura sarà una seccatura). Devo semplicemente correggere il mio Style in modo che lo TextBlock sia centrato e che il Image sia centrato e reso più piccolo.

Come posso riscrivere lo Style per correggere l'aspetto dei miei pulsanti?

Answer 1

La soluzione al tuo problema potrebbe essere quella di spostare gli stili Image e TextBlock nella sezione Risorsa di ControlTemplate. Non sono sicuro del perché, ma credo che gli stili non siano nell'ambito di applicazione se fanno parte delle risorse del presentatore di contenuti.

Answer 2

Usa proprietà height per fissare l'altezza immagine per diciamo 30 (dipende dal vostro reqirement) e utilizzare HorzontalAllignment al centro per blocco di testo Si wil funzionano bene

Answer 3

provare qualcosa di simile:

Il Button:

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

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

Potrebbe essere necessario modificare Height/Margin per Image nello Style in base alle proprie esigenze.

Answer 4

Penso che funzionerà se si imposta ContentTemplate di Button anziché Content.

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