From 4fb3247755ba4cf15abe50304f6c397d102edcb9 Mon Sep 17 00:00:00 2001
From: Poker <poker_sang@outlook.com>
Date: Wed, 6 Mar 2024 02:04:11 +0800
Subject: [PATCH] Simplify AppBarButton collapse behavior (#353)

---
 src/Pixeval/App.xaml.cs                       |  1 +
 .../IllustrationViewerPage.xaml               | 48 ++++++++-----------
 .../IllustrationViewerPage.xaml.cs            | 23 ++-------
 3 files changed, 26 insertions(+), 46 deletions(-)

diff --git a/src/Pixeval/App.xaml.cs b/src/Pixeval/App.xaml.cs
index bc26a387..dbf0fe36 100644
--- a/src/Pixeval/App.xaml.cs
+++ b/src/Pixeval/App.xaml.cs
@@ -63,6 +63,7 @@ public partial class App
 
     protected override async void OnLaunched(LaunchActivatedEventArgs args)
     {
+        Resources["DefaultAppBarButtonStyle"].To<Style>().Setters[7] = new Setter(FrameworkElement.WidthProperty, 45);
         if (AppInfo.CustomizeTitleBarSupported)
             Resources[NavigationViewContentMargin] = new Thickness(0, 48, 0, 0);
 
diff --git a/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml b/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml
index c1f0ddaf..9e55741e 100644
--- a/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml
+++ b/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml
@@ -360,20 +360,14 @@
                         Grid.Column="1"
                         HorizontalAlignment="Center"
                         DefaultLabelPosition="Collapsed">
-                        <AppBarToggleButton
-                            Command="{x:Bind _viewModel.IllustrationInfoAndCommentsCommand}"
-                            IsChecked="{x:Bind IllustrationInfoAndCommentsSplitView.IsPaneOpen, Mode=TwoWay}"
-                            SizeChanged="CommandBarElementOnSizeChanged" />
-                        <AppBarButton
-                            Command="{x:Bind _viewModel.CurrentImage.PlayGifCommand, Mode=OneWay}"
-                            SizeChanged="CommandBarElementOnSizeChanged"
-                            Visibility="{x:Bind _viewModel.CurrentIllustration.IsUgoira, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                        <AppBarToggleButton Command="{x:Bind _viewModel.IllustrationInfoAndCommentsCommand}" IsChecked="{x:Bind IllustrationInfoAndCommentsSplitView.IsPaneOpen, Mode=TwoWay}" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.PlayGifCommand, Mode=OneWay}" Visibility="{x:Bind _viewModel.CurrentIllustration.IsUgoira, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
                         <AppBarSeparator />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.CopyCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged" />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.SaveCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged" />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.SaveAsCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.CopyCommand, Mode=OneWay}" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.SaveCommand, Mode=OneWay}" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.SaveAsCommand, Mode=OneWay}" />
                         <AppBarSeparator />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.SetAsCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged">
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.SetAsCommand, Mode=OneWay}">
                             <AppBarButton.Flyout>
                                 <MenuFlyout>
                                     <MenuFlyoutItem Command="{x:Bind _viewModel.CurrentImage.SetAsBackgroundCommand, Mode=OneWay}" />
@@ -382,23 +376,18 @@
                             </AppBarButton.Flyout>
                         </AppBarButton>
                         <AppBarSeparator />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentIllustration.AddToBookmarkCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentIllustration.AddToBookmarkCommand, Mode=OneWay}" />
                         <AppBarButton
                             x:Name="GenerateLinkButton"
                             Command="{x:Bind _viewModel.CurrentIllustration.GenerateLinkCommand, Mode=OneWay}"
-                            CommandParameter="{x:Bind GenerateLinkTeachingTip}"
-                            SizeChanged="CommandBarElementOnSizeChanged" />
-                        <AppBarButton
-                            Command="{x:Bind _viewModel.CurrentIllustration.GenerateWebLinkCommand, Mode=OneWay}"
-                            CommandParameter="{x:Bind}"
-                            SizeChanged="CommandBarElementOnSizeChanged" />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentIllustration.OpenInWebBrowserCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged" />
+                            CommandParameter="{x:Bind GenerateLinkTeachingTip}" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentIllustration.GenerateWebLinkCommand, Mode=OneWay}" CommandParameter="{x:Bind}" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentIllustration.OpenInWebBrowserCommand, Mode=OneWay}" />
                         <AppBarButton
                             x:Name="ShowQrCodeButton"
                             Command="{x:Bind _viewModel.CurrentIllustration.ShowQrCodeCommand, Mode=OneWay}"
