¿Cómo sustituyo completamente el contenido de un botón WPF con una ruta gráfica?

Question

He deconstruido un botón WPF estándar usando Blend y he logrado crear un botón con un estilo agradable, pero no puedo descubrir cómo hacer que la ruta llene el interior del espacio del botón (el ancho y la altura del botón). Tampoco estoy seguro de si necesito especificar ContentPresenter o incluso si es correcto. Estoy detrás del texto en el medio del botón (como es normal) pero con mi ruta gráfica detrás.

¿Puede alguien darme su opinión sobre cómo lograr esto? El estilo se define 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>

El uso de este botón es;

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

Cuando todo haya terminado, debería verse como un botón rojo con curvas.

Gracias de antemano

Ryan

Answer 1

Hay un par de cosas que puede hacer para obtener los resultados que está buscando.

Coloque la ruta en un cuadro de visualización y haga que se extienda para rellenar:

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

Utilice un borde en lugar de una ruta:

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