Как полностью заменить содержимое кнопки WPF графическим путем? - PullRequest
Новая
       38

Как полностью заменить содержимое кнопки WPF графическим путем?

2 голосов
/ 31 декабря 2008

Я разобрал стандартную кнопку WPF, используя Blend, и мне удалось создать кнопку с хорошим стилем, но я не могу понять, как сделать так, чтобы контур заполнял внутреннее пространство кнопки (ширина и высота кнопки). Я также не уверен, нужно ли мне указывать ContentPresenter или даже если он правильный. Я нахожусь после текста в середине кнопки (как обычно), но с моим графическим путем позади него.

Кто-нибудь может дать мне отзыв о том, как этого добиться? Стиль определяется как; 

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

Использование этой кнопки: 

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

Когда все готово, оно должно выглядеть как красная пышная кнопка.

Заранее спасибо

Ryan

1 Ответ

6 голосов
/ 31 декабря 2008

Есть пара вещей, которые вы можете сделать, чтобы получить результаты, которые вы ищете.

Поместите путь в окно просмотра и растяните его, чтобы заполнить: 

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

Используйте границу вместо пути: 

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