Utwórz przycisk wpf z obrazem i tekstem

Question

Chciałbym utworzyć szablon przycisku, aby wyświetlić obraz i etykietę na przycisku. I thiking o użyciu poziomy stackpanel na przycisku.

Nie udało mi się wyświetlić etykiety.

Oto mój szablon:

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

Oto moja rozmowa z tego szablonu:

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

Oto kolejna metoda z TextBox zamiast 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> 

Mój problem polega na tym, że widzę moje zdjęcie, a nie moją etykietę określoną w szablonie. Ktoś może mi pomóc?

Thanks a lot :)

Answer 1

TextBlock pasuje do Twoich potrzeb lepiej niż etykieta. Jeśli nie używasz dodatkowej funkcjonalności etykiety (takiej jak cel, zawartość obiektu), trzymaj się dobrego "ole TextBlock".

Jeśli chcesz wyłączyć wszystkie przycisku stylizacji i mieć tylko obraz i etykietę w przycisk (uwaga, to pozbawia mouseover/efekty MouseDown, ale można dostarczyć logikę w wyzwalacze):

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

Wykorzystanie :

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

Jeśli chcesz tylko obrazem/TextBlock w normalnym przyciskiem stylizowany jest jeszcze łatwiejsze:

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

Answer 2

Użyj płótna w następujący sposób.

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

można regulować Canvas.Left i Canvas.Top jak na swoje wymagania. Mam nadzieję, że ten pomoże ci, ponieważ wyświetli Textblock na górze obrazu.