Programmatically modification of CarouselView

Question

I have a CarouselView inside a ScrollView. To control the height I calculate it and modify it programmatically. It almost works, but the problem however is that it only works when the height is increased not when the height is decreased.

CarouselView

<CarouselView x:Name="cv" HeightRequest="8"  ItemsSource="{Binding Challenge.ChallengeParts}" VerticalOptions="Center" ItemTemplate="{StaticResource ChallengePartTemplate}" Position="{Binding PageCarouselPosition}" Grid.Row="0" Grid.Column="1"></CarouselView>```

DataTemplate

<DataTemplate x:Key="ChallengePartTemplate">
  <StackLayout BackgroundColor="LimeGreen" VerticalOptions="Center">
      <Grid x:Name="rulesGrid">
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="20" />
          </Grid.ColumnDefinitions>
          <StackLayout x:Name="toggleShowRules" Grid.Column="0" Grid.Row="0">
              <Label x:Name="showRulesText" Text="Vis regler fra video" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
          <StackLayout.GestureRecognizers>
              <TapGestureRecognizer Command="{Binding Source={x:Reference thisPage}, Path=BindingContext.ToggleShowRulesTappedCommand}" />
          </StackLayout.GestureRecognizers>
          </StackLayout>
          <Label Text="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules,Converter={StaticResource CaretConverter}}" FontFamily="{StaticResource FontAwesomeSolid}" Grid.Column="1" Grid.Row="0" HorizontalTextAlignment="End" />
      </Grid>
      <StackLayout x:Name="showRulesStack" IsVisible="{Binding Source={x:Reference thisPage}, Path=BindingContext.ShowRules}">
          <Grid Margin="20, 0, 0, 0">
              <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="50" />
                  <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
              </Grid.RowDefinitions>
              <!--Antal spillere-->
              <StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="0">
                  <Label Text="&#xf183;" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
                  <Label Text="&#xf182;" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
              </StackLayout>
              <StackLayout x:Name="numPlayersText" Spacing="0" Grid.Column="1" Grid.Row="0">
                  <Label Text="Antal spillere:" FontAttributes="Bold" FontSize="Micro" />
                  <Label Text="{Binding NumPlayers}" FontSize="Micro" />
              </StackLayout>
              <!--Nødvendigt udstyr-->
              <StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="1">
                  <Label Text="&#xf45d;" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
              </StackLayout>
              <StackLayout Spacing="0" Grid.Column="1" Grid.Row="1">
                  <Label Text="Nødvendigt udstyr:" FontAttributes="Bold" FontSize="Micro" />
                  <StackLayout BindableLayout.ItemsSource="{Binding NeededAccesories}" Spacing="0">
                      <BindableLayout.ItemTemplate>
                          <DataTemplate>
                              <Label Text="{Binding .}" FontSize="Micro" />
                          </DataTemplate>
                      </BindableLayout.ItemTemplate>
                  </StackLayout>
              </StackLayout>
              <!--Regler-->
              <StackLayout Orientation="Horizontal" Grid.Column="0" Grid.Row="2">
                  <Label Text="&#xf46d;" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="30" />
              </StackLayout>
              <StackLayout Grid.Column="1" Grid.Row="2">
                  <Label Text="Regler:" FontAttributes="Bold" FontSize="Micro" />
                  <StackLayout BindableLayout.ItemsSource="{Binding Rules}" Spacing="0">
                      <BindableLayout.ItemTemplate>
                          <DataTemplate>
                              <Label Text="{Binding .}" FontSize="Micro" />
                          </DataTemplate>
                      </BindableLayout.ItemTemplate>
                  </StackLayout>
              </StackLayout>
          </Grid>
      </StackLayout>
  </StackLayout>
</DataTemplate>

Code behind

var cvVisibleViews = cv.VisibleViews;
if(cvVisibleViews.Count > 0)
{
    var rulesStack = cvVisibleViews[0].FindByName<StackLayout>("showRulesStack");
    var toggleShowRules = cvVisibleViews[0].FindByName<StackLayout>("toggleShowRules");
    var showRulesText = cvVisibleViews[0].FindByName<Label>("showRulesText");

    double height = 0;
    height = height + toggleShowRules.Height;
    height = height + showRulesText.Height;
    if (rulesStack.IsVisible && rulesStack.Height > -1)
    {
        height = height + rulesStack.Height;
    }
    
    cv.HeightRequest = height;
}

It seems like the new height of the CarouselView is measured from the center of it. Like the content is placed outside above the CarouselView

Any idea to realign the content inside the resized CarouselView?

Thanks a lot!