如何在.NET MAUI中制作带边框内嵌标签的Frame控件？

要实现标签嵌入Frame边框的效果，核心思路是用Grid将Frame和Label叠加，通过调整Label的外边距让它覆盖在Frame的边框上，同时设置Label的背景色与Frame（或页面）背景一致，模拟内嵌视觉效果。以下是具体实现方案：

快速实现（直接写XAML） #

这种方式适合单个使用的场景，代码简洁直接：

<Grid WidthRequest="300" HeightRequest="200">
    <!-- 基础Frame容器 -->
    <Frame 
        CornerRadius="8"
        BorderColor="#CCCCCC"
        BackgroundColor="White"
        Padding="16" />
    
    <!-- 内嵌标签 -->
    <Label 
        Text="用户信息"
        FontSize="14"
        FontAttributes="Bold"
        BackgroundColor="White"
        Margin="16 -10 0 0" /> <!-- 负上边距让标签向上覆盖边框，左边距和Frame的Padding对应 -->
</Grid>

关键细节说明 #

• Grid让Frame和Label重叠在同一区域，实现标签覆盖效果
• Margin="16 -10 0 0"：左边距和Frame的左Padding保持一致，负的上边距控制标签向上移动的距离，数值可根据字体大小调整（比如字体大就把负数值调小）
• Label的背景色必须和Frame背景色一致，这样标签覆盖边框的部分会遮挡边框，形成“内嵌”的视觉感

可复用自定义控件 #

如果需要在多个页面使用，推荐封装成自定义ContentView，方便统一维护和修改：

1. 创建LabeledFrame.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.LabeledFrame">
    <ContentView.Content>
        <Grid>
            <Frame 
                x:Name="InnerFrame"
                CornerRadius="8"
                BorderColor="#CCCCCC"
                BackgroundColor="White"
                Padding="16" />
            
            <Label 
                x:Name="FrameLabel"
                FontSize="14"
                FontAttributes="Bold"
                BackgroundColor="{Binding Source={x:Reference InnerFrame}, Path=BackgroundColor}"
                Margin="{Binding Source={x:Reference InnerFrame}, Path=Padding, Converter={StaticResource PaddingToLabelMarginConverter}}" />
        </Grid>
    </ContentView.Content>
</ContentView>

2. 添加后台代码LabeledFrame.xaml.cs #

using Microsoft.Maui.Controls;

namespace YourAppNamespace;

public partial class LabeledFrame : ContentView
{
    // 定义可绑定属性，方便外部设置样式
    public static readonly BindableProperty LabelTextProperty =
        BindableProperty.Create(nameof(LabelText), typeof(string), typeof(LabeledFrame), string.Empty);

    public static readonly BindableProperty FrameCornerRadiusProperty =
        BindableProperty.Create(nameof(FrameCornerRadius), typeof(CornerRadius), typeof(LabeledFrame), new CornerRadius(8));

    public static readonly BindableProperty FrameBorderColorProperty =
        BindableProperty.Create(nameof(FrameBorderColor), typeof(Color), typeof(LabeledFrame), Colors.Gray);

    public static readonly BindableProperty FrameBackgroundColorProperty =
        BindableProperty.Create(nameof(FrameBackgroundColor), typeof(Color), typeof(LabeledFrame), Colors.White);

    public string LabelText
    {
        get => (string)GetValue(LabelTextProperty);
        set => SetValue(LabelTextProperty, value);
    }

    public CornerRadius FrameCornerRadius
    {
        get => (CornerRadius)GetValue(FrameCornerRadiusProperty);
        set => SetValue(FrameCornerRadiusProperty, value);
    }

    public Color FrameBorderColor
    {
        get => (Color)GetValue(FrameBorderColorProperty);
        set => SetValue(FrameBorderColorProperty, value);
    }

    public Color FrameBackgroundColor
    {
        get => (Color)GetValue(FrameBackgroundColorProperty);
        set => SetValue(FrameBackgroundColorProperty, value);
    }

    public LabeledFrame()
    {
        InitializeComponent();
        // 绑定属性到内部控件
        InnerFrame.SetBinding(Frame.CornerRadiusProperty, new Binding(nameof(FrameCornerRadius), source: this));
        InnerFrame.SetBinding(Frame.BorderColorProperty, new Binding(nameof(FrameBorderColor), source: this));
        InnerFrame.SetBinding(Frame.BackgroundColorProperty, new Binding(nameof(FrameBackgroundColor), source: this));
        FrameLabel.SetBinding(Label.TextProperty, new Binding(nameof(LabelText), source: this));
    }
}

3. 添加Margin转换器PaddingToLabelMarginConverter.cs #

用来根据Frame的Padding自动计算Label的外边距，保证样式统一：

using Microsoft.Maui.Controls;

namespace YourAppNamespace;

public class PaddingToLabelMarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is Thickness padding)
        {
            // 左边距和Frame左Padding一致，上边距设为-10，可根据需求调整
            return new Thickness(padding.Left, -10, 0, 0);
        }
        return new Thickness(0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

4. 在页面中使用自定义控件 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <ContentPage.Resources>
        <local:PaddingToLabelMarginConverter x:Key="PaddingToLabelMarginConverter" />
    </ContentPage.Resources>

    <StackLayout Padding="20" Spacing="20">
        <local:LabeledFrame 
            LabelText="用户信息"
            FrameCornerRadius="8"
            FrameBorderColor="#CCCCCC"
            FrameBackgroundColor="White"
            WidthRequest="300"
            HeightRequest="200" />
        
        <local:LabeledFrame 
            LabelText="订单详情"
            FrameCornerRadius="6"
            FrameBorderColor="#2196F3"
            FrameBackgroundColor="#F5F5F5"
            WidthRequest="300"
            HeightRequest="150" />
    </StackLayout>
</ContentPage>

注意事项 #

• 如果页面背景色不是白色，需要将Label的背景色设置为页面背景色，或者通过绑定关联父容器的背景色
• 可以根据需求调整Label的字体大小、颜色、FontAttributes等样式
• 负Margin的数值可以根据实际视觉效果微调，确保标签刚好覆盖边框的顶部部分

内容的提问来源于stack exchange，提问作者Jürgen Müller