.NET MAUI 9 自定义 RadioButton 如何横向填满可用空间？

2026-11-04数据阿明

结论

这段代码已经在主要层级设置了 HorizontalOptions="Fill"，没有明显遗漏横向填充设置。继续给内部元素添加 Fill，通常无法解释或解决当前现象。

建议先确认运行时是哪一层没有铺满：ItemStack、SelectorRadio，还是模板根节点 Border。原问题没有提供 SelectorRadio 的实现、运行平台和具体 MAUI 包版本，目前无法确定唯一原因，也不能直接认定是框架缺陷。

为什么预览显示铺满，边框却看起来没有铺满？

HorizontalOptions 决定元素如何使用父布局分配的空间。VerticalStackLayout 可以让子元素沿水平方向填充，前提是它自身获得了可用宽度。相关行为可参考 VerticalStackLayout 官方文档。

需要分别检查以下几层的尺寸：

外层 Border 的 WidthRequest="600" 是整个窗口容器的宽度请求。
页面 Grid 设置了 Padding="20"，内部选项的可用宽度会小于外层容器宽度。
RadioButton 占据的范围和模板中实际绘制边框的范围需要分别检查。
模板内部的 Grid.Margin="5"、ContentPresenter.Margin 和 tile.Margin 会缩进内容，但不能据此断定模板根 Border 本身变窄。

XAML Live Preview 中某一层的选中区域占满宽度，不能证明运行时模板根节点也以相同宽度完成了排列。

第一步：确认 RadioButton 的运行时宽度

保留现有布局，在创建 radio 后、加入 ItemStack 前添加临时诊断代码：

radio.SizeChanged += (_, _) =>
{
    System.Diagnostics.Debug.WriteLine(
        $"ItemStack.Width={ItemStack.Width}, RadioButton.Width={radio.Width}");
};

ItemStack.Add(radio);

在页面显示、布局完成后查看输出。控件刚在构造函数中创建时，布局可能尚未完成，不宜根据此时读取的尺寸作判断。

原代码中 radio.Margin 的左右值都是 0。如果 radio.Width 明显小于 ItemStack.Width，先检查控件或父布局的宽度约束；如果两者接近，再检查模板根 Border 的运行时边界。

可以给模板根节点加上名称，方便在运行时可视化树中定位：

<Border x:Name="RadioBorder"
        Stroke="#F3F2F1"
        StrokeThickness="2"
        HorizontalOptions="Fill">

保留该节点原有的视觉状态和子元素。比较这个 Border 与对应 RadioButton 的边界，注意不要把内部文字或图标的范围当作边框范围。

第二步：用标准 RadioButton 排除自定义类的影响

代码创建的是 SelectorRadio。如果它是 RadioButton 的派生类，可以暂时把创建代码替换为下面的测试项：

RadioButton radio = new()
{
    Margin = new Thickness(0, 5),
    Padding = new Thickness(0),
    HorizontalOptions = LayoutOptions.Fill,
    ControlTemplate = style,
    Content = new Label
    {
        Text = title,
        HorizontalOptions = LayoutOptions.Fill
    }
};

ItemStack.Add(radio);

这段代码用于隔离问题，没有包含 SelectorRadio.Current 等自定义逻辑。

如果标准控件能够铺满，而 SelectorRadio 不能，重点检查自定义类中的尺寸请求、属性回调，以及测量或排列相关的重写。如果两者表现相同，再检查模板和目标平台。

另外，面向 RadioButton 的隐式样式默认不会自动应用到所有派生类型。不过，原代码已经直接给 SelectorRadio 设置了 ControlTemplate 和 HorizontalOptions，不能仅凭隐式样式的作用范围认定故障原因。

第三步：简化模板，确认填充链路

可以临时增加一个最小模板，移除图标、嵌套布局和视觉状态的干扰：

<ControlTemplate x:Key="RadioWidthProbe">
    <Border Stroke="Red"
            StrokeThickness="2"
            Padding="10,5"
            HorizontalOptions="Fill">
        <ContentPresenter HorizontalOptions="Fill" />
    </Border>
</ControlTemplate>

然后将测试控件的 ControlTemplate 改为该资源：

radio.ControlTemplate =
    (ControlTemplate)Resources["RadioWidthProbe"];

RadioButton 支持通过 ControlTemplate 定义外观，ContentPresenter 用于显示它的 Content。这一结构与 RadioButton 官方模板说明一致。

如果最小模板可以铺满，就逐步恢复原来的内部布局和视觉状态，观察从哪一步开始出现差异。自定义模板中的边框内边距可以直接写在 Border.Padding 上；如果要由控件的 Padding 控制，需要在模板中明确使用该属性，例如 Padding="{TemplateBinding Padding}"。仅凭控件上设置了 Padding，不能推断模板的最终留白。

已确认模板根节点偏窄时，如何尝试显式宽度约束？

如果已经确认 RadioButton 获得了正确宽度，而模板根 Border 仍然偏窄，可以尝试让模板根节点的宽度请求跟随宿主控件：

<Border x:Name="RadioBorder"
        WidthRequest="{TemplateBinding Width}"
        Stroke="#F3F2F1"
        StrokeThickness="2"
        Padding="10,5"
        HorizontalOptions="Fill">

其余视觉状态和内部布局保持原样，同时把宿主控件的 Padding 暂时设为 0，并保持模板根节点没有左右 Margin，避免把宿主外部宽度与内部可用宽度混在一起。

这个显式约束针对的是宿主已铺满、模板根节点未铺满的情况，应先确认尺寸差异再尝试。修改后需要在目标平台检查窗口缩放、长文本换行和是否出现裁剪。如果宿主本身没有获得足够宽度，这个绑定无法解决父布局的问题。

还需要注意什么？

保留模板中的 ColumnDefinitions="Auto,*" 即可。它在模板已经获得的宽度内分配图标区和内容区，不能让整个控件突破父布局的宽度限制。

也不要把模板宽度直接写成 600。外层容器的宽度还要留出页面内边距等空间，硬编码同一个值可能导致溢出。

如果最小模板在标准 RadioButton 上仍能复现问题，需要补充目标平台、具体 MAUI 包版本、SelectorRadio 实现和运行时尺寸，才能进一步判断平台差异或框架问题。现有材料不足以保证升级某个版本或修改单一属性一定有效。