角落切口自定义按钮背景答案

【问题标题】：Corners cutout custom button background角落切口自定义按钮背景
【发布时间】：2020-05-19 16:28:09
【问题描述】：

我对 UWP 相当陌生，但我熟悉 XML 和 Java/Kotlin 中的 Android 编程。我想创建一个按钮，它的角被切掉，基本上看起来像这样：

我使用Polygon XAML 元素及其Points 属性在上面创建了这个形状，如下所示： <Polygon Points="10,0,100,0,110,10,110,50,100,60,10,60,0,50,0,10" />。我可以使用这个Polygon 还是可以用另一种方式来实现？提前感谢您的帮助！

【问题讨论】：

标签： c++ windows visual-studio xaml uwp

【解决方案1】：

我可以使用这个多边形吗

当然，UWP 包含Polygon 类，你可以直接使用它。 this 是您可以参考的示例教程。

如果你想让Polygon作为Button的内容，你可以参考下面的代码

<Button Background="Transparent" Visibility="Visible">
    <Button.Resources>
        <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent" />
        <SolidColorBrush x:Key="ButtonForegroundPressed" Color="Transparent" />
        <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
    </Button.Resources>
    <Grid>
        <Polygon Fill="Red" Points="10,0,100,0,110,10,110,50,100,60,10,60,0,50,0,10" />
        <TextBlock Text="Hello Btn" TextAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
    </Grid>
</Button>

【讨论】：

部分奏效了。有没有更通用的方法来做到这一点？这样背景是固定的，不会像普通按钮那样向用户提供反馈。当我的文本变长时，它只会“超出”多边形，因为它是硬编码的。我正在寻找的是一种没有圆角或前卫角但像多边形一样的切口的按钮样式，当我将鼠标悬停在它上面时，按钮边框应该是不同的颜色，以及普通按钮可以做的所有事情。
更好的方法是自定义按钮样式和编辑按钮ControlTemplate包含所有按钮状态，请检查此默认按钮style。