如何在 CollectionView水平中可视化地使我的选定项目显示在屏幕中央？

如何解决如何在 CollectionView水平中可视化地使我的选定项目显示在屏幕中央？

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

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

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

所选项目不可见的图像：

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

我想要的结果是，一旦从之前的页面中选择了一个项目，它总是会立即出现在下一个页面上。

有人知道我可以通过什么方式实现这一结果吗？

我的 xaml：

    <CollectionView ItemsSource="{Binding CategorieList}"
                            ItemsLayout="horizontallist"
                            x:Name="CategoryList"
                            VerticalOptions="Start"
                            Margin="0,22,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"
                               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");

            }
        }

解决方法

我不确定您的 Name 中有多少 CategorieList。例如，我使用 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();