Как я могу визуально сделать мой выбранный элемент в CollectionView (горизонтальный), чтобы он отображался в центре моего экрана?

Question

у меня есть с некоторыми элементами, и когда я выбираю один из этих элементов, я перемещаюсь на новую страницу с горизонтальным , с моим в качестве элемента, который я выбрал на странице ранее. У меня эта часть работает.

Моя проблема в том, что если элемент, который я выбрал на странице раньше, находится слишком далеко вправо (для его доступа нужно прокручивать), то мой не будет автоматически отображаться на экране.

Изображение с видимым выбранным элементом:

Изображение, на котором выбранный элемент не виден:

Как видите, когда я выбрал пункт «кошка 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. Я использую, например, 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();