FlexLayout - System.Exception Message=something is deeply wrong

larry leach 91 Reputation points
2021-03-02T01:38:53.627+00:00

I'm attempting to rewrite a page (ContentView, actually) built with grids--replacing all grids with FlexLayouts. While admittedly a newbie, it seems obvious Xamarin wasn't prepared for what I've written. Sorry for the long piece of code that follows.

This works fine (other than being a visual mess...one thing at a time):

         <FlexLayout x:DataType="viewModels:RotationBaseViewModel"
                AlignItems="Center"
                BackgroundColor="DarkBlue"
                Direction="Column"
                JustifyContent="SpaceEvenly">

        <!--  Player  -->
        <FlexLayout BackgroundColor="DarkGreen"
                    Direction="Row"
                    FlexLayout.Grow="1"
                    HeightRequest="50">
            <Label FlexLayout.Grow="1"
                   Style="{StaticResource SmallLabelStyle}"
                   Text="Player:"
                   VerticalOptions="Center" />
            <input:RadListPicker DisplayLabelStyle="{StaticResource displayLabelStyle}"
                                 FlexLayout.Grow="1"
                                 HeightRequest="35"
                                 IsVisible="{Binding SelectPlayerIsEnabled}"
                                 ItemStyle="{StaticResource ItemStyle}"
                                 ItemsSource="{Binding PlayerList}"
                                 Placeholder="Select a Player"
                                 PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                                 SelectedItem="{Binding CurrentPlayer, Mode=TwoWay}"
                                 SelectedItemStyle="{StaticResource SelectedItemStyle}"
                                 VerticalOptions="Center" />
            <Label FlexLayout.Grow="1"
                   FontAttributes="Bold"
                   IsVisible="{Binding SelectPlayerIsEnabled, Converter={converters:BooleanConverter}}"
                   Style="{StaticResource SelectedEntityLabelStyle}"
                   Text="{Binding CurrentPlayer}"
                   VerticalOptions="Center" />
        </FlexLayout>
        <!--  Game and Inning  -->
        <FlexLayout AlignContent="Stretch"
                    BackgroundColor="AliceBlue"
                    Direction="Row"
                    HeightRequest="50"
                    JustifyContent="SpaceEvenly">
            <FlexLayout AlignContent="Stretch"
                        BackgroundColor="Aquamarine"
                        Direction="Row"
                        Grow="1"
                        HeightRequest="50"
                        JustifyContent="SpaceEvenly"
                        VerticalOptions="Center">
                <Label Style="{StaticResource SmallLabelStyle}"
                       Text="Game:"
                       VerticalOptions="Center" />
                <input:RadListPicker DisplayLabelStyle="{StaticResource displayLabelStyle}"
                                     HeightRequest="35"
                                     IsVisible="{Binding SelectGameIsEnabled}"
                                     ItemStyle="{StaticResource ItemStyle}"
                                     ItemsSource="{Binding Games}"
                                     Placeholder="Select a Game"
                                     PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
                                     SelectedItem="{Binding Game, Mode=TwoWay}"
                                     SelectedItemStyle="{StaticResource SelectedItemStyle}"
                                     VerticalOptions="Center">
                    <VisualElement.Behaviors>
                        <common:RadEventToCommandBehavior Command="{Binding GameSelectionChangedCommand}" EventName="SelectionChanged" />
                    </VisualElement.Behaviors>
                </input:RadListPicker>
                <Label IsVisible="{Binding SelectGameIsEnabled, Converter={converters:BooleanConverter}}"
                       Style="{StaticResource SelectedEntityLabelStyle}"
                       Text="{Binding Game}" />
            </FlexLayout>
            <FlexLayout AlignContent="Stretch"
                        BackgroundColor="Bisque"
                        Direction="Row"
                        Grow="1"
                        HeightRequest="50"
                        JustifyContent="SpaceEvenly"
                        VerticalOptions="Center">
                <Label Style="{StaticResource SmallLabelStyle}"
                       Text="Inning:"
                       VerticalOptions="Center" />
                <Label Margin="0,0,0,0"
                       FontAttributes="Bold"
                       Style="{StaticResource SelectedEntityLabelStyle}"
                       Text="{Binding InningNumber}"
                       VerticalOptions="Center" />
            </FlexLayout>
        </FlexLayout>
        <!--  Balls Left and Save Inning Button  -->
        <FlexLayout AlignContent="Stretch"
                    BackgroundColor="CadetBlue"
                    Direction="Row"
                    Grow="1"
                    HeightRequest="50"
                    JustifyContent="SpaceEvenly">
            <FlexLayout AlignContent="Stretch"
                        BackgroundColor="CadetBlue"
                        Direction="Row"
                        Grow="1"
                        JustifyContent="SpaceEvenly">
                <Label Style="{StaticResource SmallLabelStyle}"
                       Text="Balls Left:"
                       VerticalOptions="Center" />
                <input:RadNumericInput ControlTemplate="{StaticResource CustomRadNumericInputControlTemplate}"
                                       HeightRequest="35"
                                       Maximum="{Binding MaxBallsLeft}"
                                       Minimum="0"
                                       WidthRequest="175"
                                       Value="{Binding BallsLeft, Mode=TwoWay}" />
            </FlexLayout>
            <FlexLayout AlignContent="End"
                        BackgroundColor="CadetBlue"
                        Direction="Row"
                        Grow="1"
                        JustifyContent="End">
                <input:RadButton Command="{Binding SaveInningCommand}"
                                 HorizontalOptions="Center"
                                 Text="{Binding SaveInningButtonText}"
                                 VerticalOptions="Center"
                                 WidthRequest="70" />
            </FlexLayout>
        </FlexLayout>

However, adding this code to the end (i.e., before the last </FlexLayout>) causes the error:

            <!--  isBreak and Previous Inning Button  -->
            <FlexLayout AlignContent="Stretch"
                        BackgroundColor="AliceBlue"
                        Direction="Row"
                        Grow="1"
                        HeightRequest="50"
                        JustifyContent="SpaceEvenly"
                        Wrap="Wrap">
                <FlexLayout AlignContent="Stretch"
                            BackgroundColor="Aqua"
                            Direction="Row"
                            Grow="1"
                            JustifyContent="SpaceEvenly">
                    <Label Style="{StaticResource SmallLabelStyle}"
                           Text="Break:"
                           VerticalOptions="Center" />
                    <primitives:RadCheckBox IsChecked="{Binding IsBreakShot}" />
                </FlexLayout>
                <FlexLayout AlignContent="Stretch"
                            BackgroundColor="Bisque"
                            Direction="Row"
                            Grow="1"
                            JustifyContent="SpaceEvenly">
                    <input:RadButton Command="{Binding InningPrevCommand}"
                                     HorizontalOptions="End"
                                     Text="&lt;"
                                     VerticalOptions="Center" />
                </FlexLayout>
            </FlexLayout>

I've noticed I have to use HeightRequest to get any nested FlexLayout to display...
I've tried a few things but without revamping design... is there some inherent reason this won't work? This happens on IOS, Android, and UWP.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,362 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.