[question] Nested stack layouts in Xamarin.Forms

HorizontalStackControl.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="PracticeDashboard.Views.SalesPipeline.SelectedMonthNumbersPanel">
    
	<ContentView.Content>

            <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                <BoxView Color="Red" HeightRequest="60"/>
                <BoxView Color="Green" HeightRequest="60" />
                <BoxView Color="Blue" HeightRequest="60" />
                <BoxView Color="Cyan"  HeightRequest="60"/>
            </StackLayout>
        
	</ContentView.Content>
    
</ContentView>

NestedStackLayout.cs

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:oxy="clr-namespace:PracticeDashboard.OxyPlot;assembly=PracticeDashboard"
             xmlns:pd_sales_pipeline="clr-namespace:PracticeDashboard.Views.SalesPipeline;assembly=PracticeDashboard"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="PracticeDashboard.Views.PipelineDetailPage"
             Title="Pipeline Details">

  <AbsoluteLayout>
    <Grid Style="{StaticResource AbsoluteSubViewStyle}">
      <ScrollView 
                HorizontalOptions="Fill" 
                VerticalOptions="StartAndExpand"
                BackgroundColor="#efeff4">
                
        <StackLayout>


<!-- -->                    
          <BoxView Style="{StaticResource ChartSeparatorViewStyle}" 
                   Color="Silver"/>
          <Label 
                Text="Opportunities Burnup"
                Margin="20, 0" />
          <oxy:PlotView 
                    Model="{Binding OpportunitiesBurnupModel}" 
                    Style="{StaticResource PlotStyle}"
                    Margin="20, 0" />

<!-- -->
                    
<!--                    
 Hex Color from design document is ignored for some reason.
 So "silver" is used a s a fallback.
                    
            <BoxView Style="{StaticResource ChartSeparatorViewStyle}" 
            Color="#EFEFF4" />
-->
          <BoxView Style="{StaticResource ChartSeparatorViewStyle}" 
                   Color="Silver" />
          <Label 
                Text="Clients Acquired Burnup"
                Margin="20, 0"/>

          <oxy:PlotView 
              Model="{Binding ClientsAcquiredModel}" 
              Style="{StaticResource PlotStyle}"
              Margin="20, 0" />


                    
<!-- -->
          <BoxView Style="{StaticResource ChartSeparatorViewStyle}"
                   Color="Silver" />

          <Label Text="Sales Pipeline"
                 HorizontalTextAlignment="Center"
                 VerticalTextAlignment="Center"

                 HorizontalOptions="Fill"
                 HeightRequest="56"

                 Font="SFUIText-Regular"
                 FontSize="20"
                 Margin="20, 0"/>
                    
          <RelativeLayout
                  HeightRequest="400"
                  HorizontalOptions="Fill">


<!--         Fill width, constant height         -->
             <oxy:PlotView x:Name="PipelineChart"
                        Model="{Binding SalesPipelineBudgetAmountsModel}" 
                        HeightRequest="400"
                        RelativeLayout.WidthConstraint=
                        "{
                             ConstraintExpression Type=RelativeToParent,
                             Property=Width,
                             Factor=1,
                             Constant=0
                        }"
             />

                        
<!--          Always on top of PlotView        

              amountLabel.y = 25 + (chartView.y * 1)
              amountLabel.x = 20 + (chartView.x * 1)
-->                        
              <Label Text="Amount"
                     FontSize="12"
                     TextColor="#959595"
                            
                    RelativeLayout.YConstraint=
                    "{
                            ConstraintExpression Type=RelativeToView, 
                            ElementName=PipelineChart, 
                            Constant=25, 
                            Property=Y, 
                            Factor=1
                    }"
                            
                    RelativeLayout.XConstraint=
                    "{
                        ConstraintExpression Type=RelativeToView, 
                        ElementName=PipelineChart, 
                        Constant=20, 
                        Property=X, 
                        Factor=1
                    }"
                />


<!--          Slightly under the mid of PlotView        

              countLabel.y = 10 + (chartView.height * 0.5)
              amountLabel.x = 20 + (chartView.x * 1)
-->                        
              <Label Text="Number"
                     FontSize="12"
                     TextColor="#959595"
                            
                    RelativeLayout.YConstraint=
                    "{
                            ConstraintExpression Type=RelativeToView, 
                            ElementName=PipelineChart, 
                            Constant=0, 
                            Property=Height, 
                            Factor=0.5
                    }"
                            
                    RelativeLayout.XConstraint=
                    "{
                        ConstraintExpression Type=RelativeToView, 
                        ElementName=PipelineChart, 
                        Constant=20, 
                        Property=X, 
                        Factor=1
                    }"
                />
                        
          </RelativeLayout>



