WPF中如何将C#代码创建的按钮设置为半圆样式？

实现思路 #

要实现半圆样式的按钮，核心是通过自定义ControlTemplate修改按钮的视觉外观。针对你7个按钮排成一行的场景，提供两种适配性方案：

方式一：利用Border的CornerRadius实现首尾半圆（连续条形） #

这种方式适合打造首尾为半圆、中间无缝衔接的连续按钮组，匹配你参考的示例效果。修改你的动态创建代码如下：

buttonList = new Button[7];
for (int i = 0; i < 7; i++)
{
    buttonList[i] = new Button();
    buttonList[i].Content = "";
    buttonList[i].Foreground = Brushes.White;
    buttonList[i].Background = Brushes.Transparent;
    buttonList[i].BorderBrush = Brushes.Black;
    buttonList[i].BorderThickness = new Thickness(1);
    buttonList[i].Name = "Btn" + i;
    buttonList[i].Click += Btn_Click;

    // 构建自定义按钮模板
    var template = new ControlTemplate(typeof(Button));
    var borderFactory = new FrameworkElementFactory(typeof(Border));
    
    // 绑定按钮基础样式属性
    borderFactory.SetValue(Border.BorderBrushProperty, new TemplateBindingExtension(BorderBrushProperty));
    borderFactory.SetValue(Border.BorderThicknessProperty, new TemplateBindingExtension(BorderThicknessProperty));
    borderFactory.SetValue(Border.BackgroundProperty, new TemplateBindingExtension(BackgroundProperty));

    // 根据按钮位置设置圆角：首按钮左半圆，尾按钮右半圆，中间按钮无圆角
    if (i == 0)
    {
        borderFactory.SetValue(Border.CornerRadiusProperty, new CornerRadius(20, 0, 0, 20));
    }
    else if (i == 6)
    {
        borderFactory.SetValue(Border.CornerRadiusProperty, new CornerRadius(0, 20, 20, 0));
    }
    else
    {
        borderFactory.SetValue(Border.CornerRadiusProperty, new CornerRadius(0));
        // 去掉中间按钮的左边框，避免重复边框
        borderFactory.SetValue(Border.BorderThicknessProperty, new Thickness(0, 1, 1, 1));
    }

    // 添加内容展示容器
    var contentPresenter = new FrameworkElementFactory(typeof(ContentPresenter));
    contentPresenter.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Center);
    contentPresenter.SetValue(VerticalAlignmentProperty, VerticalAlignment.Center);
    borderFactory.AppendChild(contentPresenter);

    template.VisualTree = borderFactory;

    // 添加按钮按下状态的样式触发器
    var pressTrigger = new Trigger
    {
        Property = Button.IsPressedProperty,
        Value = true
    };
    pressTrigger.Setters.Add(new Setter(Border.BackgroundProperty, Brushes.Gray));
    template.Triggers.Add(pressTrigger);

    buttonList[i].Template = template;

    forzaGrid.Children.Add(buttonList[i]);
    Grid.SetRow(buttonList[i], 0);
    Grid.SetColumn(buttonList[i], i);
}

方式二：使用Path绘制独立半圆按钮 #

如果需要单个按钮为独立半圆（如上半圆、下半圆），可以用Path元素绘制形状作为按钮模板：

// 示例：创建上半圆按钮
private Button CreateStandaloneHalfCircleButton()
{
    var btn = new Button
    {
        Foreground = Brushes.White,
        Background = Brushes.Transparent,
        BorderBrush = Brushes.Black,
        Width = 40,
        Height = 20
    };

    // 定义上半圆路径数据
    var pathFactory = new FrameworkElementFactory(typeof(Path));
    pathFactory.SetValue(Path.StrokeProperty, new TemplateBindingExtension(BorderBrushProperty));
    pathFactory.SetValue(Path.FillProperty, new TemplateBindingExtension(BackgroundProperty));
    pathFactory.SetValue(Path.StrokeThicknessProperty, 1.0);
    // 路径参数：M(起点) A(椭圆半径，旋转角，大弧标志，扫掠方向，终点) L(连线) Z(闭合)
    pathFactory.SetValue(Path.DataProperty, Geometry.Parse("M 0,20 A 20,20 0 1,1 40,20 L 40,0 L 0,0 Z"));

    // 构建按钮模板
    var template = new ControlTemplate(typeof(Button));
    var gridFactory = new FrameworkElementFactory(typeof(Grid));
    gridFactory.AppendChild(pathFactory);

    var contentPresenter = new FrameworkElementFactory(typeof(ContentPresenter));
    contentPresenter.SetValue(HorizontalAlignmentProperty, HorizontalAlignment.Center);
    contentPresenter.SetValue(VerticalAlignmentProperty, VerticalAlignment.Center);
    gridFactory.AppendChild(contentPresenter);

    template.VisualTree = gridFactory;

    // 添加按下状态触发器
    var pressTrigger = new Trigger
    {
        Property = Button.IsPressedProperty,
        Value = true
    };
    pressTrigger.Setters.Add(new Setter(Path.FillProperty, Brushes.Gray));
    template.Triggers.Add(pressTrigger);

    btn.Template = template;
    return btn;
}

关键调整点 #

• CornerRadius数值需和按钮高度匹配：比如设置20的圆角，按钮高度建议设为40，才能形成标准半圆。
• Grid布局的列宽建议设为Auto或固定值，避免按钮拉伸导致形状变形。
• 可按需添加鼠标悬停、禁用等状态的触发器，完善交互体验。

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