Tạo nút wpf có hình ảnh và văn bản

Question

Tôi muốn tạo mẫu nút để hiển thị hình ảnh và nhãn trong nút. Tôi thích sử dụng bảng xếp chồng ngang trên nút.

Tôi không thể hiển thị nhãn.

Đây là mẫu của tôi:

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte"> 
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" > 
    <Button.Content> 
     <StackPanel Orientation="Horizontal"> 
      <Border CornerRadius="3"> 
       <ContentPresenter/> 
       <Border.Style> 
        <Style TargetType="{x:Type Border}"> 
         <Setter Property="Background" Value="#58585a" /> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" /> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Border.Style> 
      </Border> 
      <Label> 
       <Label.Content>Fichiers joints</Label.Content> 
       <Label.Foreground>white</Label.Foreground> 
       <Label.VerticalAlignment>center</Label.VerticalAlignment> 
       <Label.HorizontalAlignment>center</Label.HorizontalAlignment> 
      </Label> 
     </StackPanel> 
    </Button.Content> 
    <Button.Style> 
     <Style TargetType="{x:Type Button}" > 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}" > 
         <ContentPresenter /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Button.Style> 
</Button> 

Đây là cuộc gọi của tôi về mẫu này:

<Grid Margin ="10,180,10,14"> 
      <Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0"> 
       <Image Source="ToolBar_FicJoints.png" /> 
      </Button> 
     </Grid> 

Dưới đây là một phương pháp với một Textbox thay vì một Label

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte"> 
    <Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" > 
     <Button.Content> 
      <StackPanel Orientation="Horizontal"> 
       <Border CornerRadius="3"> 
        <ContentPresenter/> 
        <Border.Style> 
         <Style TargetType="{x:Type Border}"> 
          <Setter Property="Background" Value="#58585a" /> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" /> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Border.Style> 
       </Border> 
        <TextBlock Text="LabelText" /> 
       </StackPanel> 
     </Button.Content> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}" > 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type Button}" > 
          <ContentPresenter /> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </Button.Style> 
    </Button> 
</ControlTemplate> 

Vấn đề của tôi là tôi thấy onl hình ảnh của mình chứ không phải nhãn của tôi được chỉ định trong mẫu. Bất kỳ ai cũng có thể giúp tôi?

Cảm ơn rất nhiều :)

Answer 1

TextBlock phù hợp với nhu cầu của bạn tốt hơn nhãn. Nếu bạn không sử dụng chức năng nhãn phụ (chẳng hạn như mục tiêu, nội dung đối tượng), hãy gắn bó với một TextBlock 'ole' tốt.

Nếu bạn muốn vô hiệu hóa tất cả các nút phong cách và chỉ có một hình ảnh và nhãn trong nút (lưu ý, này làm vô hiệu mouseover/hiệu ứng mousedown, nhưng bạn có thể cung cấp các logic trong trigger):

<ControlTemplate TargetType="{x:Type Button}" x:Key="SimpleButton"> 
    <ContentPresenter/> 
</ControlTemplate> 

Cách sử dụng :

<Button Template="{StaticResource SimpleButton}"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="ToolBar_FicJoints.png" /> 
     <TextBlock Text="LabelText" /> 
    </StackPanel> 
</Button> 

Nếu bạn chỉ muốn Image/TextBlock trong một nút theo kiểu bình thường, nó thậm chí còn dễ dàng hơn:

<Button> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="ToolBar_FicJoints.png" /> 
     <TextBlock Text="Fichiers joints" /> 
    </StackPanel> 
</Button> 

Answer 2

Sử dụng canvas như sau.

<Button Height="50" Width="150" > 
         <Button.Template> 
          <ControlTemplate> 
           <Canvas> 
            <Image Source="./Images/Cancel.png"/> 
            <TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/> 
           </Canvas> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 

Bạn có thể điều chỉnh Canvas.Left và Canvas.Top theo yêu cầu của bạn. Tôi hy vọng điều này sẽ giúp bạn vì nó sẽ hiển thị Textblock trên đầu trang của hình ảnh.