画像とテキストを含むwpfボタンを作成する

Question

ボタンに画像とラベルを表示するためにボタンテンプレートを作成したいと思います。 ボタンの上に水平スタックパネルを使用することをお約束します。

ラベルを表示するのに成功しません。ここで

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

は、このテンプレートの私の呼び出しです：ここで

は私のテンプレートである

ここ

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

ではなく、テキストボックスのラベルを持つ別の方法である

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

私の問題は、私のイメージが表示され、テンプレートにラベルが指定されていないことです。 誰でも私を助けてくれますか？

ありがとうございました:)

Answer 1

TextBlockは、あなたのニーズに合ったラベルを作成します。余分なラベル機能（ターゲット、オブジェクトの内容など）を使用しない場合は、適切な 'TextBlock'を使用してください。

あなたはすべてのボタンのスタイルを無効にするとボタンのみで画像とラベルを持っている場合（注、これはマウスオーバー/マウスダウン効果を無効にしていますが、トリガーのロジックを提供することができます）：

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

使い方：

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

あなただけの通常のスタイルを作らボタンで画像/のTextBlockをしたい場合は、それも簡単です：

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

Answer 2

次のようにキャンバスを使用します。

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

あなたの要件に従ってCanvas.LeftとCanvas.Topを調整することができます。私は、画像の上にTextblockを表示するので、これがあなたを助けてくれることを願っています。