MAUI中Windows平台CarouselView滚动时IndicatorView不自动更新问题

问题描述 #

在MAUI测试应用中使用CarouselView时出现平台差异问题：

• Android平台：滑动切换CarouselView项目，IndicatorView能正常同步更新选中状态
• Windows平台：滚动切换CarouselView项目，IndicatorView不会自动更新，但点击指示器可正常导航到对应项目

复现代码 #

<ScrollView>
    <Grid BackgroundColor="LightCoral">
        <Grid.RowDefinitions>                
            <RowDefinition Height="410"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>          
        <CarouselView ItemsSource="{Binding CarouselGrids}" IndicatorView="indic"
                      HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="400"
                      Loop="False" BackgroundColor="PaleGoldenrod">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <!-- 项目内容 -->
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>            
        <IndicatorView Grid.Row="1" HorizontalOptions="Center" IndicatorSize="22" IndicatorsShape="Circle"
                       IndicatorColor="Gainsboro" SelectedIndicatorColor="#006EFF"
                       x:Name="indic" />            
    </Grid>
</ScrollView>

问题演示 #

修复方案 #

这是MAUI Windows平台上CarouselView与IndicatorView联动的已知兼容性问题，提供两种可行修复方式：

方式1：双向绑定同步选中状态

给CarouselView添加x:Name，让IndicatorView的SelectedIndex与CarouselView的Position双向绑定：

<CarouselView x:Name="carousel"
              ItemsSource="{Binding CarouselGrids}" 
              IndicatorView="indic"
              HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="400"
              Loop="False" BackgroundColor="PaleGoldenrod">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <!-- 项目内容 -->
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>            
<IndicatorView Grid.Row="1" HorizontalOptions="Center" IndicatorSize="22" IndicatorsShape="Circle"
               IndicatorColor="Gainsboro" SelectedIndicatorColor="#006EFF"
               x:Name="indic" 
               SelectedIndex="{Binding Source={x:Reference carousel}, Path=Position, Mode=TwoWay}" />

方式2：代码后台手动同步

在XAML的CarouselView中添加CurrentItemChanged事件绑定：

<CarouselView x:Name="carousel"
              ItemsSource="{Binding CarouselGrids}" 
              IndicatorView="indic"
              HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="400"
              Loop="False" BackgroundColor="PaleGoldenrod"
              CurrentItemChanged="CarouselView_CurrentItemChanged">
    <!-- 其余代码不变 -->
</CarouselView>

然后在代码后台实现事件处理逻辑：

private void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    if (carousel != null && indic != null)
    {
        indic.SelectedIndex = carousel.Position;
    }
}

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