From 47f314bb102cf99d2596a6a3cde0e6c293c5f0b9 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 16 Mar 2023 11:06:40 +0100
Subject: [PATCH] [Settings] Using SettingsControls (#1964)

* Adding SettingsControls package

* Using new SettingsControls

* Tweaks

* Version bump

* Replacing Button with HyperlinkButton per design spec

* Update Settings.xaml

* Fix top spacing
---
 nuget.config                                  |   3 +-
 src/Calculator/Calculator.csproj              |   3 +
 src/Calculator/Resources/en-US/Resources.resw |   6 +-
 src/Calculator/Views/Settings.xaml            | 289 +++++++-----------
 src/Calculator/Views/Settings.xaml.cs         |   6 +-
 5 files changed, 123 insertions(+), 184 deletions(-)

diff --git a/nuget.config b/nuget.config
index 14471ade..0b8604f4 100644
--- a/nuget.config
+++ b/nuget.config
@@ -1,8 +1,9 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <configuration>
   <packageSources>
     <clear />
     <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+    <add key="Toolkit Labs" value="https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json" />
   </packageSources>
   <disabledPackageSources>
     <clear />
diff --git a/src/Calculator/Calculator.csproj b/src/Calculator/Calculator.csproj
index aa7e1f17..f24e94ad 100644
--- a/src/Calculator/Calculator.csproj
+++ b/src/Calculator/Calculator.csproj
@@ -791,6 +791,9 @@
     </Page>
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="CommunityToolkit.Labs.Uwp.SettingsControls">
+      <Version>0.0.16</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 d4bf7270..5670daa9 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -4706,11 +4706,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>
@@ -4738,4 +4738,4 @@
     <value>App theme setting</value>
     <comment>Screen reader prompt for the App theme Setting radio buttons group</comment>
   </data>
-</root>
\ No newline at end of file
+</root>
diff --git a/src/Calculator/Views/Settings.xaml b/src/Calculator/Views/Settings.xaml
index e25dc4de..089e0797 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:labs="using:CommunityToolkit.Labs.WinUI"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
              Loaded="OnLoaded"
@@ -13,7 +14,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"/>
@@ -30,11 +31,19 @@
                 <Setter Property="TextWrapping" Value="Wrap"/>
             </Style>
 
+            <Style x:Key="SettingsCategoryTitleTextBlockStyle"
+                   BasedOn="{StaticResource BodyStrongTextBlockStyle}"
+                   TargetType="TextBlock">
+                <Setter Property="Margin" Value="0,29,0,5"/>
+            </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">3</x:Double>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -43,42 +52,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"
                 x:Uid="TitleBarBackButton"
@@ -103,158 +76,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>
 
+            <StackPanel Orientation="Vertical" Spacing="{StaticResource SettingsCardSpacing}">
+                <StackPanel.ChildrenTransitions>
+                    <EntranceThemeTransition FromVerticalOffset="50" IsStaggeringEnabled="True"/>
+                    <RepositionThemeTransition IsStaggeringEnabled="False"/>
+                </StackPanel.ChildrenTransitions>
                 <TextBlock x:Uid="SettingsAppearance"
-                           Style="{StaticResource BodyStrongTextBlockStyle}"
+                           Style="{StaticResource SettingsCategoryTitleTextBlockStyle}"
                            AutomationProperties.HeadingLevel="Level1"/>
+                <labs:SettingsExpander x:Name="AppThemeExpander"
+                                       Description="Select which app theme to display"
+                                       Header="App theme">
+                    <labs:SettingsExpander.HeaderIcon>
+                        <FontIcon Glyph="&#xE790;"/>
+                    </labs:SettingsExpander.HeaderIcon>
+                    <labs:SettingsExpander.Items>
+                        <labs:SettingsCard ContentAlignment="Left">
+                            <muxc:RadioButtons x:Name="ThemeRadioButtons"
+                                               Margin="0,-8,0,0"
+                                               SelectionChanged="OnThemeSelectionChanged">
+                                <RadioButton x:Name="LightThemeRadioButton"
+                                             x:Uid="LightThemeRadioButton"
+                                             Tag="Light"/>
+                                <RadioButton x:Name="DarkThemeRadioButton"
+                                             x:Uid="DarkThemeRadioButton"
+                                             Tag="Dark"/>
+                                <RadioButton x:Name="SystemThemeRadioButton"
+                                             x:Uid="SystemThemeRadioButton"
+                                             Tag="Default"/>
+                            </muxc:RadioButtons>
+                        </labs:SettingsCard>
+                    </labs:SettingsExpander.Items>
+                </labs:SettingsExpander>
 
-                <muxc:Expander x:Name="AppThemeExpander"
-                               x:Uid="AppThemeExpander"
-                               Grid.Row="1"
-                               Margin="0,8,0,0"
-                               HorizontalAlignment="Stretch"
-                               VerticalAlignment="Top"
-                               HorizontalContentAlignment="Left"
-                               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"
+                           x:Uid="AboutGroupTitle"
+                           Style="{ThemeResource SettingsCategoryTitleTextBlockStyle}"
+                           AutomationProperties.HeadingLevel="Level1"/>
+                <labs:SettingsExpander x:Name="AboutExpander">
+                    <labs:SettingsExpander.HeaderIcon>
+                        <BitmapIcon AutomationProperties.AccessibilityView="Raw" UriSource="ms-appx:///Assets/CalculatorAppList.png"/>
+                    </labs:SettingsExpander.HeaderIcon>
+                    <TextBlock x:Name="AboutBuildVersion"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                               IsTextSelectionEnabled="True"/>
+                    <labs:SettingsExpander.Items>
+                        <labs: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 x:Uid="AboutEULA"
+                                               FontSize="{ThemeResource BodyFontSize}"
+                                               TextWrapping="Wrap"/>
+                                </HyperlinkButton>
 
-                            <StackPanel Grid.Column="1"
-                                        Margin="0,12"
-                                        Orientation="Vertical">
-                                <TextBlock x:Uid="SettingsAppThemeTitle" Style="{StaticResource BodyTextBlockStyle}"/>
-                                <TextBlock x:Uid="SettingsAppThemeDescription"
-                                           Style="{StaticResource CaptionTextBlockStyle}"
-                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                           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 x:Uid="AboutControlServicesAgreement"
+                                               FontSize="{ThemeResource BodyFontSize}"
+                                               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 x:Uid="AboutControlPrivacyStatement"
+                                               FontSize="{ThemeResource BodyFontSize}"
+                                               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"
-                                         x:Uid="LightThemeRadioButton"
-                                         Tag="Light"/>
-                            <RadioButton x:Name="DarkThemeRadioButton"
-                                         x:Uid="DarkThemeRadioButton"
-                                         Tag="Dark"/>
-                            <RadioButton x:Name="SystemThemeRadioButton"
-                                         x:Uid="SystemThemeRadioButton"
-                                         Tag="Default"/>
-                        </muxc:RadioButtons>
-                    </muxc:Expander.Content>
-                </muxc:Expander>
+                        </labs:SettingsCard>
+                    </labs:SettingsExpander.Items>
+                </labs: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"
+                                 x:Uid="FeedbackButton"
+                                 MinWidth="120"
+                                 Margin="-12,4,0,0"
+                                 HorizontalAlignment="Left"
+                                 VerticalAlignment="Top"
+                                 FontSize="{StaticResource BodyFontSize}"
+                                 Click="FeedbackButton_Click"/>
 
-                    <TextBlock x:Name="AboutGroupTitle"
-                               x:Uid="AboutGroupTitle"
-                               Margin="0,20,0,0"
-                               Style="{ThemeResource BodyStrongTextBlockStyle}"
-                               AutomationProperties.HeadingLevel="Level1"/>
-                    <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 x:Uid="AboutEULA"
-                                       FontSize="{ThemeResource BodyFontSize}"
-                                       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 x:Uid="AboutControlServicesAgreement"
-                                       FontSize="{ThemeResource BodyFontSize}"
-                                       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 x:Uid="AboutControlPrivacyStatement"
-                                       FontSize="{ThemeResource BodyFontSize}"
-                                       TextWrapping="Wrap"/>
-                        </HyperlinkButton>
-
-                        <Button x:Name="FeedbackButton"
-                                x:Uid="FeedbackButton"
-                                MinWidth="120"
-                                Margin="0,24,0,0"
-                                HorizontalAlignment="Left"
-                                VerticalAlignment="Top"
-                                FontSize="{StaticResource BodyFontSize}"
-                                Click="FeedbackButton_Click"/>
-                    </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()