[英]How can I visually make my Selected Item in a CollectionView (Horizontal), show at the center of my screen?
I have a ListView
with some items, and when I select one of those items, I am moved to a new page with a Horizontal CollectionView
, with my SelectedItem
as the item I selected on the page before.我有一个包含一些项目的
ListView
,当我 select 其中一个项目时,我被移动到一个带有 Horizontal CollectionView
的新页面,其中我的SelectedItem
作为我之前在页面上选择的项目。 I have this part working.我有这部分工作。
My problem is, if the item I selected on the page before is too far to the right, (having to scroll to reach it) then my SelectedItem
won't automatically show on screen.我的问题是,如果我之前在页面上选择的项目离右侧太远(必须滚动才能到达它),那么我的
SelectedItem
将不会自动显示在屏幕上。
Image with visible selected item:带有可见所选项目的图像:
Image where selected item is not visible:所选项目不可见的图像:
As you can see, when I selected the item "cat 7" it is not visible on the page.如您所见,当我选择项目“cat 7”时,它在页面上不可见。
My desired result is that, once an item is selected from the page before, it will always be visible immediately on the following page.我想要的结果是,一旦从之前的页面中选择了一个项目,它将始终立即在下一页上可见。
Does anybody know a way in which I can achieve this result?有人知道我可以达到这个结果的方法吗?
My xaml:我的 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>
My ViewModel:我的视图模型:
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");
}
}
I am not sure how many Name
in your CategorieList
.我不确定您的
CategorieList
中有多少Name
。 I use 8 for example.我以 8 为例。 When the count is not enough, the
Name
would show but not in the center.当计数不够时,
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 is cat4
: SelectedItem 是
cat4
:
CategorieListSelectedItem = CategorieList.Skip(3).FirstOrDefault();
SelectedItem is cat7
: SelectedItem 是
cat7
:
CategorieListSelectedItem = CategorieList.Skip(6).FirstOrDefault();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.