public CollectionCarouselViewGallery() { Title = "Working with ObservableCollections and CarouselView"; BindingContext = new CollectionCarouselViewGalleryViewModel(); var layout = new Grid { RowDefinitions = new RowDefinitionCollection { new RowDefinition { Height = GridLength.Star }, new RowDefinition { Height = GridLength.Auto } } }; var itemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal) { SnapPointsType = SnapPointsType.MandatorySingle, SnapPointsAlignment = SnapPointsAlignment.Center }; var itemTemplate = GetCarouselTemplate(); var carouselView = new CarouselView { HeightRequest = 300, BackgroundColor = Color.Pink, ItemsLayout = itemsLayout, ItemTemplate = itemTemplate, IsScrollAnimated = true, IsBounceEnabled = true, AutomationId = "TheCarouselView", }; carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Items"); var scroll = new ScrollView(); var stack = new StackLayout(); scroll.Content = stack; var lblPosition = new Label { HorizontalOptions = LayoutOptions.Center, BindingContext = carouselView, AutomationId = "lblPosition" }; var lblCenterIndex = new Label { HorizontalOptions = LayoutOptions.Center, BindingContext = carouselView, AutomationId = "lblCenterIndex" }; lblPosition.SetBinding(Label.TextProperty, nameof(CarouselView.Position)); carouselView.Scrolled += (s, e) => { lblCenterIndex.Text = $"First {e.FirstVisibleItemIndex} CenterIndex: {e.CenterItemIndex} Last: {e.LastVisibleItemIndex}"; }; var clearButton = new Button { Text = "Clear" }; clearButton.SetBinding(Button.CommandProperty, "ClearCommand"); var newObservableButton = new Button { Text = "Set new ObservableCollection", AutomationId = "btnNewObservable" }; newObservableButton.SetBinding(Button.CommandProperty, "NewObservableCommand"); var addObservableButton = new Button { Text = "Add new Items to ObservableCollection", AutomationId = "btnAddObservable" }; addObservableButton.SetBinding(Button.CommandProperty, "NewItemsObservableCommand"); var threadObservableButton = new Button { Text = "Use ObservableCollection (Threads)" }; threadObservableButton.SetBinding(Button.CommandProperty, "TheadCommand"); stack.Children.Add(lblPosition); stack.Children.Add(lblCenterIndex); stack.Children.Add(clearButton); stack.Children.Add(newObservableButton); stack.Children.Add(addObservableButton); stack.Children.Add(threadObservableButton); layout.Children.Add(carouselView, 0, 0); layout.Children.Add(scroll, 0, 1); Content = layout; }
public CollectionCarouselViewGallery() { Title = "Working with ObservableCollections and CarouselView"; BindingContext = new CollectionCarouselViewGalleryViewModel(); var layout = new Grid { RowDefinitions = new RowDefinitionCollection { new RowDefinition { Height = GridLength.Star }, new RowDefinition { Height = GridLength.Auto } } }; var itemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal) { SnapPointsType = SnapPointsType.MandatorySingle, SnapPointsAlignment = SnapPointsAlignment.Center }; var itemTemplate = GetCarouselTemplate(); var carouselView = new CarouselView { HeightRequest = 300, BackgroundColor = Color.Pink, ItemsLayout = itemsLayout, ItemTemplate = itemTemplate, IsScrollAnimated = true, IsBounceEnabled = true }; carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Items"); var scroll = new ScrollView(); var stack = new StackLayout(); scroll.Content = stack; var clearButton = new Button { Text = "Clear" }; clearButton.SetBinding(Button.CommandProperty, "ClearCommand"); var newObservableButton = new Button { Text = "Set new ObservableCollection" }; newObservableButton.SetBinding(Button.CommandProperty, "NewObservableCommand"); var addObservableButton = new Button { Text = "Add new Items to ObservableCollection" }; addObservableButton.SetBinding(Button.CommandProperty, "NewItemsObservableCommand"); var threadObservableButton = new Button { Text = "Use ObservableCollection (Threads)" }; threadObservableButton.SetBinding(Button.CommandProperty, "TheadCommand"); stack.Children.Add(clearButton); stack.Children.Add(newObservableButton); stack.Children.Add(addObservableButton); stack.Children.Add(threadObservableButton); layout.Children.Add(carouselView, 0, 0); layout.Children.Add(scroll, 0, 1); Content = layout; }