如何实现这个按钮外观

Posted 2023-02-19

【中文标题】如何实现这个按钮外观

【英文标题】：How to achieve this button appearance

【发布时间】：2017-02-23 13:36:54

【问题描述】：

我正在尝试使用 XAML 实现此按钮外观，请查看以下链接：

我已经有了为数字添加白色边框的轮廓文本，但是我想在右上角画一个三角形，并在里面画一个字符。哪种方法最好？

【问题讨论】：

如果您不发布任何代码来展示您已经完成的工作，那么最好的方法是在 Paint 中绘制三角形（以及字符等）

你是个非常有趣的伙伴。这就是我问你的原因，因为我不知道如何在代码中正确地做到这一点。是的，我是用颜料画的。

为什么要把事情复杂化？使用图像作为按钮内容。

【参考方案1】：

从在 Blend 中做这样的事情开始。

<Button >
  <Button.Template>
    <ControlTemplate TargetType="Button">
         <Border Background="#FF008081">
            <Grid>
                <Path Data="M320,80 L319.5,109.5 289.5,79.5 z" Fill="#FFEA1D24"  Height="31"  Stretch="Fill" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="31.5"/>
                <Path Data="M315,85 L315,93.25 C313.2803,95.392823 311.44247,95.307959 309.5,93.25 L309.5,85" Fill="#FFEA1D24" HorizontalAlignment="Right" Height="11.421"  Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="6.5" Margin="5"/>
            </Grid>
        </Border>
    </ControlTemplate>
  </Button.Template>
</Button>