public IndicatorsSample() { Device.SetFlags(new[] { ExperimentalFlags.CarouselViewExperimental, ExperimentalFlags.IndicatorViewExperimental }); InitializeComponent(); BindingContext = new GalleryPages.CollectionViewGalleries.CarouselViewGalleries.CarouselItemsGalleryViewModel(); IndicatorView.SetItemsSourceBy(indicators, carousel); }
public IndicatorsSampleMaximumVisible() { Device.SetFlags(new[] { ExperimentalFlags.CarouselViewExperimental, ExperimentalFlags.IndicatorViewExperimental }); InitializeComponent(); BindingContext = new GalleryPages.CollectionViewGalleries.CarouselViewGalleries.CarouselItemsGalleryViewModel(false, false); }
public CarouselItemsGallery(bool startEmptyCollection = false, bool setCollectionWithAsync = false, bool useNativeIndicators = false, bool setPositionOnConstructor = false, bool setPositionOnAppearing = false, bool useScrollAnimated = true) { _viewModel = new CarouselItemsGalleryViewModel(startEmptyCollection, setCollectionWithAsync); _setPositionOnAppering = setPositionOnAppearing; if (setPositionOnConstructor) { _viewModel.CarouselPosition = 3; } Title = $"CarouselView (Indicators)"; var grid = 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, ItemSpacing = 8 }; var itemTemplate = GetCarouselTemplate(); var carouselView = new CarouselView { ItemsLayout = itemsLayout, ItemTemplate = itemTemplate, IsScrollAnimated = useScrollAnimated, IsBounceEnabled = true, EmptyView = "This is the empty view", PeekAreaInsets = new Thickness(50), }; carouselView.SetBinding(CarouselView.ItemsSourceProperty, nameof(_viewModel.Items)); carouselView.SetBinding(CarouselView.PositionProperty, nameof(_viewModel.CarouselPosition)); var absolute = new AbsoluteLayout(); absolute.Children.Add(carouselView, new Rectangle(0, 0, 1, 1), AbsoluteLayoutFlags.All); var indicators = new IndicatorView { Margin = new Thickness(15, 20), IndicatorColor = Color.Gray, SelectedIndicatorColor = Color.Black, IndicatorsShape = IndicatorShape.Square }; if (!useNativeIndicators) { indicators.IndicatorTemplate = new DataTemplate(() => { return(new Image { Source = new FontImageSource { FontFamily = DefaultFontFamily(), Glyph = "\uf30c", }, }); }); } carouselView.IndicatorView = indicators; absolute.Children.Add(indicators, new Rectangle(.5, 1, -1, -1), AbsoluteLayoutFlags.PositionProportional); grid.Children.Add(absolute, 0, 0); var stacklayoutButtons = new StackLayout { Orientation = StackOrientation.Horizontal }; var addItemButton = new Button { Text = "Add Item" }; addItemButton.Clicked += (sender, e) => { _viewModel.Items.Add(new CarouselData { Color = Color.Red, Name = $"{_viewModel.Items.Count + 1}" }); _viewModel.CarouselPosition = _viewModel.Items.Count - 1; }; var removeItemButton = new Button { Text = "Remove Item" }; removeItemButton.Clicked += (sender, e) => { if (_viewModel.Items.Any()) { _viewModel.Items.RemoveAt(_viewModel.Items.Count - 1); } if (_viewModel.Items.Count > 0) { _viewModel.CarouselPosition = _viewModel.Items.Count - 1; } }; var clearItemsButton = new Button { Text = "Clear Items" }; clearItemsButton.Clicked += (sender, e) => { _viewModel.Items.Clear(); }; var lbl = new Label { AutomationId = "lblPosition" }; lbl.SetBinding(Label.TextProperty, nameof(CarouselView.Position)); lbl.BindingContext = carouselView; stacklayoutButtons.Children.Add(addItemButton); stacklayoutButtons.Children.Add(removeItemButton); stacklayoutButtons.Children.Add(clearItemsButton); stacklayoutButtons.Children.Add(lbl); grid.Children.Add(stacklayoutButtons, 0, 1); Content = grid; BindingContext = _viewModel; }
public CarouselSnapGallery() { On <iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Never); var viewModel = new CarouselItemsGalleryViewModel(); Title = $"CarouselView Snap Options"; var layout = new Grid { RowDefinitions = new RowDefinitionCollection { new RowDefinition { Height = GridLength.Auto }, new RowDefinition { Height = GridLength.Auto }, new RowDefinition { Height = GridLength.Star } } }; var snapPointsStack = new StackLayout { Margin = new Thickness(12) }; var snapPointsLabel = new Label { FontSize = 10, Text = "SnapPointsType:" }; var snapPointsTypes = Enum.GetNames(typeof(SnapPointsType)).Select(b => b).ToList(); var snapPointsTypePicker = new Picker { ItemsSource = snapPointsTypes, SelectedItem = snapPointsTypes[1] }; snapPointsStack.Children.Add(snapPointsLabel); snapPointsStack.Children.Add(snapPointsTypePicker); layout.Children.Add(snapPointsStack, 0, 0); var snapPointsAlignmentsStack = new StackLayout { Margin = new Thickness(12) }; var snapPointsAlignmentsLabel = new Label { FontSize = 10, Text = "SnapPointsAlignment:" }; var snapPointsAlignments = Enum.GetNames(typeof(SnapPointsAlignment)).Select(b => b).ToList(); var snapPointsAlignmentPicker = new Picker { ItemsSource = snapPointsAlignments, SelectedItem = snapPointsAlignments[0] }; snapPointsAlignmentsStack.Children.Add(snapPointsAlignmentsLabel); snapPointsAlignmentsStack.Children.Add(snapPointsAlignmentPicker); layout.Children.Add(snapPointsAlignmentsStack, 0, 1); var itemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal) { SnapPointsType = SnapPointsType.Mandatory, SnapPointsAlignment = SnapPointsAlignment.Start }; var itemTemplate = GetCarouselTemplate(); var carouselView = new CarouselView { ItemsSource = viewModel.Items, ItemsLayout = itemsLayout, ItemTemplate = itemTemplate, BackgroundColor = Color.LightGray, PeekAreaInsets = new Thickness(0, 0, 300, 0), Margin = new Thickness(12), AutomationId = "TheCarouselView" }; layout.Children.Add(carouselView, 0, 2); snapPointsTypePicker.SelectedIndexChanged += (sender, e) => { if (carouselView.ItemsLayout is LinearItemsLayout linearItemsLayout) { Enum.TryParse(snapPointsTypePicker.SelectedItem.ToString(), out SnapPointsType snapPointsType); linearItemsLayout.SnapPointsType = snapPointsType; } }; snapPointsAlignmentPicker.SelectedIndexChanged += (sender, e) => { if (carouselView.ItemsLayout is LinearItemsLayout linearItemsLayout) { Enum.TryParse(snapPointsAlignmentPicker.SelectedItem.ToString(), out SnapPointsAlignment snapPointsAlignment); linearItemsLayout.SnapPointsAlignment = snapPointsAlignment; } }; Content = layout; BindingContext = viewModel; }
public CarouselItemsGallery() { var viewModel = new CarouselItemsGalleryViewModel(); Title = $"CarouselView (Items)"; var layout = new Grid { RowDefinitions = new RowDefinitionCollection { new RowDefinition { Height = GridLength.Star }, new RowDefinition { Height = GridLength.Auto } } }; var itemsLayout = new ListItemsLayout(ItemsLayoutOrientation.Horizontal) { SnapPointsType = SnapPointsType.MandatorySingle, SnapPointsAlignment = SnapPointsAlignment.Center }; var itemTemplate = GetCarouselTemplate(); var carouselView = new CarouselView { ItemsLayout = itemsLayout, ItemTemplate = itemTemplate, ItemsSource = viewModel.Items, IsScrollAnimated = true, IsBounceEnabled = true }; layout.Children.Add(carouselView, 0, 0); var stacklayoutButtons = new StackLayout { Orientation = StackOrientation.Horizontal }; var addItemButton = new Button { Text = "Add Item" }; addItemButton.Clicked += (sender, e) => { viewModel.Items.Add(new CarouselData { Color = Color.Red, Name = $"{viewModel.Items.Count + 1}" }); carouselView.Position = viewModel.Items.Count - 1; }; var removeItemButton = new Button { Text = "Remove Item" }; removeItemButton.Clicked += (sender, e) => { if (viewModel.Items.Any()) { viewModel.Items.RemoveAt(viewModel.Items.Count - 1); } if (viewModel.Items.Count > 0) { carouselView.Position = viewModel.Items.Count - 1; } }; var clearItemsButton = new Button { Text = "Clear Items" }; clearItemsButton.Clicked += (sender, e) => { viewModel.Items.Clear(); }; stacklayoutButtons.Children.Add(addItemButton); stacklayoutButtons.Children.Add(removeItemButton); stacklayoutButtons.Children.Add(clearItemsButton); layout.Children.Add(stacklayoutButtons, 0, 1); Content = layout; BindingContext = viewModel; }
public CarouselItemsGallery() { var viewModel = new CarouselItemsGalleryViewModel(); Title = $"CarouselView (Indicators)"; var grid = 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 { ItemsLayout = itemsLayout, ItemTemplate = itemTemplate, ItemsSource = viewModel.Items, IsScrollAnimated = true, IsBounceEnabled = true, EmptyView = "This is the empty view" }; var absolute = new AbsoluteLayout(); absolute.Children.Add(carouselView, new Rectangle(0, 0, 1, 1), AbsoluteLayoutFlags.All); var indicators = new IndicatorView { Margin = new Thickness(15, 20), IndicatorColor = Color.Gray, SelectedIndicatorColor = Color.Black, IndicatorsShape = IndicatorShape.Square }; IndicatorView.SetItemsSourceBy(indicators, carouselView); absolute.Children.Add(indicators, new Rectangle(.5, 1, -1, -1), AbsoluteLayoutFlags.PositionProportional); grid.Children.Add(absolute, 0, 0); var stacklayoutButtons = new StackLayout { Orientation = StackOrientation.Horizontal }; var addItemButton = new Button { Text = "Add Item" }; addItemButton.Clicked += (sender, e) => { viewModel.Items.Add(new CarouselData { Color = Color.Red, Name = $"{viewModel.Items.Count + 1}" }); carouselView.Position = viewModel.Items.Count - 1; }; var removeItemButton = new Button { Text = "Remove Item" }; removeItemButton.Clicked += (sender, e) => { if (viewModel.Items.Any()) { viewModel.Items.RemoveAt(viewModel.Items.Count - 1); } if (viewModel.Items.Count > 0) { carouselView.Position = viewModel.Items.Count - 1; } }; var clearItemsButton = new Button { Text = "Clear Items" }; clearItemsButton.Clicked += (sender, e) => { viewModel.Items.Clear(); }; stacklayoutButtons.Children.Add(addItemButton); stacklayoutButtons.Children.Add(removeItemButton); stacklayoutButtons.Children.Add(clearItemsButton); grid.Children.Add(stacklayoutButtons, 0, 1); Content = grid; BindingContext = viewModel; }
public IndicatorsSample() { InitializeComponent(); BindingContext = new GalleryPages.CollectionViewGalleries.CarouselViewGalleries.CarouselItemsGalleryViewModel(false, false); }