GIF
| SideContextMenuView | SwipeActionContextMenuView (Move to delete) | SwipeActionContextMenuView (Autoclosing) |
|---|---|---|
 |
 |
 |
Setup
- Available on NuGet: ContextViewCell
- Add nuget package to your Xamarin.Forms .netStandard/PCL project and to your platform-specific projects (iOS and Android)
- Call
ContextMenuViewRenderer.Preserve()in AppDelagate for iOS and MainActivity for Android
| Platform | Version |
|---|---|
| Xamarin.iOS | 8.0+ |
| Xamarin.Android | 15+ |
Samples
All samples are here: https://github.com/AndreiMisiukevich/ContextMenu/tree/master/ContextMenuSample/ContextMenuSample/Pages
Collection view is supported! XAML:
<CollectionView x:Name="CollectionView"
ItemsSource="{Binding Items}"
Margin="0, 5, 0, 0"
BackgroundColor="White">
<CollectionView.ItemTemplate>
<DataTemplate>
<context:SideContextMenuView IsAutoCloseEnabled="true">
<context:SideContextMenuView.View>
<Frame BackgroundColor="#512DA8"
Margin="15,5"
Padding="20"
WidthRequest="{Binding Source={x:Reference CollectionView}, Path=Width, Converter={StaticResource MenuFitWidthConverter}, ConverterParameter='70'}"
CornerRadius="10">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Opacity="{Binding IsMuted, Converter={StaticResource IsMutedToOpacityConverter}}"
Spacing="10">
<Frame HeightRequest="80"
WidthRequest="80"
CornerRadius="40"
Padding="0"
VerticalOptions="CenterAndExpand"
IsClippedToBounds="true">
<Image Source="{Binding AvatarUrl}"
Aspect="AspectFill"/>
</Frame>
<StackLayout VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Spacing="0">
<Label Text="Chat with:"
FontAttributes="Bold"
TextColor="White"/>
<Label Text="{Binding Name}"
FontSize="Large"
TextColor="White"/>
</StackLayout>
</StackLayout>
</Frame>
</context:SideContextMenuView.View>
<context:SideContextMenuView.ContextTemplate>
<DataTemplate>
<Frame Margin="0, 5"
Padding="0"
CornerRadius="10"
IsClippedToBounds="true"
BackgroundColor="Gold">
<StackLayout
Padding="10, 5"
Orientation="Horizontal"
Spacing="10"
Margin="0, 5">
<ImageButton Source="trash.png" HeightRequest="60" WidthRequest="60" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"
Command="{Binding BindingContext.DeleteCommand, Source={x:Reference CollectionView}}"
CommandParameter="{Binding .}"/>
<ImageButton Source="mute.png" HeightRequest="60" WidthRequest="60" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"
Command="{Binding BindingContext.MuteCommand, Source={x:Reference CollectionView}}"
CommandParameter="{Binding .}"/>
</StackLayout>
</Frame>
</DataTemplate>
</context:SideContextMenuView.ContextTemplate>
</context:SideContextMenuView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>Make sure your main view width equals list's width You can adjust it by binding
...
<CollectionView x:Name="Collection"
<CollectionView.ItemTemplate>
<DataTemplate>
<context:SideContextMenuView>
<context:SideContextMenuView.View>
<ContentView WidthRequest="{Binding Source={x:Reference Collection}, Path=Width}">
...Check source code for more info, or just ask me =)
License
The MIT License (MIT) see License file
Contribution
Feel free to create issues and PRs