Comment remplacer complètement le contenu d'un bouton WPF par un chemin graphique?

Question

J'ai déconstruit un bouton WPF standard en utilisant Blend et j'ai réussi à créer un bouton bien stylé, mais je n'arrive pas à comprendre comment faire pour que le chemin remplisse l'intérieur du bouton (largeur et hauteur du bouton). Je ne suis pas sûr si j'ai besoin de spécifier ContentPresenter ou même si c'est correct. Je suis après le texte au milieu du bouton (comme d'habitude) mais avec mon chemin graphique derrière.

Quelqu'un peut-il me donner des commentaires sur la façon d'accomplir cela? Le style est défini comme:

<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}"> 
     <Grid> 
      <Path Fill="#ff951c1f" Data="F1 M 64,16 C 64,24 56,31 48,31 L 15,31 C 7,31 0,24 0,16 C 0,7 7,0 15,0 L 48,0 C 56,0 64,7 64,16 Z" /> 
      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" /> 
     </Grid> 
    </ControlTemplate> 

L'utilisation de ce bouton est;

<StackPanel> 
    <Button Template="{StaticResource CurvedButton}" FontFamily="MS Trebuchet" FontSize="40" Width="200" Height="120" Foreground="Black">XXXXXXXXXXX</Button> 
</StackPanel> 

Lorsque tout est fait, il devrait simplement ressembler à un bouton rouge curvy.

Merci à l'avance

Ryan

Answer 1

Il y a deux choses que vous pouvez faire pour obtenir les résultats que vous recherchez.

Placez le chemin dans un négatoscope et l'ont Aréolées:

<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}"> 
    <Grid> 
     <Viewbox Stretch="Fill"> 
      <Path Fill="#ff951c1f" Data="F1 M 64,16 C 64,24 56,31 48,31 L 15,31 C 7,31 0,24 0,16 C 0,7 7,0 15,0 L 48,0 C 56,0 64,7 64,16 Z" /> 
     </Viewbox> 
     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" /> 
    </Grid> 
</ControlTemplate> 

Utilisez une bordure au lieu d'un chemin:

<ControlTemplate x:Key="CurvedButton" TargetType="{x:Type Button}"> 
    <Grid> 
     <Border CornerRadius="40" Background="#ff951c1f"> 
      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" /> 
     </Border> 
    </Grid> 
</ControlTemplate>