如何在Button中添加两个可通过布尔值控制显示的三角形（XAML实现）

可以通过在Button的ControlTemplate中添加两个Polygon控件，结合数据绑定与转换器控制三角形的显示状态，具体实现如下：

1. XAML中定义自定义按钮样式 #

在资源中配置转换器与按钮模板，将两个三角形分别定位在右上角和左下角：

<Window.Resources>
    <!-- 布尔值转可见性转换器 -->
    <BooleanToVisibilityConverter x:Key="BoolToVis"/>

    <Style TargetType="Button" x:Key="TriangleButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <!-- 按钮基础容器 -->
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="4"/>

                        <!-- 右上角绿色三角形 -->
                        <Polygon Points="0,0 20,0 0,20"
                                 Fill="Green"
                                 Visibility="{Binding ShowUpperGreen, Converter={StaticResource BoolToVis}}"
                                 HorizontalAlignment="Right"
                                 VerticalAlignment="Top"/>

                        <!-- 左下角青色三角形 -->
                        <Polygon Points="0,20 20,20 0,0"
                                 Fill="Cyan"
                                 Visibility="{Binding ShowBottomCyan, Converter={StaticResource BoolToVis}}"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Bottom"/>

                        <!-- 按钮内容区域 -->
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

2. 定义控制显示的布尔属性 #

在代码后台（或ViewModel）中实现带通知的布尔属性，用于触发UI更新：

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

private bool _showUpperGreen;
public bool ShowUpperGreen
{
    get => _showUpperGreen;
    set
    {
        _showUpperGreen = value;
        OnPropertyChanged(nameof(ShowUpperGreen));
    }
}

private bool _showBottomCyan;
public bool ShowBottomCyan
{
    get => _showBottomCyan;
    set
    {
        _showBottomCyan = value;
        OnPropertyChanged(nameof(ShowBottomCyan));
    }
}

3. 使用自定义按钮 #

在XAML中引用样式并绑定数据上下文：

<Button Style="{StaticResource TriangleButtonStyle}"
        Width="120" Height="60"
        Content="示例按钮"
        DataContext="{Binding RelativeSource={RelativeSource AncestorType=Window}}"/>

关键说明 #

• Polygon的Points属性用于定义三角形顶点坐标，修改数值可调整三角形大小；
• 通过BooleanToVisibilityConverter将布尔值转换为控件可见性，实现显示/隐藏切换；
• 直接修改ShowUpperGreen或ShowBottomCyan的属性值，即可实时切换对应三角形的显示状态。

内容的提问来源于stack exchange，提问作者John Grove