collectionview swipe

MyFirstMauiApp/CollectionViewDemos/AppShell.xaml

@@ -7,12 +7,15 @@
        Shell.FlyoutBehavior="Disabled">
 
     <FlyoutItem>
-        <ShellContent Title="FirstPage"
+        <ShellContent Title="Basic"
                       ContentTemplate="{DataTemplate views:FirstPage}"
                       Route="MainPage" />
-        <ShellContent Title="SecondPage"
+        <ShellContent Title="Template"
                       ContentTemplate="{DataTemplate views:SecondPage}"
                       Route="MainPage" />
+        <ShellContent Title="Swipe"
+                      ContentTemplate="{DataTemplate views:ThirdPage}"
+                      Route="MainPage" />
     </FlyoutItem>
 
 </Shell>

MyFirstMauiApp/CollectionViewDemos/CollectionViewDemos.csproj

@@ -56,6 +56,11 @@
 		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <None Remove="Resources\Images\favorite.png" />
+	  <None Remove="Resources\Images\remove.png" />
+	</ItemGroup>
+
 	<ItemGroup>
 		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
 		<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
@@ -76,6 +81,9 @@
 	  <MauiXaml Update="Views\SecondPage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Views\ThirdPage.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	</ItemGroup>
 
 </Project>

MyFirstMauiApp/CollectionViewDemos/ViewModels/MonkeysViewModel.cs

@@ -6,6 +6,7 @@ using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using System.Windows.Input;
 
 namespace CollectionViewDemos.ViewModels
 {
@@ -15,6 +16,9 @@ namespace CollectionViewDemos.ViewModels
 
         public ObservableCollection<Monkey> Monkeys { get; private set; }
 
+        public ICommand FavoriteCommand => new Command<Monkey>(FavoriteMonkey);
+        public ICommand RemoveCommand => new Command<Monkey>(RemoveMonkey);
+
         public MonkeysViewModel()
         {
             _source = new List<Monkey>();
@@ -161,5 +165,16 @@ namespace CollectionViewDemos.ViewModels
 
             Monkeys = new ObservableCollection<Monkey>(_source);
         }
+
+        private void RemoveMonkey(Monkey monkey)
+        {
+            if (Monkeys.Contains(monkey))
+                Monkeys.Remove(monkey);
+        }
+
+        private void FavoriteMonkey(Monkey monkey)
+        {
+            monkey.IsFavorite = !monkey.IsFavorite;
+        }
     }
 }

MyFirstMauiApp/CollectionViewDemos/Views/ThirdPage.xaml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage x:Class="CollectionViewDemos.Views.ThirdPage"
+             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:viewModels="clr-namespace:CollectionViewDemos.ViewModels"
+             Title="ThirdPage">
+    <ContentPage.BindingContext>
+        <viewModels:MonkeysViewModel />
+    </ContentPage.BindingContext>
+
+    <VerticalStackLayout>
+        <CollectionView x:Name="mainCollectionView" ItemsSource="{Binding Monkeys}">
+            <CollectionView.ItemTemplate>
+                <DataTemplate>
+                    <SwipeView>
+                        <SwipeView.LeftItems>
+                            <SwipeItems>
+                                <SwipeItem BackgroundColor="LightGreen"
+                                           Command="{Binding Source={x:Reference mainCollectionView}, Path=BindingContext.FavoriteCommand}"
+                                           CommandParameter="{Binding}"
+                                           IconImageSource="favorite.png" Text="즐겨찾기" />
+                                <SwipeItem BackgroundColor="LightSalmon"
+                                           Command="{Binding Source={RelativeSource AncestorType={x:Type CollectionView}}, Path=BindingContext.RemoveCommand}"
+                                           CommandParameter="{Binding}"
+                                           IconImageSource="remove.png" Text="삭제" />
+                            </SwipeItems>
+                        </SwipeView.LeftItems>
+
+                        <Grid Padding="10" BackgroundColor="WhiteSmoke"
+                              ColumnDefinitions="Auto,Auto" RowDefinitions="Auto,Auto">
+                            <Image Grid.RowSpan="2"
+                                   Aspect="AspectFill" HeightRequest="60"
+                                   Source="{Binding ImageUrl}"
+                                   WidthRequest="60" />
+                            <Label Grid.Column="1"
+                                   FontAttributes="Bold"
+                                   Text="{Binding Name}" />
+                            <Label Grid.Row="1" Grid.Column="1"
+                                   FontAttributes="Italic"
+                                   Text="{Binding Location}"
+                                   VerticalOptions="End" />
+                        </Grid>
+                    </SwipeView>
+
+                </DataTemplate>
+            </CollectionView.ItemTemplate>
+        </CollectionView>
+    </VerticalStackLayout>
+</ContentPage>

MyFirstMauiApp/CollectionViewDemos/Views/ThirdPage.xaml.cs

@@ -0,0 +1,9 @@
+namespace CollectionViewDemos.Views;
+
+public partial class ThirdPage : ContentPage
+{
+	public ThirdPage()
+	{
+		InitializeComponent();
+	}
+}