From c2c4795cee0bf12e8bc31bd7c6581ce4af176641 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 4 Dec 2023 13:18:32 +0100
Subject: [PATCH] Adding new Settings UX (#2049)

* Revert "Revert PR#1964 (#2032)"

This reverts commit fbc65987700f45fd7bdcd7144b9ffd9aa9720119.

* Updating namespaces

* Using Uwp package and loc fix
---
 nuget.config                                  |   2 +-
 src/Calculator/Calculator.csproj              |   3 +
 src/Calculator/Resources/en-US/Resources.resw |   4 +-
 src/Calculator/Views/Settings.xaml            | 291 +++++++-----------
 src/Calculator/Views/Settings.xaml.cs         |   6 +-
 5 files changed, 121 insertions(+), 185 deletions(-)

diff --git a/nuget.config b/nuget.config
index e59e698f..ca8e03c6 100644
--- a/nuget.config
+++ b/nuget.config
@@ -7,4 +7,4 @@
   <disabledPackageSources>
     <clear />
   </disabledPackageSources>
-</configuration>
+</configuration>
\ No newline at end of file
diff --git a/src/Calculator/Calculator.csproj b/src/Calculator/Calculator.csproj
index 653eafaf..e9f71be3 100644
--- a/src/Calculator/Calculator.csproj
+++ b/src/Calculator/Calculator.csproj
@@ -793,6 +793,9 @@
     </Page>
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="CommunityToolkit.Uwp.Controls.SettingsControls">
+      <Version>8.0.230823-rc</Version>
+    </PackageReference>
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
       <Version>6.2.14</Version>
     </PackageReference>
diff --git a/src/Calculator/Resources/en-US/Resources.resw b/src/Calculator/Resources/en-US/Resources.resw
index 82643890..c486fb20 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -4722,11 +4722,11 @@
     <value>Appearance</value>
     <comment>Subtitle of appearance setting on Settings page</comment>
   </data>
-  <data name="SettingsAppThemeTitle.Text" xml:space="preserve">
+  <data name="AppThemeExpander.Header" xml:space="preserve">
     <value>App theme</value>
     <comment>Title of App theme expander</comment>
   </data>
-  <data name="SettingsAppThemeDescription.Text" xml:space="preserve">
+  <data name="AppThemeExpander.Description" xml:space="preserve">
     <value>Select which app theme to display</value>
     <comment>Description of App theme expander</comment>
   </data>
diff --git a/src/Calculator/Views/Settings.xaml b/src/Calculator/Views/Settings.xaml
index 44848a79..e1eaf0ce 100644
--- a/src/Calculator/Views/Settings.xaml
+++ b/src/Calculator/Views/Settings.xaml
@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
              xmlns:utils="using:CalculatorApp.Utils"
@@ -14,7 +15,7 @@
         <ResourceDictionary>
             <Style x:Key="SettingsContentScrollViewStyle" TargetType="ScrollViewer">
                 <Setter Property="HorizontalAlignment" Value="Stretch"/>
-                <Setter Property="VerticalAlignment" Value="Top"/>
+                <Setter Property="VerticalAlignment" Value="Stretch"/>
                 <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
                 <Setter Property="HorizontalScrollMode" Value="Disabled"/>
                 <Setter Property="IsHorizontalRailEnabled" Value="False"/>
@@ -31,11 +32,19 @@
                 <Setter Property="TextWrapping" Value="Wrap"/>
             </Style>
 
+            <Style x:Key="SettingsCategoryTitleTextBlockStyle"
+                   BasedOn="{StaticResource BodyStrongTextBlockStyle}"
+                   TargetType="TextBlock">
+                <Setter Property="Margin" Value="0,30,0,4"/>
+            </Style>
+
             <automation:NarratorNotifier x:Name="NarratorNotifier"/>
 
             <!-- Override default hyperlink button background color -->
             <StaticResource x:Key="HyperlinkButtonBackgroundPointerOver" ResourceKey="SubtleFillColorTransparentBrush"/>
             <StaticResource x:Key="HyperlinkButtonBackgroundPressed" ResourceKey="SubtleFillColorTransparentBrush"/>
+
+            <x:Double x:Key="SettingsCardSpacing">4</x:Double>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -44,42 +53,6 @@
             <RowDefinition Height="{x:Bind TitleBarHeight, Mode=OneWay}"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="LargeWideView">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="690"/>
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="ColumnAbout.Width" Value="324"/>
-                        <Setter Target="AboutContentGrid.(Grid.Row)" Value="0"/>
-                        <Setter Target="AboutContentGrid.(Grid.RowSpan)" Value="3"/>
-                        <Setter Target="AboutContentGrid.(Grid.Column)" Value="1"/>
-                        <Setter Target="AboutGroupTitle.Margin" Value="0"/>
-                        <Setter Target="AboutContentGrid.Margin" Value="60,0,0,0"/>
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="SideVisible">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="632"/>
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="ColumnMain.Width" Value="*"/>
-                        <Setter Target="ColumnAbout.Width" Value="*"/>
-                        <Setter Target="AboutContentGrid.(Grid.Row)" Value="0"/>
-                        <Setter Target="AboutContentGrid.(Grid.RowSpan)" Value="3"/>
-                        <Setter Target="AboutContentGrid.(Grid.Column)" Value="1"/>
-                        <Setter Target="AboutGroupTitle.Margin" Value="0"/>
-                        <Setter Target="AboutContentGrid.Margin" Value="60,0,0,0"/>
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="DefaultLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="0"/>
-                    </VisualState.StateTriggers>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
 
         <Button x:Name="BackButton"
                 Grid.Row="0"
@@ -104,160 +77,120 @@
         </Grid>
 
         <ScrollViewer Grid.Row="1"
-                      Margin="0,60,0,0"
+                      Margin="0,30,0,0"
                       Padding="24,0,24,16"
                       Style="{StaticResource SettingsContentScrollViewStyle}">
-            <Grid x:Name="ContentGrid">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition x:Name="ColumnMain" Width="*"/>
-                    <ColumnDefinition x:Name="ColumnAbout" Width="0"/>
-                </Grid.ColumnDefinitions>
 
-                <Grid.RowDefinitions>
-                    <RowDefinition x:Name="AppearanceTitleRow" Height="Auto"/>
-                    <RowDefinition x:Name="AppearanceExpanderRow" Height="Auto"/>
-                    <RowDefinition x:Name="AboutTitleContentRow" Height="*"/>
-                </Grid.RowDefinitions>
-
-                <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
+            <StackPanel Orientation="Vertical" Spacing="{StaticResource SettingsCardSpacing}">
+                <StackPanel.ChildrenTransitions>
+                    <EntranceThemeTransition FromVerticalOffset="50" IsStaggeringEnabled="True"/>
+                    <RepositionThemeTransition IsStaggeringEnabled="False"/>
+                </StackPanel.ChildrenTransitions>
+                <TextBlock Style="{StaticResource SettingsCategoryTitleTextBlockStyle}"
                            AutomationProperties.HeadingLevel="Level1"
                            Text="{utils:ResourceString Name=SettingsAppearance/Text}"/>
+                <toolkit:SettingsExpander x:Name="AppThemeExpander"
+                                       Description="{utils:ResourceString Name=AppThemeExpander/Description}"
+                                       Header="{utils:ResourceString Name=AppThemeExpander/Header}">
+                    <toolkit:SettingsExpander.HeaderIcon>
+                        <FontIcon Glyph="&#xE790;"/>
+                    </toolkit:SettingsExpander.HeaderIcon>
+                    <toolkit:SettingsExpander.Items>
+                        <toolkit:SettingsCard ContentAlignment="Left">
+                            <muxc:RadioButtons x:Name="ThemeRadioButtons"
+                                               Margin="0,-8,0,0"
+                                               SelectionChanged="OnThemeSelectionChanged">
+                                <RadioButton x:Name="LightThemeRadioButton"
+                                             Content="{utils:ResourceString Name=LightThemeRadioButton/Content}"
+                                             Tag="Light"/>
+                                <RadioButton x:Name="DarkThemeRadioButton"
+                                             Content="{utils:ResourceString Name=DarkThemeRadioButton/Content}"
+                                             Tag="Dark"/>
+                                <RadioButton x:Name="SystemThemeRadioButton"
+                                             Content="{utils:ResourceString Name=SystemThemeRadioButton/Content}"
+                                             Tag="Default"/>
+                            </muxc:RadioButtons>
+                        </toolkit:SettingsCard>
+                    </toolkit:SettingsExpander.Items>
+                </toolkit:SettingsExpander>
 
-                <muxc:Expander x:Name="AppThemeExpander"
-                               Grid.Row="1"
-                               Margin="0,8,0,0"
-                               HorizontalAlignment="Stretch"
-                               VerticalAlignment="Top"
-                               HorizontalContentAlignment="Left"
-                               AutomationProperties.Name="{utils:ResourceString Name=AppThemeExpander/[using:Windows.UI.Xaml.Automation]AutomationProperties/Name}"
-                               ExpandDirection="Down"
-                               IsExpanded="False">
-                    <muxc:Expander.Header>
-                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto"/>
-                                <ColumnDefinition Width="*"/>
-                            </Grid.ColumnDefinitions>
+                <TextBlock x:Name="AboutGroupTitle"
+                           Style="{ThemeResource SettingsCategoryTitleTextBlockStyle}"
+                           AutomationProperties.HeadingLevel="Level1"
+                           Text="{utils:ResourceString Name=AboutGroupTitle/Text}"/>
+                <toolkit:SettingsExpander x:Name="AboutExpander">
+                    <toolkit:SettingsExpander.HeaderIcon>
+                        <BitmapIcon AutomationProperties.AccessibilityView="Raw" UriSource="ms-appx:///Assets/CalculatorAppList.png"/>
+                    </toolkit:SettingsExpander.HeaderIcon>
+                    <TextBlock x:Name="AboutBuildVersion"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                               IsTextSelectionEnabled="True"/>
+                    <toolkit:SettingsExpander.Items>
+                        <toolkit:SettingsCard ContentAlignment="Left">
+                            <StackPanel Margin="0,4,0,6"
+                                        Orientation="Vertical"
+                                        Spacing="12">
 
-                            <FontIcon Margin="0,0,12,0"
-                                      VerticalAlignment="Center"
-                                      Foreground="{ThemeResource TextFillColorPrimaryBrush}"
-                                      FontFamily="{ThemeResource CalculatorFontFamily}"
-                                      FontSize="16"
-                                      Glyph="&#xE790;"/>
+                                <HyperlinkButton x:Name="AboutEULA"
+                                                 Padding="0"
+                                                 NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
+                                                 ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
+                                    <TextBlock FontSize="{ThemeResource BodyFontSize}"
+                                               Text="{utils:ResourceString Name=AboutEULA/Text}"
+                                               TextWrapping="Wrap"/>
+                                </HyperlinkButton>
 
-                            <StackPanel Grid.Column="1"
-                                        Margin="0,12"
-                                        Orientation="Vertical">
-                                <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{utils:ResourceString Name=SettingsAppThemeTitle/Text}"/>
-                                <TextBlock Style="{StaticResource CaptionTextBlockStyle}"
-                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                           Text="{utils:ResourceString Name=SettingsAppThemeDescription/Text}"
-                                           TextWrapping="WrapWholeWords"/>
+                                <HyperlinkButton x:Name="AboutControlServicesAgreement"
+                                                 Padding="0"
+                                                 NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
+                                                 ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
+                                    <TextBlock FontSize="{ThemeResource BodyFontSize}"
+                                               Text="{utils:ResourceString Name=AboutControlServicesAgreement/Text}"
+                                               TextWrapping="Wrap"/>
+                                </HyperlinkButton>
+
+                                <HyperlinkButton x:Name="AboutControlPrivacyStatement"
+                                                 Padding="0"
+                                                 NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
+                                                 ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
+                                    <TextBlock FontSize="{ThemeResource BodyFontSize}"
+                                               Text="{utils:ResourceString Name=AboutControlPrivacyStatement/Text}"
+                                               TextWrapping="Wrap"/>
+                                </HyperlinkButton>
                             </StackPanel>
-                        </Grid>
-                    </muxc:Expander.Header>
-                    <muxc:Expander.Content>
-                        <muxc:RadioButtons x:Name="ThemeRadioButtons"
-                                           Margin="32,0,0,0"
-                                           SelectionChanged="OnThemeSelectionChanged">
-                            <RadioButton x:Name="LightThemeRadioButton"
-                                         Content="{utils:ResourceString Name=LightThemeRadioButton/Content}"
-                                         Tag="Light"/>
-                            <RadioButton x:Name="DarkThemeRadioButton"
-                                         Content="{utils:ResourceString Name=DarkThemeRadioButton/Content}"
-                                         Tag="Dark"/>
-                            <RadioButton x:Name="SystemThemeRadioButton"
-                                         Content="{utils:ResourceString Name=SystemThemeRadioButton/Content}"
-                                         Tag="Default"/>
-                        </muxc:RadioButtons>
-                    </muxc:Expander.Content>
-                </muxc:Expander>
+                        </toolkit:SettingsCard>
+                    </toolkit:SettingsExpander.Items>
+                </toolkit:SettingsExpander>
 
-                <Grid x:Name="AboutContentGrid" Grid.Row="2">
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition Height="Auto"/>
-                    </Grid.RowDefinitions>
+                <HyperlinkButton x:Name="FeedbackButton"
+                                 MinWidth="120"
+                                 Margin="-12,4,0,0"
+                                 HorizontalAlignment="Left"
+                                 VerticalAlignment="Top"
+                                 FontSize="{StaticResource BodyFontSize}"
+                                 Click="FeedbackButton_Click"
+                                 Content="{utils:ResourceString Name=FeedbackButton/Content}"/>
 
-                    <TextBlock x:Name="AboutGroupTitle"
-                               Margin="0,20,0,0"
-                               Style="{ThemeResource BodyStrongTextBlockStyle}"
-                               AutomationProperties.HeadingLevel="Level1"
-                               Text="{utils:ResourceString Name=AboutGroupTitle/Text}"/>
-                    <StackPanel Grid.Row="1"
-                                Margin="0,8,0,0"
-                                Orientation="Vertical">
-                        <RichTextBlock x:Name="AboutContentBody" Style="{StaticResource SettingsRichTextBlockStyle}">
-                            <Paragraph>
-                                <Run x:Name="AboutBuildVersion"/>
-                                <LineBreak/>
-                                <Run x:Name="AboutControlCopyrightRun"/>
-                            </Paragraph>
-                        </RichTextBlock>
+                <RichTextBlock x:Name="AboutContribute"
+                               Grid.Row="2"
+                               Margin="1,9,0,0"
+                               Style="{StaticResource SettingsRichTextBlockStyle}">
+                    <Paragraph>
+                        <!--
+                            Note: don't put Hyperlink element start to the next line
+                            otherwise unexpected whitespace will be add.
+                        -->
+                        <Run x:Name="ContributeRunBeforeLink"/><Hyperlink Foreground="{x:Bind AboutEULA.Foreground, Mode=OneWay}"
+                                   NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
+                                   TextDecorations="None"
+                                   ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939"
+                                   UnderlineStyle="None">
+                            <Run x:Name="ContributeRunLink"/>
+                        </Hyperlink><Run x:Name="ContributeRunAfterLink"/>
+                    </Paragraph>
+                </RichTextBlock>
 
-                        <HyperlinkButton x:Name="AboutEULA"
-                                         Margin="0,16,0,0"
-                                         Padding="0"
-                                         NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
-                                         ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
-                            <TextBlock FontSize="{ThemeResource BodyFontSize}"
-                                       Text="{utils:ResourceString Name=AboutEULA/Text}"
-                                       TextWrapping="Wrap"/>
-                        </HyperlinkButton>
-
-                        <HyperlinkButton x:Name="AboutControlServicesAgreement"
-                                         Margin="0,16,0,0"
-                                         Padding="0"
-                                         NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
-                                         ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
-                            <TextBlock FontSize="{ThemeResource BodyFontSize}"
-                                       Text="{utils:ResourceString Name=AboutControlServicesAgreement/Text}"
-                                       TextWrapping="Wrap"/>
-                        </HyperlinkButton>
-
-                        <HyperlinkButton x:Name="AboutControlPrivacyStatement"
-                                         Margin="0,16,0,0"
-                                         Padding="0"
-                                         NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
-                                         ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
-                            <TextBlock FontSize="{ThemeResource BodyFontSize}"
-                                       Text="{utils:ResourceString Name=AboutControlPrivacyStatement/Text}"
-                                       TextWrapping="Wrap"/>
-                        </HyperlinkButton>
-
-                        <Button x:Name="FeedbackButton"
-                                MinWidth="120"
-                                Margin="0,24,0,0"
-                                HorizontalAlignment="Left"
-                                VerticalAlignment="Top"
-                                FontSize="{StaticResource BodyFontSize}"
-                                Click="FeedbackButton_Click"
-                                Content="{utils:ResourceString Name=FeedbackButton/Content}"/>
-                    </StackPanel>
-                    <RichTextBlock x:Name="AboutContribute"
-                                   Grid.Row="2"
-                                   Margin="0,16,0,0"
-                                   Style="{StaticResource SettingsRichTextBlockStyle}">
-                        <Paragraph>
-                            <!--
-                                Note: don't put Hyperlink element start to the next line
-                                otherwise unexpected whitespace will be add.
-                            -->
-                            <Run x:Name="ContributeRunBeforeLink"/>
-                            <Hyperlink Foreground="{x:Bind AboutEULA.Foreground, Mode=OneWay}"
-                                       NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
-                                       TextDecorations="None"
-                                       ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939"
-                                       UnderlineStyle="None">
-                                <Run x:Name="ContributeRunLink"/>
-                            </Hyperlink>
-                            <Run x:Name="ContributeRunAfterLink"/>
-                        </Paragraph>
-                    </RichTextBlock>
-                </Grid>
-            </Grid>
+            </StackPanel>
         </ScrollViewer>
     </Grid>
 </UserControl>
diff --git a/src/Calculator/Views/Settings.xaml.cs b/src/Calculator/Views/Settings.xaml.cs
index 0889b09a..b68a8f6b 100644
--- a/src/Calculator/Views/Settings.xaml.cs
+++ b/src/Calculator/Views/Settings.xaml.cs
@@ -45,7 +45,7 @@ namespace CalculatorApp
 
             var copyrightText =
                 LocalizationStringUtil.GetLocalizedString(resourceLoader.GetResourceString("AboutControlCopyright"), BUILD_YEAR);
-            AboutControlCopyrightRun.Text = copyrightText;
+            AboutExpander.Description = copyrightText;
 
             InitializeContributeTextBlock();
         }
@@ -108,8 +108,8 @@ namespace CalculatorApp
         private void SetVersionString()
         {
             PackageVersion version = Package.Current.Id.Version;
-            string appName = AppResourceProvider.GetInstance().GetResourceString("AppName");
-            AboutBuildVersion.Text = appName + " " + version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
+            AboutExpander.Header = AppResourceProvider.GetInstance().GetResourceString("AppName");
+            AboutBuildVersion.Text = version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
         }
 
         private void InitializeContributeTextBlock()