-                            CommandParameter="{x:Bind ShowQrCodeTeachingTip}"
-                            SizeChanged="CommandBarElementOnSizeChanged" />
-                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.ShareCommand, Mode=OneWay}" SizeChanged="CommandBarElementOnSizeChanged" />
+                            CommandParameter="{x:Bind ShowQrCodeTeachingTip}" />
+                        <AppBarButton Command="{x:Bind _viewModel.CurrentImage.ShareCommand, Mode=OneWay}" />
                     </CommandBar>
                     <TextBlock
                         Grid.Column="2"
@@ -430,18 +419,23 @@
                         x:Name="GenerateLinkTeachingTip"
                         x:Uid="/IllustrateViewerPage/GenerateLinkToThisPageButtonTeachingTip"
                         Grid.Column="0"
-                        ActionButtonClick="GenerateLinkToThisPageButtonTeachingTip_OnActionButtonClick">
+                        ActionButtonClick="GenerateLinkToThisPageButtonTeachingTip_OnActionButtonClick"
+                        Tag="{x:Bind GenerateLinkButton}">
                         <TeachingTip.HeroContent>
-                            <Image Source="ms-appx:///Assets/Images/illust-app-link-sample.png" />
+                            <Image
+                                Loading="Image_OnLoading"
+                                Source="ms-appx:///Assets/Images/illust-app-link-sample.png"
+                                Tag="{x:Bind GenerateLinkTeachingTip}" />
                         </TeachingTip.HeroContent>
                     </TeachingTip>
                     <TeachingTip
                         x:Name="ShowQrCodeTeachingTip"
                         x:Uid="/IllustrateViewerPage/QrCodeTeachingTip"
                         Grid.Column="0"
-                        IsLightDismissEnabled="True">
+                        IsLightDismissEnabled="True"
+                        Tag="{x:Bind ShowQrCodeButton}">
                         <TeachingTip.HeroContent>
-                            <Image />
+                            <Image Loading="Image_OnLoading" Tag="{x:Bind ShowQrCodeTeachingTip}" />
                         </TeachingTip.HeroContent>
                     </TeachingTip>
                 </Grid>
diff --git a/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml.cs b/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml.cs
index 3b54fec8..c6ddb110 100644
--- a/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml.cs
+++ b/src/Pixeval/Pages/IllustrationViewer/IllustrationViewerPage.xaml.cs
@@ -247,25 +247,10 @@ public sealed partial class IllustrationViewerPage : SupportCustomTitleBarDragRe
         TimeUp = true;
     }
 
-    private void CommandBarElementOnSizeChanged(object sender, SizeChangedEventArgs e)
+    private void Image_OnLoading(FrameworkElement sender, object args)
     {
-        var button = (ICommandBarElement)sender;
-        var frameworkElement = (FrameworkElement)sender;
-        if (button.IsInOverflow)
-        {
-            frameworkElement.Width = double.NaN;
-            if (frameworkElement == ShowQrCodeButton)
-                ShowQrCodeTeachingTip.Target = null;
-            else if (frameworkElement == GenerateLinkButton)
-                GenerateLinkTeachingTip.Target = null;
-        }
-        else
-        {
-            frameworkElement.Width = (double)Application.Current.Resources["CollapsedAppBarButtonWidth"];
-            if (frameworkElement == ShowQrCodeButton)
-                ShowQrCodeTeachingTip.Target = frameworkElement;
-            else if (frameworkElement == GenerateLinkButton)
-                GenerateLinkTeachingTip.Target = frameworkElement;
-        }
+        var teachingTip = sender.GetTag<TeachingTip>();
+        var appBarButton = teachingTip.GetTag<AppBarButton>();
+        teachingTip.Target = appBarButton.IsInOverflow ? null : appBarButton;
     }
 }