<!--          [!!!!!] This causes crash [!!!!!]   -->
           <StackLayout 
                 Orientation="Horizontal" 
                 BackgroundColor="Blue"
                 HeightRequest="60"
                 HorizontalOptions="Fill">
    
    <!-- Assuming StackLayout calculated width -->
                <BoxView Color="Red" HeightRequest="60"/>
                <BoxView Color="Green" HeightRequest="60" />
                <BoxView Color="Blue" HeightRequest="60" />
                <BoxView Color="Cyan"  HeightRequest="60"/>
                
            </StackLayout>
                    

<!-- -->
          <BoxView Style="{StaticResource ChartSeparatorViewStyle}"
                   Color="Silver" />                    

                    
        </StackLayout>
      </ScrollView>
    </Grid>


            

        
    <ContentView Style="{StaticResource LoadingSubViewStyle}"
                 IsVisible="{Binding IsBusy}">
            
                  <ActivityIndicator 
                        VerticalOptions="Center" 
                        IsRunning="{Binding IsBusy}" />
    </ContentView>

  </AbsoluteLayout>

</ContentPage>

Similar page

Dotted horizontal scroll inside ScrollView

<ContentPage>
<AbsoluteLayout>
    <Grid>
      <ScrollView HorizontalOptions="Fill" VerticalOptions="StartAndExpand">
        <StackLayout>

          <carousel:CarouselViewControl ItemsSource="{Binding CarouselData}" 
                                        Position="0" 
                                        HeightRequest="125" 
                                        CurrentPageIndicatorTintColor="{StaticResource GreyColor}" 
                                        IndicatorsShape="Circle" 
                                        ShowIndicators="True" 
                                        PageIndicatorTintColor="#f0f0ec"
                                        BackgroundColor="Transparent">
            <carousel:CarouselViewControl.ItemTemplate>
              <DataTemplate>
                <Grid>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="20"/>
                  </Grid.RowDefinitions>
                  
                  <Label Text="{Binding Title}" Margin="0,10,0,0"></Label>
                  
                  <Label Grid.Column="0" Grid.Row="1" 
                         Style="{StaticResource CarouselDataValue}" 
                         Text="{Binding LeftValue}"/>
                  <Label Grid.Column="0" Grid.Row="2" 
                         Style="{StaticResource CarouselDataTitle}" 
                         Text="{Binding LeftTitle}"/>
                  
                  <BoxView  Grid.Column="1" Grid.Row="1" 
                            Grid.RowSpan="2" 
                            VerticalOptions="Fill" 
                            HorizontalOptions="Start" 
                            BackgroundColor="{StaticResource GreyColor}" 
                            WidthRequest="1" 
                            Margin="10,0"/>
                  <Label Grid.Column="1" Grid.Row="1" 
                         Style="{StaticResource CarouselDataValue}" 
                         Text="{Binding MiddleValue}"/>
                  <Label Grid.Column="1" Grid.Row="2" 
                         Style="{StaticResource CarouselDataTitle}" 
                         Text="{Binding MiddleTitle}"/>
                  <BoxView  Grid.Column="1" Grid.Row="1" 
                            Grid.RowSpan="2" 
                            VerticalOptions="Fill" 
                            HorizontalOptions="End" 
                            BackgroundColor="{StaticResource GreyColor}" 
                            WidthRequest="1" 
                            Margin="10,0"/>
                  
                  <Label Grid.Column="2" Grid.Row="1" 
                         Style="{StaticResource CarouselDataValue}" 
                         Text="{Binding RightValue}"/>
                  <Label Grid.Column="2" Grid.Row="2" 
                         Style="{StaticResource CarouselDataTitle}" 
                         Text="{Binding RightTitle}"/>
                </Grid>
              </DataTemplate>
            </carousel:CarouselViewControl.ItemTemplate>
          </carousel:CarouselViewControl>

This "hello world" control works just fine. So there is something wrong about BoxView configuration.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="PracticeDashboard.Views.SalesPipeline.SelectedMonthNumbersPanel">
    
	<ContentView.Content>

    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
        <Label Text="Hello world" TextColor="White"/>
    </StackLayout> 
        
	</ContentView.Content>
    
</ContentView>