CollectionView: SelectionMode with Navigation and LongPress

Let's use a long press gesture to initiate the multiple selection mode in CollectionView, and then a tap gesture for navigating to other pages when selection mode is none. This video continues the journey of building out a photo gallery experience in Xappy.

	<CollectionView Margin="8"
	x:Name="PhotosCV"
	SelectionMode="{Binding SelectionMode}"
	SelectedItems="{Binding SelectedPhotos}"
	ItemsSource="{Binding Photos}"
	>
	... all the fillings
	</CollectionView>

view raw snippet1.xaml hosted with ❤ by GitHub

	namespace Xappy.Content.Scenarios.PhotoGallery
	{
	public class PhotoGalleryViewModel : BaseViewModel
	{
	private ObservableCollection<Photo> _photos;
	private ObservableCollection<object> _selectedPhotos;
	private SelectionMode _selectionMode = SelectionMode.None;
	public SelectionMode SelectionMode { get => _selectionMode; set => SetProperty(ref _selectionMode, value); }
	public ObservableCollection<Photo> Photos { get => _photos; set => _photos = value; }
	public ObservableCollection<object> SelectedPhotos { get => _selectedPhotos; set => _selectedPhotos = value; }
	... the rest of the story
	}
	}

view raw snippet1.cs hosted with ❤ by GitHub

	<CollectionView.ItemTemplate>
	<DataTemplate>
	<Frame HeightRequest="120" CornerRadius="0" Padding="0" BackgroundColor="{StaticResource ThemePrimary}" Visual="Material" HasShadow="True"
	>
	<Grid
	xct:TouchEffect.Command="{Binding PressedCommand, Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
	xct:TouchEffect.CommandParameter="{Binding .}"
	xct:TouchEffect.LongPressCommand="{Binding LongPressCommand, Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
	xct:TouchEffect.LongPressCommandParameter="{Binding .}"
	xct:TouchEffect.PressedScale="1.2"
	xct:TouchEffect.NativeAnimation="True">
	<Image BackgroundColor="Black" Source="{Binding ImageSrc}" Aspect="AspectFill"/>
	<Image x:Name="CheckIcon" Source="{FontImage FontFamily=FontAwesome, Glyph={x:Static app:IconFont.CheckSquare}, Color={StaticResource ThemePrimary}, Size=18}" VerticalOptions="End" HorizontalOptions="Start" Margin="4"/>
	</Grid>
	</Frame>
	</DataTemplate>
	</CollectionView.ItemTemplate>

view raw snippet2.xaml hosted with ❤ by GitHub

Resources:

• Docs: Selection
• Docs: Navigation and passing data
• Xamarin Community Toolkit: TouchEffect
• Blog: Touch Effect

davidortinau / Xappy

A mobile app to track Xamarin news and explore all the goodness that is .NET for Mobile developers