From bfac3792f9dcb1aa7b34dad35795b15252400ede Mon Sep 17 00:00:00 2001
From: Naveenkumar S <naveenkumar.sanjeevirayan@syncfusion.com>
Date: Mon, 24 Mar 2025 13:41:15 +0530
Subject: [PATCH 1/2] Updated demo UI

---
 PhotoGallery/AlbumCollectionPage.xaml    |  8 +++---
 PhotoGallery/AlbumCollectionPage.xaml.cs |  8 ++++--
 PhotoGallery/ImagePage.xaml              | 26 +++++++++----------
 PhotoGallery/MainPage.xaml               | 32 +++++++++++-------------
 PhotoGallery/MainPage.xaml.cs            |  8 ++++--
 5 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/PhotoGallery/AlbumCollectionPage.xaml b/PhotoGallery/AlbumCollectionPage.xaml
index bb5ead8..eba5b61 100644
--- a/PhotoGallery/AlbumCollectionPage.xaml
+++ b/PhotoGallery/AlbumCollectionPage.xaml
@@ -5,14 +5,14 @@
              x:Class="PhotoGallery.AlbumCollectionPage"
              Title="{Binding AlbumName}">
     <Grid>
-        <listView:SfListView x:Name="listView" ItemsSource="{Binding Photos}" ItemSize="200" ItemSpacing="10"
-                             ItemTapped="OnPhotosItemTapped">
+        <listView:SfListView x:Name="listView" ItemsSource="{Binding Photos}" SelectionMode="None"
+                             ItemSize="90" ItemSpacing="5" ItemTapped="OnPhotosItemTapped">
             <listView:SfListView.ItemsLayout>
-                <listView:GridLayout SpanCount="3" />
+                <listView:GridLayout SpanCount="4" />
             </listView:SfListView.ItemsLayout>
             <listView:SfListView.ItemTemplate>
                 <DataTemplate>
-                    <Image Source="{Binding Image}" Aspect="AspectFill"/>
+                    <Image Source="{Binding Image}" Aspect="AspectFill" HeightRequest="88" WidthRequest="88"/>
                 </DataTemplate>
             </listView:SfListView.ItemTemplate>
         </listView:SfListView>
diff --git a/PhotoGallery/AlbumCollectionPage.xaml.cs b/PhotoGallery/AlbumCollectionPage.xaml.cs
index d1d0e36..0d84260 100644
--- a/PhotoGallery/AlbumCollectionPage.xaml.cs
+++ b/PhotoGallery/AlbumCollectionPage.xaml.cs
@@ -24,13 +24,17 @@ public AlbumCollectionPage(GalleryViewModel viewModel)
                     {
                         return "Today";
                     }
+                    else if (item.DateTime.Date == DateTime.Now.Date.AddDays(-1))
+                    {
+                        return "Yesterday";
+                    }
                     else if (item.DateTime.Year == DateTime.Now.Year)
                     {
-                        return item.DateTime.ToString("MMM dd", CultureInfo.InvariantCulture);
+                        return item.DateTime.ToString("ddd, dd MMM", CultureInfo.InvariantCulture);
                     }
                     else
                     {
-                        return item.DateTime.ToString("MMM dd yyyy", CultureInfo.InvariantCulture);
+                        return item.DateTime.ToString("ddd, dd MMM, yyyy", CultureInfo.InvariantCulture);
                     }
                 }
                 else
diff --git a/PhotoGallery/ImagePage.xaml b/PhotoGallery/ImagePage.xaml
index 88120a3..58bf518 100644
--- a/PhotoGallery/ImagePage.xaml
+++ b/PhotoGallery/ImagePage.xaml
@@ -14,11 +14,11 @@
 
     <Grid RowDefinitions="*,60">
         <Image Source="{Binding Image}" Aspect="AspectFit"/>
-        <HorizontalStackLayout VerticalOptions="End" Spacing="10" HorizontalOptions="Center">
+        <HorizontalStackLayout VerticalOptions="End" Spacing="20" HorizontalOptions="Center">
 
             <Border StrokeThickness="0" HeightRequest="60" WidthRequest="60">
                 <Border.StrokeShape>
