Question

我已经使用Blend解构了一个标准的WPF按钮，并设法创建了一个很好的样式按钮，但我无法弄清楚如何使路径填充按钮空间的内部（按钮宽度和高度）。我也不确定是否需要指定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>

完成所有操作后，它应该看起来像一个弯曲的红色按钮。

提前致谢

赖安

Answer 1

您可以采取一些措施来获得所需的结果。

将路径放在视图框中并将其拉伸以填充：

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

如何用图形路径完全替换WPF按钮的内容？

1 个答案: