MAUI开发中如何实现Frame边框拆分为两段的自定义效果

这个版本的MAUI默认Border控件存在平台渲染不一致、阴影与描边互斥裁切的已知bug，直接调整单Border属性没法复现参考图效果，用双层Border嵌套的写法可以全平台兼容，步骤如下：

• 先将项目内的Microsoft.Maui.Controls相关Nuget包升级到6.0.540及以上的预览版对应版本，排除低版本控件基础渲染bug。
• 外层Border专门负责渲染渐变描边、外阴影，内层Border负责承载内容、做内容区白底填充，从结构上规避单Border的裁切问题。

核心实现XAML代码：

<!-- 外层：描边+阴影层 -->
<Border StrokeThickness="1.5"
        CornerRadius="16"
        Padding="0">
    <Border.Stroke>
        <!-- 替换为你参考图对应的描边颜色/渐变，纯色直接用SolidColorBrush即可 -->
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#6366F1" Offset="0"/>
            <GradientStop Color="#8B5CF6" Offset="1"/>
        </LinearGradientBrush>
    </Border.Stroke>
    <Border.Shadow>
        <Shadow Brush="#26000000"
                Offset="0,4"
                Radius="12"
                Opacity="0.7"/>
    </Border.Shadow>

    <!-- 内层：内容承载层 -->
    <Border Margin="1.5"
            CornerRadius="14.5"
            Background="White"
            Padding="16">
        <!-- 此处替换为你的实际业务内容，支持任意MAUI控件、布局 -->
        <VerticalStackLayout Spacing="8">
            <Label Text="卡片标题" FontSize="18" FontAttributes="Bold"/>
            <Label Text="卡片内容说明文本" FontSize="14" TextColor="#616161"/>
        </VerticalStackLayout>
    </Border>
</Border>

适配注意事项 #

• 内层Border的Margin值必须和外层StrokeThickness值一致，内层CornerRadius = 外层CornerRadius - StrokeThickness，否则会出现描边露白、圆角锯齿问题。
• Android平台如果出现阴影发虚的问题，把外层Border放到Grid的最底层，不要和其他同层级控件重叠即可。
• WinUI平台如果出现圆角描边锯齿，在MauiProgram.cs的初始化配置中加入如下代码即可修复：

builder.ConfigureLifecycleEvents(events =>
{
    events.AddWindows(w => w.OnWindowCreated(window =>
    {
        window.SystemBackdrop = new Microsoft.UI.Xaml.Media.MicaBackdrop();
    }));
});

• 如果需要实现点击交互效果，直接给外层Border添加VisualState配置，在Pressed状态下调整Shadow的偏移量、透明度即可，不需要自定义平台Handler。

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