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 Microsoft.Maui.Controls.AbsoluteLayout();

            AbsoluteLayout.SetLayoutBounds(carouselView, new Rectangle(0, 0, 1, 1));
            AbsoluteLayout.SetLayoutFlags(carouselView, AbsoluteLayoutFlags.All);
            absolute.Add(carouselView);

            var indicators = new IndicatorView
            {
                Margin                 = new Thickness(15, 20),
                IndicatorColor         = Colors.Gray,
                SelectedIndicatorColor = Colors.Black,
                IndicatorsShape        = IndicatorShape.Square
            };

            if (!useNativeIndicators)
            {
                indicators.IndicatorTemplate = new DataTemplate(() =>
                {
                    return(new Image
                    {
                        Source = new FontImageSource
                        {
                            FontFamily = DefaultFontFamily(),
                            Glyph = "\uf30c",
                        },
                    });
                });
            }

            carouselView.IndicatorView = indicators;

            AbsoluteLayout.SetLayoutBounds(indicators, new Rectangle(.5, 1, -1, -1));
            AbsoluteLayout.SetLayoutFlags(indicators, AbsoluteLayoutFlags.PositionProportional);
            absolute.Add(indicators);

            grid.Children.Add(absolute);

            var StackLayoutButtons = new StackLayout
            {
                Orientation = StackOrientation.Horizontal
            };

            var addItemButton = new Button
            {
                Text = "Add Item"
            };

            addItemButton.Clicked += (sender, e) =>
            {
                _viewModel.Items.Add(new CarouselData
                {
                    Color = Colors.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.SetRow(StackLayoutButtons, 1);
            grid.Children.Add(StackLayoutButtons);

            Content        = grid;
            BindingContext = _viewModel;
        }
Exemple #2
0
        public CarouselSnapGallery()
        {
            //On<iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Never);

            var viewModel = new CarouselItemsGalleryViewModel(false, false);

            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 Microsoft.Maui.Controls.Picker
            {
                ItemsSource  = snapPointsTypes,
                SelectedItem = snapPointsTypes[1]
            };

            snapPointsStack.Children.Add(snapPointsLabel);
            snapPointsStack.Children.Add(snapPointsTypePicker);

            layout.Children.Add(snapPointsStack);

            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);

            Grid.SetRow(snapPointsAlignmentsStack, 1);
            layout.Children.Add(snapPointsAlignmentsStack);

            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 = Colors.LightGray,
                PeekAreaInsets  = new Thickness(0, 0, 100, 0),
                Margin          = new Thickness(12),
                AutomationId    = "TheCarouselView"
            };

            Grid.SetRow(carouselView, 2);
            layout.Children.Add(carouselView);


            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;
        }