如何在屏幕中央显示 CollectionView（水平）中的 Selected Item？

Question

我有一个 ListView 和一些项目，当我 select 其中一个项目时，我被移动到一个水平 CollectionView 的新页面，我的 SelectedItem 作为我之前在页面上 select 编辑的项目。我有这部分工作。

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

包含可见 selected 项目的图像：

图像中 selected 项目不可见：

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

我想要的结果是，一旦某个项目从之前的页面 select 编辑，它将始终立即显示在下一页上。

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

我的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();

如何在屏幕中央显示 CollectionView（水平）中的 Selected Item？

How can I visually make my Selected Item in a CollectionView (Horizontal), show at the center of my screen?

c#

xaml

xamarin.forms

xamarin.forms.listview

xamarin.forms.collectionview