FlexLayout - System.Exception Message=something is deeply wrong
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="<"
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.