-                    <RoundRectangle CornerRadius="25"/>
+                    <RoundRectangle CornerRadius="30"/>
                 </Border.StrokeShape>
                 <effects:SfEffectsView TouchDownEffects="Highlight">
                     <effects:SfEffectsView.GestureRecognizers>
@@ -33,38 +33,38 @@
 
             <Border StrokeThickness="0" HeightRequest="60" WidthRequest="60">
                 <Border.StrokeShape>
-                    <RoundRectangle CornerRadius="25"/>
+                    <RoundRectangle CornerRadius="30"/>
                 </Border.StrokeShape>
                 <effects:SfEffectsView TouchDownEffects="Highlight">
                     <effects:SfEffectsView.GestureRecognizers>
-                        <TapGestureRecognizer Tapped="OnFavoriteTapped"/>
+                        <TapGestureRecognizer Tapped="OnEditTapped"/>
                     </effects:SfEffectsView.GestureRecognizers>
                     <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
-                        <Label Text="{Binding IsFavorite, Converter={StaticResource FavoriteToIconConverter}}"
-                               FontFamily="PhotoGallery" FontSize="24" HorizontalOptions="Center"/>
-                        <Label Text="Favorite" />
+                        <Label Text="&#xE701;" FontFamily="PhotoGallery" FontSize="24" HorizontalOptions="Center"/>
+                        <Label Text="Edit" />
                     </VerticalStackLayout>
                 </effects:SfEffectsView>
             </Border>
 
             <Border StrokeThickness="0" HeightRequest="60" WidthRequest="60">
                 <Border.StrokeShape>
-                    <RoundRectangle CornerRadius="25"/>
+                    <RoundRectangle CornerRadius="30"/>
                 </Border.StrokeShape>
                 <effects:SfEffectsView TouchDownEffects="Highlight">
                     <effects:SfEffectsView.GestureRecognizers>
-                        <TapGestureRecognizer Tapped="OnEditTapped"/>
+                        <TapGestureRecognizer Tapped="OnFavoriteTapped"/>
                     </effects:SfEffectsView.GestureRecognizers>
                     <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
-                        <Label Text="&#xE701;" FontFamily="PhotoGallery" FontSize="24" HorizontalOptions="Center"/>
-                        <Label Text="Edit" />
+                        <Label Text="{Binding IsFavorite, Converter={StaticResource FavoriteToIconConverter}}"
+                               FontFamily="PhotoGallery" FontSize="24" HorizontalOptions="Center"/>
+                        <Label Text="Favorite" />
                     </VerticalStackLayout>
                 </effects:SfEffectsView>
             </Border>
 
             <Border StrokeThickness="0" HeightRequest="60" WidthRequest="60">
                 <Border.StrokeShape>
-                    <RoundRectangle CornerRadius="25"/>
+                    <RoundRectangle CornerRadius="30"/>
                 </Border.StrokeShape>
                 <effects:SfEffectsView TouchDownEffects="Highlight">
                     <effects:SfEffectsView.GestureRecognizers>
@@ -72,7 +72,7 @@
                     </effects:SfEffectsView.GestureRecognizers>
                     <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
                         <Label Text="&#xE700;" FontFamily="PhotoGallery" FontSize="24" HorizontalOptions="Center"/>
-                        <Label Text="Delete" />
+                        <Label Text="Bin" />
                     </VerticalStackLayout>
                 </effects:SfEffectsView>
             </Border>
diff --git a/PhotoGallery/MainPage.xaml b/PhotoGallery/MainPage.xaml
index bcb8cef..df0a5e9 100644
--- a/PhotoGallery/MainPage.xaml
+++ b/PhotoGallery/MainPage.xaml
@@ -39,15 +39,15 @@
                                  Color="{Binding Source={x:Reference photosTab},Path=TextColor}"
                              FontFamily="PhotoGallery"/>
                 </tabView:SfTabItem.ImageSource>
-                <listView:SfListView x:Name="listViewPhotos" ItemsSource="{Binding Photos}" ItemSize="200" ItemSpacing="10"
-                                     ItemTapped="OnPhotosItemTapped">
+                <listView:SfListView x:Name="listViewPhotos" ItemsSource="{Binding Photos}" SelectionMode="None"
+                                     ItemSize="90" ItemSpacing="5" ItemTapped="OnPhotosItemTapped">
 
                     <listView:SfListView.ItemsLayout>
