CarouselView程序化修改高度后内容错位问题求助

在ScrollView中嵌套CarouselView，通过代码计算并设置HeightRequest控制其高度时，高度增加正常，但高度减小时失效，且调整后内容从CarouselView中心开始布局，导致内容偏移到控件上方。相关代码如下，求解决内容重新对齐的方法。

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>

后台代码 #

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;
}

问题截图 #

1. 修复高度减小失效问题 #

设置HeightRequest后，布局系统可能不会主动响应高度减小的变化，需要强制控件重新布局。在设置cv.HeightRequest = height;后添加：

cv.ForceLayout();
// 若仍不生效，可尝试刷新父ScrollView的布局
((ScrollView)cv.Parent).ForceLayout();

2. 解决内容偏移问题 #

偏移的核心原因是两处VerticalOptions设置为Center，导致内容居中而非顶部对齐：

• 修改CarouselView的VerticalOptions为Start：

  <CarouselView ... VerticalOptions="Start" ...></CarouselView>
  

• 修改DataTemplate根StackLayout的VerticalOptions为Start：

  <DataTemplate x:Key="ChallengePartTemplate">
    <StackLayout BackgroundColor="LimeGreen" VerticalOptions="Start">
      <!-- 原有内容 -->
    </StackLayout>
  </DataTemplate>
  

3. 优化高度计算逻辑 #

原代码重复累加了子元素高度（showRulesText是toggleShowRules的子元素），导致高度计算错误。改用更可靠的方式：

var cvVisibleViews = cv.VisibleViews;
if(cvVisibleViews.Count > 0)
{
    var rootLayout = cvVisibleViews[0] as StackLayout;
    // 使用Measure方法获取控件预期高度
    var desiredSize = rootLayout.Measure(cv.Width, double.PositiveInfinity);
    cv.HeightRequest = desiredSize.Request.Height;
    cv.ForceLayout();
}

内容的提问来源于stack exchange，提问作者Kasper Sommer