在Xamarin c#中滚动到可观察集合中的选定项

Question

我想在集合视图中自动滚动到所选项目。我使用ObservableCollection，我能够在我的视图中预选一个项目。所以我想让它出现在屏幕上，以便在项目很多的情况下可以看到。

所以视图应该自动滚动到选中的项目。

代码

public ObservableCollection WorkerFlockDetails { get; set; }
private WorkerFlock selectedFlock;
public WorkerFlock SelectedFlock
{
get => selectedFlock;
set
{
if (selectedFlock != value)
{
try
{
//Feed = selectedFlock.Feed_intake.ToString() + " Kg";
selectedFlock = value;
}
catch
{
}
finally
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedFlock)));
}
}
}
}

这是我初始化和预选择

的地方

public HomeWorkerViewModel()
{
WorkerFlockDetails = new ObservableCollection<WorkerFlock>();
//populate the collection
Init();

SelectedFlock = WorkerFlockDetails.Skip(3).FirstOrDefault();
}

Answer 1

您可以使用下面的代码并在onappear中设置ScrollTo方法，以便在页面变得可见。

Xaml:

<CollectionView x:Name="collectionView"
ItemsSource="{Binding WorkerFlockDetails}" 
ItemsLayout="HorizontalList" 
SelectionMode="Single"  
VerticalOptions="Start"
Margin="0,22,0,0"
HeightRequest="32"
SelectedItem="{Binding SelectedFlock, Mode=TwoWay}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Label Text="{Binding Name}"  Margin="20,0,20,0"
TextColor="#707070"
FontSize="20"></Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

背后的代码:

public partial class Page19 : ContentPage
{
public ObservableCollection<WorkerFlock> WorkerFlockDetails { get; set; }
public WorkerFlock SelectedFlock { get; set; }
public Page19()
{
InitializeComponent();
WorkerFlockDetails = new ObservableCollection<WorkerFlock>()
{
new WorkerFlock(){ Name="A"},
new WorkerFlock(){ Name="B"},
new WorkerFlock(){ Name="C"},
new WorkerFlock(){ Name="D"},
new WorkerFlock(){ Name="E"},
new WorkerFlock(){ Name="F"},
new WorkerFlock(){ Name="G"}
};
SelectedFlock = WorkerFlockDetails.Skip(3).FirstOrDefault();
this.BindingContext = this; 
}
protected override void OnAppearing()
{
base.OnAppearing();
collectionView.ScrollTo(collectionView.SelectedItem, null, ScrollToPosition.Center, false);
}
}
public class WorkerFlock
{
public string Name { get; set; }
}

Answer 2

你可以使用。scrollto ();