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

Question

J'ai déconstruit un bouton WPF standard à l'aide de Blend et j'ai réussi à créer un bouton joliment stylé, mais je ne vois pas comment faire en sorte que le tracé 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 s’il est correct. Je suis après le texte au milieu du bouton (comme d'habitude), mais avec le tracé graphique derrière.

Quelqu'un peut-il me donner des informations sur la manière de procéder? 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;

<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 tout en courbes.

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 zone de visualisation et faites-le s'étendre 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>