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 joliment stylé, mais je n'arrive pas à comprendre comment faire pour que le chemin remplisse l'intérieur de l'espace du bouton (la largeur et la hauteur du bouton). Je ne sais pas non plus si je dois spécifier ContentPresenter ou même si c'est correct. Je veux que le texte soit au milieu du bouton (comme d'habitude) mais avec mon chemin graphique derrière lui.

Quelqu'un peut-il me donner des conseils sur la manière d'y parvenir ? Le style est défini comme suit ;

    <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 la suivante ;

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

Lorsque tout est terminé, il devrait ressembler à un bouton rouge incurvé.

Merci d'avance

Ryan

Answer 1

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

Placez le chemin dans une boîte de visualisation et faites-le s'étirer pour le remplir :

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