Como faço para substituir completamente o conteúdo de um botão WPF com um caminho gráfico?

Question

Eu tenho desconstruído um botão padrão WPF usando Blend e conseguiram criar um botão de estilo muito bem, mas eu não consigo descobrir como fazer o caminho preencher o interior do espaço de botão (a largura do botão e altura). Eu também não tenho certeza se eu precisar especificar ContentPresenter ou mesmo se ele está correto. Estou depois do texto no meio do botão (como normal), mas com o meu caminho gráfico por trás dele.

Alguém pode me dar feedback sobre como fazer isso? O estilo é definido como;

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

O uso deste botão é;

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

Quando tudo estiver pronto, ele deve apenas olhar como um botão vermelho cheio de curvas.

Agradecemos antecipadamente

Ryan

Answer 1

Existem algumas coisas que você pode fazer para obter os resultados que você está procurando.

Coloque o caminho em um negatoscópio e tê-lo esticar para preencher:

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

Use uma borda em vez de um caminho:

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