MAUI XAML中Border元素Stroke与内容跨平台重叠问题求解

成因 #

MAUI的Border控件在Android和Windows平台的渲染逻辑存在差异：

• Android端：Border的Stroke（边框）绘制在控件自身布局区域内部，内部子元素默认填满整个Border区域，导致内容直接覆盖边框。
• Windows端：Border的Stroke绘制在控件布局区域外部，会覆盖内部子元素靠近边缘的部分。

你之前给内部Label和嵌套布局单独加Padding的方式，虽能临时解决Windows端问题，但会打乱布局结构，也无法处理Android端的重叠问题。

解决方法 #

直接给Border控件设置Padding属性，值与StrokeThickness保持一致（此处为5），让内部内容和边框之间留出足够间距，两端的重叠问题可一次性解决，且无需修改内部布局结构。

修改后的完整代码：

<VerticalStackLayout Padding="30">
    <Border StrokeShape="RoundRectangle 20" 
            StrokeThickness="5" 
            Stroke="Black"
            Padding="5"> <!-- 新增该行，值与StrokeThickness一致 -->
        <VerticalStackLayout>
            <Label Padding="0,0,0,20" TextColor="Red" Text="Header" BackgroundColor="yellow"/>
            <Label Text="Content" />
            <Label Text="Content" />
            <Label Text="Content" />
            <Label Text="Content" />
            <Label TextColor="Red" Text="Content" />
        </VerticalStackLayout>
    </Border>
</VerticalStackLayout>

如果需要更精细的间距控制，也可给Padding设置方向差异化的值（比如Padding="5,10,5,10"），核心是通过Border自身的Padding隔离内容与边框，而非给内部每个控件单独设置。

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