FlexLayout No Longer Wraps After Upgrading Visual Studio to 17.4.0 Preview 1.0

Viewed 112

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:

enter image description here

Here's how it actually renders now that VS has been upgraded to 17.4:

enter image description here

Here's how this kind of thing looks on the previous version, from an iPhone emulator:

enter image description here

Again, no code changes - just upgraded to 17.4 and world imploded.

0 Answers
Related