如何更改 CarouselView 中的 CurrentItem?

问题描述 投票:0回答:1

我对 MAUI 应用程序相当陌生,我拥有的是绑定到学生集合的 CarouselView。一切工作正常,但是我有一个似乎很普遍的问题 - 我有一个“下一个”和“上一个”按钮,我想用它们从轮播中的一个项目导航到下一个项目。 “上一个”按钮工作正常,但“下一个”按钮的行为不符合预期。例如,如果我的集合中有 3 个学生,我就无法顺利地从学生 1(位置 0)导航到学生 2(位置 1)。我必须单击“下一步”按钮两次,只有在第三次单击时,它才最终移动到学生 2。它不断重置回学生 1。我在调试模式下监视了行为,我可以看到预览中的当前项目确实当我调试 NextButton_Clicked 方法时确实发生了变化,但是一旦调试退出该方法,CurrentItem 就会重置回学生 1(位置 0)。正如我所提到的,我的 Students 集合工作正常,数据符合预期,并且我没有任何其他(可见)触发器可能会覆盖 CurrentItem 更改。作为参考,我在代码隐藏中的方法如下;

private void NextButton_Clicked(object sender, EventArgs e)
{
    if (StudentCarousel.ItemsSource is IList<Student> students)
    {
        int studentCount = students.Count;
        int nextPosition = (CurrentPosition + 1) % studentCount;

        Debug.WriteLine($"NextButton_Clicked: Setting Position to {nextPosition}");

        // Update Position before CurrentItem
        CurrentPosition = nextPosition;
        StudentCarousel_CurrentItem = students[nextPosition];

    }
}
private void StudentCarousel_PositionChanged(object sender, PositionChangedEventArgs e)
{
    Debug.WriteLine($"PositionChanged Event: New Position = {e.CurrentPosition}");
}

private void CarouselView_CurrentItemChanged(System.Object sender, Microsoft.Maui.Controls.CurrentItemChangedEventArgs e)
{
    if (e.CurrentItem is Student currentStudent)
    {
        CurrentItem = currentStudent;
    }
}

我还有以下内容;

public ObservableCollection<Student> Students { get; set; } = new ObservableCollection<Student>();

private int _currentPosition;

public int CurrentPosition
{
    get => _currentPosition;
    set
    {
        if (_currentPosition != value)
        {
            _currentPosition = value;
            OnPropertyChanged(nameof(CurrentPosition));
            Debug.WriteLine($"CurrentPosition set to: {_currentPosition}");
        }
    }
}

private Student _studentCarousel_CurrentItem;

public Student StudentCarousel_CurrentItem
{
    get => _studentCarousel_CurrentItem;
    set
    {
        if (_studentCarousel_CurrentItem != value)
        {
            _studentCarousel_CurrentItem = value;
            OnPropertyChanged(nameof(StudentCarousel_CurrentItem));
        }
    }
}

下面是.xaml代码;

     <Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Margin="5" BorderColor="Gray" BackgroundColor="White" HasShadow="True" HeightRequest="250" WidthRequest="300"
HorizontalOptions="Center" VerticalOptions="Center">
         <StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
             <!-- CarouselView -->
             <RefreshView>
                 <CarouselView x:Name="StudentCarousel" ItemsSource="{Binding Students}" Loop="True"
               HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
               HeightRequest="250" WidthRequest="300" IndicatorView="CarouselIndicator"  IsScrollAnimated="True" CurrentItem="{Binding StudentCarousel_CurrentItem, Mode=TwoWay}" CurrentItemChanged="CarouselView_CurrentItemChanged" Position="{Binding CurrentPosition, Mode=TwoWay}" PositionChanged="StudentCarousel_PositionChanged" >
                     <CarouselView.ItemTemplate>
                         <DataTemplate>
                             <Grid Padding="10" RowSpacing="5" ColumnSpacing="10" HorizontalOptions="Center" VerticalOptions="Center">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition Height="Auto" />
                                 </Grid.RowDefinitions>
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>

                                 <!-- Image -->
                                 <Image Source="student_icon.png" Grid.Row="0" Grid.Column="0" HeightRequest="40" WidthRequest="40" HorizontalOptions="Center" />

                                 <!-- Label: Student Info -->
                                 <Label Text="Student Info" Grid.Row="1" Grid.Column="0" FontAttributes="Bold" FontSize="Small" HorizontalOptions="Center" VerticalOptions="Center" />

                                 <!-- Label: Full Name -->
                                 <Label Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center">
                                     <Label.FormattedText>
                                         <FormattedString>
                                             <Span Text="FullName: " FontAttributes="Bold" />
                                             <Span Text="{Binding FullNameWithMiddleName}" />
                                         </FormattedString>
                                     </Label.FormattedText>
                                 </Label>
                             </Grid>
                         </DataTemplate>
                     </CarouselView.ItemTemplate>
                 </CarouselView>
             </RefreshView>
             <!-- Navigation Buttons -->
             <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,10,0,0">
                 <Button x:Name="PreviousButton" Text="Previous" Clicked="PreviousButton_Clicked" />
                 <Button x:Name="NextButton" Text="Next" Clicked="NextButton_Clicked" Margin="10,0,0,0" />
             </StackLayout>
         </StackLayout>
     </Frame>

我完全陷入困境,不知道我哪里出了问题。任何建议表示赞赏。

xaml maui carousel currentitem
1个回答
0
投票

这是我的解决方案。我删除了 currentItem 并将其更改为 Student_CurrentItem。

private void CarouselView_CurrentItemChanged(System.Object sender, Microsoft.Maui.Controls.CurrentItemChangedEventArgs e)
{
    if (e.CurrentItem is Student currentStudent)
    {
        Student_CurrentItem = currentStudent;
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.