[Settings] Multiple UX refinements (e.g. OOBE) (#5113)

* Updated FZ page with new resizing logic

* Multiple UX fixes. Added updated resizing logic to other pages

* Added ImageResizer file format example snippets to tooltip

* Added warning icon in hotkeysettingscontrol

* Fixed formatting

* Keys label can now be set

* Replaced custom titleblocks with converter

* Updated strings

* Added correct links to the images. Added PT description on General page as well.

* Colorpicker image updates

* Rounded corners

* Fix

* Added back in correct subtitles

src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -26,9 +26,11 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
-                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1"/>
+                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}"/>
+                        <Setter Target="GeneralSettingsView.(Grid.Row)" Value="0" />
+                        <Setter Target="LinksPanel.(RelativePanel.Below)" Value="AboutImage"/>
+                        <Setter Target="AboutTitle.Visibility" Value="Visible" />
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="SmallLayout">
@@ -36,9 +38,13 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
-                        <Setter Target="SidePanel.Width" Value="Auto" />
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
+                        <Setter Target="SidePanel.Width" Value="500"/>
+                        <Setter Target="GeneralSettingsView.(Grid.Row)" Value="1" />
+                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
+                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
+                        <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
+                        <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
@@ -54,7 +60,7 @@
 
         <StackPanel Orientation="Vertical" 
                     x:Name="GeneralSettingsView">
-            <TextBlock x:Uid="Admin_Mode"
+            <TextBlock x:Uid="Admin_Mode" FontWeight="SemiBold"
                        Style="{StaticResource SubtitleTextBlockStyle}"/>
 
             <TextBlock Text="{Binding Mode=TwoWay, Path=RunningAsText, Source={StaticResource eventViewModel}}"
@@ -76,7 +82,7 @@
                           x:Uid="GeneralSettings_AlwaysRunAsAdminText"
                           IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
                           IsOn="{Binding Mode=TwoWay, Path=RunElevated, Source={StaticResource eventViewModel}}"/>
-            
+
             <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/doc/devdocs/run-as-admin-detection.md">
                 <TextBlock x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link" />
             </HyperlinkButton>
@@ -85,7 +91,8 @@
             <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <muxc:RadioButtons x:Uid="RadioButtons_Name_Theme" Margin="{StaticResource SmallTopMargin}">
+            <muxc:RadioButtons x:Uid="RadioButtons_Name_Theme"
+                               Margin="{StaticResource SmallTopMargin}">
                 <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"
                              Content="Dark"
                              IsChecked="{ Binding Mode=TwoWay, Path=IsDarkThemeRadioButtonChecked, Source={StaticResource eventViewModel}}"/>
@@ -98,27 +105,26 @@
                              Content="System default"
                              IsChecked="{ Binding Mode=TwoWay, Path=IsSystemThemeRadioButtonChecked, Source={StaticResource eventViewModel}}"/>
             </muxc:RadioButtons>
-            
+
             <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
                           Margin="{StaticResource SmallTopMargin}" 
                           IsOn="{Binding Mode=TwoWay, Path=Startup, Source={StaticResource eventViewModel}}"/>
-            
-            
+
+
 
             <TextBlock x:Uid="General_Updates"
-                        Style="{StaticResource SettingsGroupTitleStyle}"/>
-            <StackPanel Orientation="Horizontal">
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}">
                 <TextBlock Text="Version: " x:Uid="General_Version"  />
                 <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/releases" Margin="4,-6,0,0">
                     <TextBlock Text="{x:Bind ViewModel.PowerToysVersion }" />
                 </HyperlinkButton>
             </StackPanel>
-           
-            
+
+
             <Button x:Uid="GeneralPage_CheckForUpdates"
                     Style="{StaticResource AccentButtonStyle}"
                     Foreground="White"
-                    Margin="{StaticResource SmallTopMargin}"
                     Command="{Binding CheckFoUpdatesEventHandler, Source={StaticResource eventViewModel}}"
                     />
 
@@ -126,40 +132,55 @@
                           Margin="{StaticResource MediumTopMargin}"
                           Visibility="{Binding Mode=TwoWay, Path=IsAdmin, Source={StaticResource eventViewModel}, Converter={StaticResource VisibleIfTrueConverter}}"
                           IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates, Source={StaticResource eventViewModel}}"/>
-            
+
         </StackPanel>
 
-        <StackPanel x:Name="SidePanel"
-                    Orientation="Vertical"
+        <RelativePanel x:Name="SidePanel" 
                     HorizontalAlignment="Left"
                     Width="{StaticResource SidePanelWidth}"
                     Grid.Column="1">
-
-            <TextBlock x:Uid="GeneralPage_AboutPowerToysHeader"
+            <StackPanel x:Name="DescriptionPanel">
+                <TextBlock x:Uid="GeneralPage_AboutPowerToysHeader" x:Name="AboutTitle" Grid.ColumnSpan="2"
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Margin="{StaticResource XSmallBottomMargin}"/>
+                <TextBlock x:Uid="About_PowerToys"
+                           TextWrapping="Wrap"
+                           Grid.Row="1" />
+            </StackPanel>
 
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/">
-                <TextBlock x:Uid="General_Repository"/>
-            </HyperlinkButton>
+            <Border x:Name="AboutImage"
+                    CornerRadius="4"
+                    Grid.Row="2"
+                    MaxWidth="240"
+                    HorizontalAlignment="Left"
+                    Margin="{StaticResource SmallTopBottomMargin}"
+                    RelativePanel.Below="DescriptionPanel">
+                <Image Source="https://aka.ms/powerToysPTSettingImage" />
+            </Border>
+            <StackPanel x:Name="LinksPanel"
+                        RelativePanel.Below="AboutImage"
+                        Orientation="Vertical" >
 
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                <TextBlock x:Uid="GeneralPage_ReportAbug"/>
-            </HyperlinkButton>
+                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/">
+                    <TextBlock x:Uid="General_Repository"/>
+                </HyperlinkButton>
 
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                <TextBlock x:Uid="GeneralPage_RequestAFeature_URL"/>
-            </HyperlinkButton>
+                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                    <TextBlock x:Uid="GeneralPage_ReportAbug"/>
+                </HyperlinkButton>
 
-            <HyperlinkButton NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839">
-                <TextBlock x:Uid="GeneralPage_PrivacyStatement_URL"/>
-            </HyperlinkButton>
+                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                    <TextBlock x:Uid="GeneralPage_RequestAFeature_URL"/>
+                </HyperlinkButton>
 
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md">
-                <TextBlock x:Uid="OpenSource_Notice"/>
-            </HyperlinkButton>
+                <HyperlinkButton NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839">
+                    <TextBlock x:Uid="GeneralPage_PrivacyStatement_URL"/>
+                </HyperlinkButton>
 
-
-        </StackPanel>
+                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md">
+                    <TextBlock x:Uid="OpenSource_Notice"/>
+                </HyperlinkButton>
+            </StackPanel>
+        </RelativePanel>
     </Grid>
-</Page>
+</Page>