Adding new Settings UX (#2049)

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

This reverts commit fbc6598770.

* Updating namespaces

* Using Uwp package and loc fix
This commit is contained in:
Niels Laute 2023-12-04 13:18:32 +01:00 committed by GitHub
parent eb0324f1a0
commit c2c4795cee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 121 additions and 185 deletions

View file

@ -793,6 +793,9 @@
</Page> </Page>
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<PackageReference Include="CommunityToolkit.Uwp.Controls.SettingsControls">
<Version>8.0.230823-rc</Version>
</PackageReference>
<PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform"> <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
<Version>6.2.14</Version> <Version>6.2.14</Version>
</PackageReference> </PackageReference>

View file

@ -4722,11 +4722,11 @@
<value>Appearance</value> <value>Appearance</value>
<comment>Subtitle of appearance setting on Settings page</comment> <comment>Subtitle of appearance setting on Settings page</comment>
</data> </data>
<data name="SettingsAppThemeTitle.Text" xml:space="preserve"> <data name="AppThemeExpander.Header" xml:space="preserve">
<value>App theme</value> <value>App theme</value>
<comment>Title of App theme expander</comment> <comment>Title of App theme expander</comment>
</data> </data>
<data name="SettingsAppThemeDescription.Text" xml:space="preserve"> <data name="AppThemeExpander.Description" xml:space="preserve">
<value>Select which app theme to display</value> <value>Select which app theme to display</value>
<comment>Description of App theme expander</comment> <comment>Description of App theme expander</comment>
</data> </data>

View file

@ -3,6 +3,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation" xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:utils="using:CalculatorApp.Utils" xmlns:utils="using:CalculatorApp.Utils"
@ -14,7 +15,7 @@
<ResourceDictionary> <ResourceDictionary>
<Style x:Key="SettingsContentScrollViewStyle" TargetType="ScrollViewer"> <Style x:Key="SettingsContentScrollViewStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/> <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="HorizontalScrollMode" Value="Disabled"/> <Setter Property="HorizontalScrollMode" Value="Disabled"/>
<Setter Property="IsHorizontalRailEnabled" Value="False"/> <Setter Property="IsHorizontalRailEnabled" Value="False"/>
@ -31,11 +32,19 @@
<Setter Property="TextWrapping" Value="Wrap"/> <Setter Property="TextWrapping" Value="Wrap"/>
</Style> </Style>
<Style x:Key="SettingsCategoryTitleTextBlockStyle"
BasedOn="{StaticResource BodyStrongTextBlockStyle}"
TargetType="TextBlock">
<Setter Property="Margin" Value="0,30,0,4"/>
</Style>
<automation:NarratorNotifier x:Name="NarratorNotifier"/> <automation:NarratorNotifier x:Name="NarratorNotifier"/>
<!-- Override default hyperlink button background color --> <!-- Override default hyperlink button background color -->
<StaticResource x:Key="HyperlinkButtonBackgroundPointerOver" ResourceKey="SubtleFillColorTransparentBrush"/> <StaticResource x:Key="HyperlinkButtonBackgroundPointerOver" ResourceKey="SubtleFillColorTransparentBrush"/>
<StaticResource x:Key="HyperlinkButtonBackgroundPressed" ResourceKey="SubtleFillColorTransparentBrush"/> <StaticResource x:Key="HyperlinkButtonBackgroundPressed" ResourceKey="SubtleFillColorTransparentBrush"/>
<x:Double x:Key="SettingsCardSpacing">4</x:Double>
</ResourceDictionary> </ResourceDictionary>
</UserControl.Resources> </UserControl.Resources>
@ -44,42 +53,6 @@
<RowDefinition Height="{x:Bind TitleBarHeight, Mode=OneWay}"/> <RowDefinition Height="{x:Bind TitleBarHeight, Mode=OneWay}"/>
<RowDefinition Height="*"/> <RowDefinition Height="*"/>
</Grid.RowDefinitions> </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" <Button x:Name="BackButton"
Grid.Row="0" Grid.Row="0"
@ -104,62 +77,28 @@
</Grid> </Grid>
<ScrollViewer Grid.Row="1" <ScrollViewer Grid.Row="1"
Margin="0,60,0,0" Margin="0,30,0,0"
Padding="24,0,24,16" Padding="24,0,24,16"
Style="{StaticResource SettingsContentScrollViewStyle}"> Style="{StaticResource SettingsContentScrollViewStyle}">
<Grid x:Name="ContentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnMain" Width="*"/>
<ColumnDefinition x:Name="ColumnAbout" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions> <StackPanel Orientation="Vertical" Spacing="{StaticResource SettingsCardSpacing}">
<RowDefinition x:Name="AppearanceTitleRow" Height="Auto"/> <StackPanel.ChildrenTransitions>
<RowDefinition x:Name="AppearanceExpanderRow" Height="Auto"/> <EntranceThemeTransition FromVerticalOffset="50" IsStaggeringEnabled="True"/>
<RowDefinition x:Name="AboutTitleContentRow" Height="*"/> <RepositionThemeTransition IsStaggeringEnabled="False"/>
</Grid.RowDefinitions> </StackPanel.ChildrenTransitions>
<TextBlock Style="{StaticResource SettingsCategoryTitleTextBlockStyle}"
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
AutomationProperties.HeadingLevel="Level1" AutomationProperties.HeadingLevel="Level1"
Text="{utils:ResourceString Name=SettingsAppearance/Text}"/> Text="{utils:ResourceString Name=SettingsAppearance/Text}"/>
<toolkit:SettingsExpander x:Name="AppThemeExpander"
<muxc:Expander x:Name="AppThemeExpander" Description="{utils:ResourceString Name=AppThemeExpander/Description}"
Grid.Row="1" Header="{utils:ResourceString Name=AppThemeExpander/Header}">
Margin="0,8,0,0" <toolkit:SettingsExpander.HeaderIcon>
HorizontalAlignment="Stretch" <FontIcon Glyph="&#xE790;"/>
VerticalAlignment="Top" </toolkit:SettingsExpander.HeaderIcon>
HorizontalContentAlignment="Left" <toolkit:SettingsExpander.Items>
AutomationProperties.Name="{utils:ResourceString Name=AppThemeExpander/[using:Windows.UI.Xaml.Automation]AutomationProperties/Name}" <toolkit:SettingsCard ContentAlignment="Left">
ExpandDirection="Down"
IsExpanded="False">
<muxc:Expander.Header>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon Margin="0,0,12,0"
VerticalAlignment="Center"
Foreground="{ThemeResource TextFillColorPrimaryBrush}"
FontFamily="{ThemeResource CalculatorFontFamily}"
FontSize="16"
Glyph="&#xE790;"/>
<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"/>
</StackPanel>
</Grid>
</muxc:Expander.Header>
<muxc:Expander.Content>
<muxc:RadioButtons x:Name="ThemeRadioButtons" <muxc:RadioButtons x:Name="ThemeRadioButtons"
Margin="32,0,0,0" Margin="0,-8,0,0"
SelectionChanged="OnThemeSelectionChanged"> SelectionChanged="OnThemeSelectionChanged">
<RadioButton x:Name="LightThemeRadioButton" <RadioButton x:Name="LightThemeRadioButton"
Content="{utils:ResourceString Name=LightThemeRadioButton/Content}" Content="{utils:ResourceString Name=LightThemeRadioButton/Content}"
@ -171,34 +110,28 @@
Content="{utils:ResourceString Name=SystemThemeRadioButton/Content}" Content="{utils:ResourceString Name=SystemThemeRadioButton/Content}"
Tag="Default"/> Tag="Default"/>
</muxc:RadioButtons> </muxc:RadioButtons>
</muxc:Expander.Content> </toolkit:SettingsCard>
</muxc:Expander> </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>
<TextBlock x:Name="AboutGroupTitle" <TextBlock x:Name="AboutGroupTitle"
Margin="0,20,0,0" Style="{ThemeResource SettingsCategoryTitleTextBlockStyle}"
Style="{ThemeResource BodyStrongTextBlockStyle}"
AutomationProperties.HeadingLevel="Level1" AutomationProperties.HeadingLevel="Level1"
Text="{utils:ResourceString Name=AboutGroupTitle/Text}"/> Text="{utils:ResourceString Name=AboutGroupTitle/Text}"/>
<StackPanel Grid.Row="1" <toolkit:SettingsExpander x:Name="AboutExpander">
Margin="0,8,0,0" <toolkit:SettingsExpander.HeaderIcon>
Orientation="Vertical"> <BitmapIcon AutomationProperties.AccessibilityView="Raw" UriSource="ms-appx:///Assets/CalculatorAppList.png"/>
<RichTextBlock x:Name="AboutContentBody" Style="{StaticResource SettingsRichTextBlockStyle}"> </toolkit:SettingsExpander.HeaderIcon>
<Paragraph> <TextBlock x:Name="AboutBuildVersion"
<Run x:Name="AboutBuildVersion"/> Foreground="{ThemeResource TextFillColorSecondaryBrush}"
<LineBreak/> IsTextSelectionEnabled="True"/>
<Run x:Name="AboutControlCopyrightRun"/> <toolkit:SettingsExpander.Items>
</Paragraph> <toolkit:SettingsCard ContentAlignment="Left">
</RichTextBlock> <StackPanel Margin="0,4,0,6"
Orientation="Vertical"
Spacing="12">
<HyperlinkButton x:Name="AboutEULA" <HyperlinkButton x:Name="AboutEULA"
Margin="0,16,0,0"
Padding="0" Padding="0"
NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064" NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064"> ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
@ -208,7 +141,6 @@
</HyperlinkButton> </HyperlinkButton>
<HyperlinkButton x:Name="AboutControlServicesAgreement" <HyperlinkButton x:Name="AboutControlServicesAgreement"
Margin="0,16,0,0"
Padding="0" Padding="0"
NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631" NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631"> ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
@ -218,7 +150,6 @@
</HyperlinkButton> </HyperlinkButton>
<HyperlinkButton x:Name="AboutControlPrivacyStatement" <HyperlinkButton x:Name="AboutControlPrivacyStatement"
Margin="0,16,0,0"
Padding="0" Padding="0"
NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839" NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839"> ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
@ -226,38 +157,40 @@
Text="{utils:ResourceString Name=AboutControlPrivacyStatement/Text}" Text="{utils:ResourceString Name=AboutControlPrivacyStatement/Text}"
TextWrapping="Wrap"/> TextWrapping="Wrap"/>
</HyperlinkButton> </HyperlinkButton>
</StackPanel>
</toolkit:SettingsCard>
</toolkit:SettingsExpander.Items>
</toolkit:SettingsExpander>
<Button x:Name="FeedbackButton" <HyperlinkButton x:Name="FeedbackButton"
MinWidth="120" MinWidth="120"
Margin="0,24,0,0" Margin="-12,4,0,0"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Top" VerticalAlignment="Top"
FontSize="{StaticResource BodyFontSize}" FontSize="{StaticResource BodyFontSize}"
Click="FeedbackButton_Click" Click="FeedbackButton_Click"
Content="{utils:ResourceString Name=FeedbackButton/Content}"/> Content="{utils:ResourceString Name=FeedbackButton/Content}"/>
</StackPanel>
<RichTextBlock x:Name="AboutContribute" <RichTextBlock x:Name="AboutContribute"
Grid.Row="2" Grid.Row="2"
Margin="0,16,0,0" Margin="1,9,0,0"
Style="{StaticResource SettingsRichTextBlockStyle}"> Style="{StaticResource SettingsRichTextBlockStyle}">
<Paragraph> <Paragraph>
<!-- <!--
Note: don't put Hyperlink element start to the next line Note: don't put Hyperlink element start to the next line
otherwise unexpected whitespace will be add. otherwise unexpected whitespace will be add.
--> -->
<Run x:Name="ContributeRunBeforeLink"/> <Run x:Name="ContributeRunBeforeLink"/><Hyperlink Foreground="{x:Bind AboutEULA.Foreground, Mode=OneWay}"
<Hyperlink Foreground="{x:Bind AboutEULA.Foreground, Mode=OneWay}"
NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939" NavigateUri="https://go.microsoft.com/fwlink/?linkid=2099939"
TextDecorations="None" TextDecorations="None"
ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939" ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?linkid=2099939"
UnderlineStyle="None"> UnderlineStyle="None">
<Run x:Name="ContributeRunLink"/> <Run x:Name="ContributeRunLink"/>
</Hyperlink> </Hyperlink><Run x:Name="ContributeRunAfterLink"/>
<Run x:Name="ContributeRunAfterLink"/>
</Paragraph> </Paragraph>
</RichTextBlock> </RichTextBlock>
</Grid>
</Grid> </StackPanel>
</ScrollViewer> </ScrollViewer>
</Grid> </Grid>
</UserControl> </UserControl>

View file

@ -45,7 +45,7 @@ namespace CalculatorApp
var copyrightText = var copyrightText =
LocalizationStringUtil.GetLocalizedString(resourceLoader.GetResourceString("AboutControlCopyright"), BUILD_YEAR); LocalizationStringUtil.GetLocalizedString(resourceLoader.GetResourceString("AboutControlCopyright"), BUILD_YEAR);
AboutControlCopyrightRun.Text = copyrightText; AboutExpander.Description = copyrightText;
InitializeContributeTextBlock(); InitializeContributeTextBlock();
} }
@ -108,8 +108,8 @@ namespace CalculatorApp
private void SetVersionString() private void SetVersionString()
{ {
PackageVersion version = Package.Current.Id.Version; PackageVersion version = Package.Current.Id.Version;
string appName = AppResourceProvider.GetInstance().GetResourceString("AppName"); AboutExpander.Header = AppResourceProvider.GetInstance().GetResourceString("AppName");
AboutBuildVersion.Text = appName + " " + version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision; AboutBuildVersion.Text = version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
} }
private void InitializeContributeTextBlock() private void InitializeContributeTextBlock()