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

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

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

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

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

Как видите, когда я выбрал элемент категории 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");

            }
        }

xamarin.forms c# xaml xamarin.forms.listview xamarin.forms.collectionview
person Daniel Cabral    schedule 04.03.2021    source источник
comment
@Cfun Сделали это сейчас!   -  person Daniel Cabral    schedule 04.03.2021

Ответы (1)


arrow_upward
1
arrow_downward

Я не уверен, сколько 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();

введите здесь описание изображения

person Wendy Zang - MSFT    schedule 05.03.2021
comment
Спасибо! Это сработало! - person Daniel Cabral; 05.03.2021