I am trying to make a card like this using XAML in MAUI:
XAML MAUI Card on Android
I am having problems with content overlapping the actual Border (Stroke) on Android Emulator.
When I run it on Windows, it’s vice versa – the content gets overlapped by Border (Stroke) like this:
XAML MAUI Card on Windows
Here’s the code for the card.
<VerticalStackLayout Padding="30">
<Border StrokeShape="RoundRectangle 20" StrokeThickness="5" Stroke="Black">
<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>
To fix this on Windows I can just add padding to first and last elements, but then to line them all up I have to add padding to ALL of them (or at wrap the ones without BackgroundColor with another element and add padding to that element like this) and I end up with quite a mess of elements and paddings like this.
<VerticalStackLayout Padding="30">
<Border StrokeShape="RoundRectangle 20" StrokeThickness="5" Stroke="Black">
<VerticalStackLayout>
<Label Padding="5,0,0,20" TextColor="Red" Text="Header" BackgroundColor="yellow"/>
<VerticalStackLayout Padding="5,0,0,0">
<Label Text="Content" />
<Label Text="Content" />
<Label Text="Content" />
<Label Text="Content" />
<Label TextColor="Red" Text="Content" />
</VerticalStackLayout>
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
While I can fix the problem on Windows, I can’t think of a way of how to fix it on Android.
Why is this happening and how do I fix this problem?
Super Arnold is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.