Styling Button WPF Image + Tekst

Question

W moim C#/WPF/.NET 4.5 aplikacji mam przyciski z obrazami, które ja realizowane w następujący sposób:

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

Mam słownika zasobu UIStyles.xaml w którym oświadczam co następuje: właściwości

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

kursor, wysokość, graniczne itp działać poprawnie, ale nie mogę się TextBlock styl i Image.

Konkretnie, co musi wyglądać następująco:

kończy się patrząc jak ten (pomijając różnicę kolor):

widziałem similar questions hasła przed ale rozwiązania wykorzystywały różne podejścia (nie chcę tworzyć niestandardowej kontroli użytkownika, wszystkie moje potrzeby, z wyjątkiem tego, które są objęte obecnym kodem i przepisywaniem będzie uciążliwe). Po prostu muszę naprawić mój Style, aby TextBlock został wyśrodkowany, a Image wyśrodkowany i mniejszy.

Jak mogę ponownie napisać Style, aby poprawić wygląd moich przycisków?

Answer 1

Rozwiązaniem problemu może być przeniesienie stylów Image i TextBlock do sekcji zasobów ControlTemplate. Nie jestem pewien, dlaczego, ale uważam, że style nie są w zakresie, jeśli są częścią zasobów prezentera treści.

Answer 2

Zastosowanie nieruchomość wysokość ustalić wysokość obrazu do powiedzmy 30 (zależy od reqirement) i używać HorzontalAllignment do centrum dla textblock wil działać dobrze

Answer 3

Spróbuj czegoś takiego:

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> 

Być może będziesz musiał zmienić Height/Margin dla Image w Style, aby spełnić Twoje potrzeby.

Answer 4

Myślę, że zadziała, jeśli ustawisz ContentTemplate Button zamiast Content.

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