Merge pull request #177 from edgiardina/enlarge-avatar

Allow enlarging of Player Detail Page's Avatar

Views/PlayerDetailPage.xaml

@@ -43,6 +43,31 @@
                      IconImageSource="{mi:Fluent Icon=Share48, IconColor={StaticResource IconAccentColor}}" />
     </ContentPage.ToolbarItems>
     <Grid>
+        <AbsoluteLayout x:Name="AvatarOverlay"
+                        IsVisible="False"
+                        ZIndex="2">
+
+            <!-- Enlarged Avatar -->
+            <toolkit:AvatarView x:Name="EnlargedPlayerAvatar"
+                                AbsoluteLayout.LayoutBounds="0.5,0.5,80,80"
+                                AbsoluteLayout.LayoutFlags="PositionProportional"
+                                ImageSource="{Binding PlayerAvatar, Mode=OneWay}"
+                                Text="{Binding Initials, Mode=OneWay}"
+                                BackgroundColor="{StaticResource ButtonBackgroundColor}"
+                                BorderWidth="0"
+                                CornerRadius="8"
+                                WidthRequest="80"
+                                HeightRequest="80"
+                                TextColor="{StaticResource ButtonTextColor}">
+                <toolkit:AvatarView.GestureRecognizers>
+                    <TapGestureRecognizer Tapped="OnAvatarTapped" />
+                </toolkit:AvatarView.GestureRecognizers>
+                <toolkit:AvatarView.Shadow>
+                    <Shadow Brush="Black"
+                            Opacity="0.8" />
+                </toolkit:AvatarView.Shadow>
+            </toolkit:AvatarView>
+        </AbsoluteLayout>
         <ActivityIndicator IsVisible="{Binding IsBusy}"
                            IsRunning="{Binding IsBusy}" />
         <ScrollView IsVisible="{Binding IsBusy, Converter={StaticResource invertedBoolConverter}}">
@@ -113,12 +138,18 @@
                                         CornerRadius="8"
                                         WidthRequest="80"
                                         HeightRequest="80"
+                                        x:Name="PlayerAvatar"
+                                        ZIndex="2"
                                         TextColor="{StaticResource ButtonTextColor}">
                         <toolkit:AvatarView.Shadow>
                             <Shadow Brush="Black"
                                     Opacity="0.8" />
                         </toolkit:AvatarView.Shadow>
+                        <toolkit:AvatarView.GestureRecognizers>
+                            <TapGestureRecognizer Tapped="OnAvatarTapped" />
+                        </toolkit:AvatarView.GestureRecognizers>
                     </toolkit:AvatarView>
+
                 </Grid>
                 <StackLayout Spacing="10"
                              Margin="10">

Views/PlayerDetailPage.xaml.cs

@@ -6,6 +6,7 @@
 using static System.Net.Mime.MediaTypeNames;
 using System.Threading;
 using Ifpa.Interfaces;
+using Microsoft.Maui.Layouts;
 
 namespace Ifpa.Views
 {
@@ -193,6 +194,56 @@ private async void CS_Button_Clicked(object sender, EventArgs e)
         {
             await Shell.Current.GoToAsync($"player-champ-series?playerId={ViewModel.PlayerId}");
         }
+
+        private bool isAvatarEnlarged = false;
+
+        private async void OnAvatarTapped(object sender, EventArgs e)
+        {
+            if (isAvatarEnlarged)
+            {
+                // Shrink enlarged avatar back to original size and position
+                EnlargedPlayerAvatar.ScaleTo(1, 250, Easing.CubicOut);
+                EnlargedPlayerAvatar.TranslateTo(0, 0, 250, Easing.CubicOut);
+
+                AvatarOverlay.IsVisible = false;
+                PlayerAvatar.IsVisible = true;
+
+                isAvatarEnlarged = false;
+            }
+            else
+            {
+                // Set EnlargedPlayerAvatar to match PlayerAvatar's size and position initially
+                AvatarOverlay.IsVisible = true;
+
+                // Set EnlargedPlayerAvatar to the initial position of PlayerAvatar
+                AbsoluteLayout.SetLayoutBounds(EnlargedPlayerAvatar, new Rect(PlayerAvatar.X, PlayerAvatar.Y, PlayerAvatar.Width, PlayerAvatar.Height));
+                AbsoluteLayout.SetLayoutFlags(EnlargedPlayerAvatar, AbsoluteLayoutFlags.None);
+
+                PlayerAvatar.IsVisible = false; // Hide original avatar
+
+                // Calculate the target size and position for the enlarged avatar
+                double screenWidth = this.Window.Width;
+                double screenHeight = this.Window.Height;
+
+                double targetWidth = screenWidth * 0.8;
+                double targetHeight = screenHeight * 0.8;
+
+                // Calculate the center position for the enlarged avatar
+                double targetX = (screenWidth - targetWidth) / 2;
+                double targetY = (screenHeight - targetHeight) / 2;
+
+                // Set the final bounds explicitly to ensure it's centered
+                AbsoluteLayout.SetLayoutBounds(EnlargedPlayerAvatar, new Rect(0.5, 0.5, targetWidth, targetHeight));
+                AbsoluteLayout.SetLayoutFlags(EnlargedPlayerAvatar, AbsoluteLayoutFlags.PositionProportional);
+
+                // Animate to the center with the new size
+                //EnlargedPlayerAvatar.TranslateTo(targetX, targetY - PlayerAvatar.Y, 250, Easing.CubicOut);
+                EnlargedPlayerAvatar.ScaleTo(targetWidth / PlayerAvatar.Width, 250, Easing.CubicOut);
+
+                isAvatarEnlarged = true;
+            }
+        }
+
     }