I have MAUI app that is complete, that was working as expected. I just upgraded Visual Studio 2022 from 17.3.0 Preview 3.0 to 17.4.0 Preview 1.0. Now the FlexLayout view I'm using is no longer wrapping content.
Here is the tag for my FlexLayout control:
<FlexLayout
x:Name="BadgesView"
Wrap="Wrap"
Margin="{x:Static thepage:MyStuffPageCustom.FLEX_MARGIN}"
AlignContent="Stretch"
JustifyContent="SpaceBetween">
</FlexLayout>
I'm at a complete loss for what to do now. It is not wrapping on my emulated Android and iOS devices, as well as my physical iOS device; basically on nothing - all devices where it was working previously. How are we supposed to troubleshoot or fix this one?
UPDATE
I recreated this in a new MAUI project. Here's the full code.
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppWrap.MainPage">
<ScrollView>
<Grid
x:Name="BadgesGrid"
RowDefinitions="Auto,Auto"
ColumnDefinitions="*">
<Border
Grid.Row="0"
Grid.Column="0"
Stroke="{StaticResource FriendCard}"
StrokeThickness="3"
Margin="3,5,3,10">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<FlexLayout
x:Name="BadgesView"
Wrap="Wrap"
Margin="10,0,10,0"
AlignContent="Stretch"
JustifyContent="SpaceBetween">
</FlexLayout>
<HorizontalStackLayout
x:Name="NextBadgeHorzLayout"
Margin="0,10,0,0">
<Label
Text="NEXT BADGE:"
FontSize="Medium"
FontAttributes="Bold"
Margin="10,0,0,4"
TextColor="Orange" />
<Label
x:Name="NextBadgeLevelLabel"
Margin="3,-3,0,0" FontSize="Small"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap"
Text="MY NEXT BADGE"
Style="{StaticResource MetricsLabel}" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
</Grid>
</ScrollView>
</ContentPage>
CODE BEHIND:
protected override void OnNavigatedTo(NavigatedToEventArgs args)
{
base.OnNavigatedTo(args);
for(int i = 0; i < 15; i++)
{
VerticalStackLayout vsl = new VerticalStackLayout();
Border bord = new Border()
{
Stroke = Color.FromArgb("#e6b800"),
StrokeThickness = 3,
BackgroundColor = Color.FromArgb("#ffcc00"),
HeightRequest = 48,
WidthRequest = 48,
StrokeShape = new Microsoft.Maui.Controls.Shapes.RoundRectangle
{
CornerRadius = new CornerRadius(50)
}
};
Image im = new Image()
{
Source = ImageSource.FromFile($"circle_badge1.png"),
HeightRequest = 32,
WidthRequest = 32,
Margin = new Thickness(5),
Aspect = Aspect.AspectFill
};
bord.Content = im;
Label l = new Label()
{
Text = $"MY TEST {i}",
FontSize = 10,
TextColor = Color.FromArgb("#e67e00"),
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center,
FontAttributes = FontAttributes.Bold,
Padding = new Thickness(3)
};
vsl.Add(bord);
vsl.Add(l);
BadgesView.Add(vsl);
}
}
Here's the circle badge in case you want to see or use it:
Here's how it actually renders now that VS has been upgraded to 17.4:
Here's how this kind of thing looks on the previous version, from an iPhone emulator:
Again, no code changes - just upgraded to 17.4 and world imploded.