-                        <listView:GridLayout SpanCount="3" />
+                        <listView:GridLayout SpanCount="4" />
                     </listView:SfListView.ItemsLayout>
                     <listView:SfListView.ItemTemplate>
                         <DataTemplate>
-                            <Image Source="{Binding Image}" Aspect="AspectFill"/>
+                            <Image Source="{Binding Image}" Aspect="AspectFill" HeightRequest="88" WidthRequest="88"/>
                         </DataTemplate>
                     </listView:SfListView.ItemTemplate>
                 </listView:SfListView>
@@ -60,17 +60,17 @@
              FontFamily="PhotoGallery"/>
                 </tabView:SfTabItem.ImageSource>
 
-                <listView:SfListView ItemsSource="{Binding Albums}" ItemSize="200" ItemSpacing="10"
-                                     ItemTapped="OnAlbumsItemTapped">
+                <listView:SfListView ItemsSource="{Binding Albums}" ItemSize="230"
+                                     ItemTapped="OnAlbumsItemTapped" SelectionMode="None">
                     <listView:SfListView.ItemsLayout>
-                            <listView:GridLayout SpanCount="3" />
+                            <listView:GridLayout SpanCount="2" />
                         </listView:SfListView.ItemsLayout>
                         <listView:SfListView.ItemTemplate>
                             <DataTemplate>
                                     <Grid RowDefinitions="*,20,20">
-                                        <Image Source="{Binding CoverImage}" Aspect="AspectFill" />
-                                        <Label Text="{Binding AlbumName}" FontSize="15" Grid.Row="1"/>
-                                <Label Text="{Binding Count}" FontSize="12" Grid.Row="2" />
+                                        <Image Source="{Binding CoverImage}" Aspect="Fill" HeightRequest="180" WidthRequest="180"/>
+                                        <Label Text="{Binding AlbumName}" FontSize="15" Margin="10,0,0,0" Grid.Row="1"/>
+                                <Label Text="{Binding Count, StringFormat='{0} items'}" Margin="10,0,0,0" FontSize="12" Grid.Row="2" />
                                 </Grid>
                             </DataTemplate>
                         </listView:SfListView.ItemTemplate>
@@ -83,15 +83,13 @@
                  Color="{Binding Source={x:Reference favoritesTab},Path=TextColor}"
              FontFamily="PhotoGallery"/>
                 </tabView:SfTabItem.ImageSource>
-                <listView:SfListView ItemsSource="{Binding Favorites, Mode=TwoWay}" ItemSize="300" ItemSpacing="10"
-                     ItemTapped="OnPhotosItemTapped">
-                    <listView:SfListView.ItemsLayout>
-                        <listView:GridLayout SpanCount="2" />
-                    </listView:SfListView.ItemsLayout>
+                <listView:SfListView x:Name="listViewFavorites" ItemsSource="{Binding Favorites, Mode=TwoWay}" ItemSpacing="10"
+                                     SelectionMode="None" AutoFitMode="Height" ItemTapped="OnPhotosItemTapped">
                     <listView:SfListView.ItemTemplate>
                         <DataTemplate>
-                            <Grid RowDefinitions="20,*">
-                                <Label Text="{Binding DateTime, StringFormat='{0:ddd, dd MMM, yyyy}'}" />
+                            <Grid RowDefinitions="30,*">
+                                <Label Text="{Binding DateTime, StringFormat='{0:ddd, dd MMM, yyyy}'}" 
+                                       FontAttributes="Bold" FontSize="15" />
                                 <Image Source="{Binding Image}" Aspect="AspectFill" Grid.Row="1"/>
                             </Grid>
                         </DataTemplate>
diff --git a/PhotoGallery/MainPage.xaml.cs b/PhotoGallery/MainPage.xaml.cs
index 676c900..79b62c4 100644
--- a/PhotoGallery/MainPage.xaml.cs
+++ b/PhotoGallery/MainPage.xaml.cs
@@ -21,13 +21,17 @@ public MainPage()
                         {
                             return "Today";
                         }
