如何在 CollectionView（水平）中直观地使我的选定项目显示在我的屏幕中心？

Question

我有一个包含一些项目的ListView ，当我 select 其中一个项目时，我被移动到一个带有 Horizontal CollectionView的新页面，其中我的SelectedItem作为我之前在页面上选择的项目。 我有这部分工作。

我的问题是，如果我之前在页面上选择的项目离右侧太远（必须滚动才能到达它），那么我的SelectedItem将不会自动显示在屏幕上。

带有可见所选项目的图像：

所选项目不可见的图像：

如您所见，当我选择项目“cat 7”时，它在页面上不可见。

我想要的结果是，一旦从之前的页面中选择了一个项目，它将始终立即在下一页上可见。

有人知道我可以达到这个结果的方法吗？

我的 xaml：

    <CollectionView ItemsSource="{Binding CategorieList}"
                            ItemsLayout="HorizontalList"
                            x:Name="CategoryList"
                            VerticalOptions="Start"
                            Margin="0,22,0,0"
                            HeightRequest="32"
                            SelectionMode="Single"
                            SelectedItem="{Binding CategorieListSelectedItem, Mode=TwoWay}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="transparent" />
                                            <Setter TargetName="SelectedLabel" Property="Label.TextColor" Value="#004EFF"/>
                                            <Setter TargetName="SelectedLabel" Property="Label.FontSize" Value="22"/>
                                            <Setter TargetName="SelectedLabel" Property="Label.Margin" Value="20,-2,20,0"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        
                        <Label Text="{Binding Name}"
                               x:Name="SelectedLabel"
                               Margin="20,0,20,0"
                               TextColor="#707070"
                               FontSize="20"
                               FontFamily="{StaticResource Helvetica}"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

我的视图模型：

    public Categories CategorieListSelectedItem
        {
            get
            {
                return categorieListSelectedItem;
            }
            set
            {
                categorieListSelectedItem = value;
                OnPropertyChanged("CategorieListSelectedItem");

                ProductList.Clear();
                if(categorieListSelectedItem.Products != null)
                {
                    foreach (var item in CategorieListSelectedItem.Products)
                    {
                        productList.Add(new ProductDetailsViewModel(item));                        
                    }
                }
                OnPropertyChanged("ProductList");

            }
        }

Answer 1

我不确定您的CategorieList中有多少Name 。 我以 8 为例。 当计数不够时， Name会显示但不在中心。

public partial class Page3 : ContentPage
{
    public ObservableCollection<Categories> CategorieList { get; set; }
    public Categories SelectedCategorie { get; set; }
    public Page3()
    {
        InitializeComponent();
        CategorieList = new ObservableCollection<Categories>()
        {
            new Categories(){ Name="cat 1"},
            new Categories(){ Name="cat 2"},
            new Categories(){ Name="cat 3"},
            new Categories(){ Name="cat 4"},
            new Categories(){ Name="cat 5"},
            new Categories(){ Name="cat 6"},
            new Categories(){ Name="cat 7"},
            new Categories(){ Name="cat 8"},
            //new Categories(){ Name="cat 9"},
            //new Categories(){ Name="cat 10"},
            //new Categories(){ Name="cat 11"},
        };
        SelectedCategorie = CategorieList.Skip(6).FirstOrDefault();

        this.BindingContext = this;
    }
    protected override void OnAppearing()
    {

        CategoryList.ScrollTo(CategoryList.SelectedItem, null, ScrollToPosition.Center, false);

    }
}
public class Categories
{
    public string Name { get; set; }
}

SelectedItem 是cat4 ：

 CategorieListSelectedItem = CategorieList.Skip(3).FirstOrDefault();

SelectedItem 是cat7 ：

  CategorieListSelectedItem = CategorieList.Skip(6).FirstOrDefault();