Tạo kiểu một nút WPF với hình ảnh + chữ

Question

Trong tôi C#/WPF/NET 4.5 ứng dụng tôi có các nút với những hình ảnh mà tôi thực hiện trong thời trang sau:

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

Tôi có một cuốn từ điển tài nguyên UIStyles.xaml trong đó tôi tuyên bố như sau: tính

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

Con trỏ, chiều cao, biên giới vv hoạt động tốt, nhưng tôi không thể tạo kiểu cho TextBlock và Image.

Cụ thể, những gì cần phải trông như thế này:

Kết thúc lên tìm kiếm như thế này (không tính đến sự khác biệt màu sắc):

Tôi đã nhìn thấy similar questions hỏi trước nhưng các giải pháp đã sử dụng các cách tiếp cận khác nhau (tôi không muốn tạo một Điều khiển người dùng tùy chỉnh, tất cả các nhu cầu của tôi ngoại trừ yêu cầu này được trình bày trong mã hiện tại và viết lại sẽ là một mối phiền toái). Tôi chỉ cần sửa chữa Style để TextBlock được căn giữa và Image được căn giữa và được làm nhỏ hơn.

Làm cách nào để viết lại Style để sửa giao diện của các nút của tôi?

Answer 1

Giải pháp cho vấn đề của bạn có thể là di chuyển các kiểu Hình ảnh và TextBlock sang phần Tài nguyên của ControlTemplate. Tôi không chắc chắn lý do tại sao, nhưng tôi tin rằng các kiểu không nằm trong phạm vi nếu chúng là một phần của tài nguyên của người trình bày nội dung.

Answer 2

Sử dụng tài sản chiều cao để sửa chiều cao hình ảnh để nói 30 (phụ thuộc vào reqirement của bạn) và sử dụng HorzontalAllignment để tập trung cho TextBlock Nó wil làm việc tốt

Answer 3

Hãy thử một cái gì đó như thế này:

Các Button:

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

Các 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> 

Bạn có thể phải thay đổi Height/Margin cho Image trong Style để phù hợp với nhu cầu của bạn.

Answer 4

Tôi nghĩ, nó sẽ hoạt động nếu bạn đặt ContentTemplate của Button thay vì Nội dung.

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