+                        else if (item.DateTime.Date == DateTime.Now.Date.AddDays(-1))
+                        {
+                            return "Yesterday";
+                        }
                         else if (item.DateTime.Year == DateTime.Now.Year)
                         {
-                            return item.DateTime.ToString("MMM dd", CultureInfo.InvariantCulture);
+                            return item.DateTime.ToString("ddd, dd MMM", CultureInfo.InvariantCulture);
                         }
                         else
                         {
-                            return item.DateTime.ToString("MMM dd yyyy", CultureInfo.InvariantCulture);
+                            return item.DateTime.ToString("ddd, dd MMM, yyyy", CultureInfo.InvariantCulture);
                         }
                     }
                     else

From 98b46e18f18ce048024f952101d7b5863f47cb72 Mon Sep 17 00:00:00 2001
From: Naveenkumar S <naveenkumar.sanjeevirayan@syncfusion.com>
Date: Mon, 24 Mar 2025 15:21:54 +0530
Subject: [PATCH 2/2] Added new images

---
 PhotoGallery/ViewModel/ViewModel.cs | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/PhotoGallery/ViewModel/ViewModel.cs b/PhotoGallery/ViewModel/ViewModel.cs
index f113390..1dec009 100644
--- a/PhotoGallery/ViewModel/ViewModel.cs
+++ b/PhotoGallery/ViewModel/ViewModel.cs
@@ -42,8 +42,17 @@ private void GeneratePhotos()
                new ImageInfo() { ImageName = "place_8", Image= "place_8.jpg",Size= "2MB",DateTime= dateTime.AddDays(-40).AddHours(14)},
                new ImageInfo() { ImageName = "monitors", Image= "monitors.png",Size= "2MB",DateTime= dateTime.AddDays(-45).AddHours(14)},
                new ImageInfo() { ImageName = "place_9", Image= "place_9.jpg",Size= "2MB",DateTime= dateTime.AddDays(-50).AddHours(13)},
-               new ImageInfo() { ImageName = "bird10", Image= "bird10.jpg",Size= "2MB",DateTime= dateTime.AddMonths(-2).AddHours(16)},
-               new ImageInfo() { ImageName = "place_10", Image= "place_10.jpg",Size= "2MB",DateTime= dateTime.AddYears(-1).AddHours(16)},
+               new ImageInfo() { ImageName = "bird10", Image= "bird10.png",Size= "2MB",DateTime= dateTime.AddMonths(-2).AddHours(16)},
+               new ImageInfo() { ImageName = "place_10", Image= "place_10.jpg",Size= "2MB",DateTime= dateTime.AddMonths(-3).AddHours(6)},
+               new ImageInfo() { ImageName = "place_11", Image= "place_11.jpg",Size= "2MB",DateTime= dateTime.AddMonths(-4).AddHours(12)},
+               new ImageInfo() { ImageName = "bird11", Image= "bird11.png",Size= "2MB",DateTime= dateTime.AddMonths(-2).AddDays(1).AddHours(16)},
+               new ImageInfo() { ImageName = "bird12", Image= "bird12.png",Size= "2MB",DateTime= dateTime.AddMonths(-2).AddHours(13)},
+               new ImageInfo() { ImageName = "place_12", Image= "place_12.jpg",Size= "2MB",DateTime= dateTime.AddMonths(-3).AddHours(14)},
+               new ImageInfo() { ImageName = "place_13", Image= "place_13.jpg",Size= "2MB",DateTime= dateTime.AddMonths(-3).AddDays(1).AddHours(12)},
+               new ImageInfo() { ImageName = "bird13", Image= "bird13.png",Size= "2MB",DateTime= dateTime.AddMonths(-6).AddHours(16)},
+               new ImageInfo() { ImageName = "bird14", Image= "bird14.png",Size= "2MB",DateTime= dateTime.AddMonths(-6).AddDays(1).AddHours(10)},
+               new ImageInfo() { ImageName = "place_14", Image= "place_14.jpg",Size= "2MB",DateTime= dateTime.AddMonths(-7).AddHours(16)},
+               new ImageInfo() { ImageName = "place_15", Image= "place_15.jpg",Size= "2MB",DateTime= dateTime.AddYears(-1).AddHours(13)},
            };
 
             Countries = new ObservableCollection<ImageInfo>()