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(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 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, 100, 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;
}