Sidepanel updates

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml

@@ -10,126 +10,103 @@
 
     <UserControl.Resources>
         <converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter" GreaterThan="0" TrueValue="Visible" FalseValue="Collapsed" />
+        <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
+            <Style.Setters>
+                <Setter Property="FontWeight" Value="SemiBold"/>
+                <Setter Property="Margin" Value="0,0,16,0"/>
+            </Style.Setters>
+        </Style>
     </UserControl.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Margin="0">
+    <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Padding="48,0,0,0">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*"/>
+ 
         </Grid.RowDefinitions>
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-                <VisualState x:Name="SmallLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
-                        <Setter Target="SidePanel.Width" Value="Auto"/>
-                        <Setter Target="SidePanel.Margin" Value="24,0,24,0"/>
-                        <Setter Target="ModuleContentPresenter.(Grid.Row)" Value="1" />
-                        <Setter Target="ModuleContentPresenter.Margin" Value="24,0,0,0" />
-                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
-                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
-                        <Setter Target="LinksPanel.Margin" Value="0,12,0,0" />
-                        <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
-                        <Setter Target="Header.Margin" Value="24,44,0,0" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
+        
 
         <TextBlock x:Name="Header"
                    Text="{x:Bind ModuleTitle}"
                    FontWeight="SemiBold"
                    FontSize="28"
-                   Margin="48,44,0,0"
+                   Margin="0,44,0,0"
                    VerticalAlignment="Stretch"/>
 
         <ScrollViewer Grid.Row="1">
-            <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Margin="0,0,0,48">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="Auto"/>
-                </Grid.ColumnDefinitions>
+            <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Padding="0,0,48,48">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
                 </Grid.RowDefinitions>
 
-
-                <ContentPresenter x:Name="ModuleContentPresenter"
-                          Content="{x:Bind ModuleContent}"
-                          HorizontalAlignment="Stretch"
-                          HorizontalContentAlignment="Stretch"
-                          Margin="48,12,48,0"
-                          />
-
-                <RelativePanel Grid.Column="1"
-                       x:Name="SidePanel"
-                       Width="{StaticResource SidePanelWidth}"
-                       Margin="0,12,48,0">
-
-                    <TextBlock x:Name="AboutDescription"
-                       Text="{x:Bind ModuleDescription}"
-                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                       TextWrapping="Wrap"/>
-
-                    <HyperlinkButton x:Name="AboutImage"
-                         RelativePanel.Below="AboutDescription"
-                         MaxWidth="240"
-                         CornerRadius="8"
-                         x:Uid="Learn_More_Description"
-                         Padding="0"
-                         NavigateUri="{x:Bind ModuleImageLink}"
-                         Margin="0, 12, 0, 12">
-                        <Image>
+                <Grid ColumnSpacing="16">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="240"/>
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Border CornerRadius="4" VerticalAlignment="Top">
+                        <Image AutomationProperties.AccessibilityView="Raw">
                             <Image.Source>
                                 <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
                             </Image.Source>
                         </Image>
-                    </HyperlinkButton>
+                    </Border>
+                    
+                    <StackPanel Grid.Column="1">
+                        <TextBlock x:Name="AboutDescription"
+                                   Text="{x:Bind ModuleDescription}"
+                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                   TextWrapping="Wrap"/>
 
-                    <StackPanel x:Name="LinksPanel"
-                    Margin="0,1,0,0"
-                    RelativePanel.Below="AboutImage"
-                    Orientation="Vertical">
-
-                        <StackPanel x:Name="ModuleLinksPanel" Orientation="Vertical">
-                            <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
-                                <ItemsControl.ItemTemplate>
-                                    <DataTemplate x:DataType="local:SidePanelLink">
-                                        <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
-                                            <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
-                                        </HyperlinkButton>
-                                    </DataTemplate>
-                                </ItemsControl.ItemTemplate>
-                            </ItemsControl>
-                        </StackPanel>
-
-                        <StackPanel x:Name="AttributionPanel"
-                              Visibility="{x:Bind AttributionLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}"
-                            Orientation="Vertical">
-                            <TextBlock x:Uid="AttributionTitle" Style="{StaticResource SettingsGroupTitleStyle}" />
-
-                            <ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
-                                <ItemsControl.ItemTemplate>
-                                    <DataTemplate x:DataType="local:SidePanelLink">
-                                        <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
-                                            <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
-                                        </HyperlinkButton>
-                                    </DataTemplate>
-                                </ItemsControl.ItemTemplate>
-                            </ItemsControl>
-                        </StackPanel>
+                        <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate x:DataType="local:SidePanelLink">
+                                    <HyperlinkButton NavigateUri="{x:Bind Link}">
+                                        <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
+                                    </HyperlinkButton>
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <StackPanel Orientation="Horizontal"/>
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                        </ItemsControl>
                     </StackPanel>
-                </RelativePanel>
+                 
+                </Grid>
+
+                <ContentPresenter x:Name="ModuleContentPresenter" Grid.Row="1"
+                          Content="{x:Bind ModuleContent}"
+                          HorizontalAlignment="Stretch"
+                          HorizontalContentAlignment="Stretch"
+                          Margin="0,12,0,0"/>
+
+                <StackPanel x:Name="AttributionPanel" Grid.Row="2"
+                             Visibility="{x:Bind AttributionLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}"
+                            Orientation="Vertical">
+                    <TextBlock x:Uid="AttributionTitle"
+                               Style="{ThemeResource BodyStrongTextBlockStyle}"
+                               Margin="2,32,0,8"
+                               AutomationProperties.HeadingLevel="Level2"/>
+
+                    <ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate x:DataType="local:SidePanelLink">
+                                <HyperlinkButton NavigateUri="{x:Bind Link}">
+                                    <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
+                                </HyperlinkButton>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <StackPanel Orientation="Horizontal"/>
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                    </ItemsControl>
+                </StackPanel>
             </Grid>
         </ScrollViewer>
     </Grid>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -879,19 +879,19 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
   <data name="GeneralSettings_VersionIsLatest" xml:space="preserve">
     <value>PowerToys is up to date.</value>
   </data>
-  <data name="FileExplorerPreview_IconThumbnail_GroupSettings.Text" xml:space="preserve">
+  <data name="FileExplorerPreview_IconThumbnail_GroupSettings.Header" xml:space="preserve">
     <value>Icon Preview</value>
   </data>
-  <data name="FileExplorerPreview_PreviewPane_GroupSettings.Text" xml:space="preserve">
+  <data name="FileExplorerPreview_PreviewPane_GroupSettings.Header" xml:space="preserve">
     <value>Preview Pane</value>
   </data>
-  <data name="FileExplorerPreview_RunAsAdminRequired.Text" xml:space="preserve">
-    <value>* You need to run as administrator to modify these settings.</value>
+  <data name="FileExplorerPreview_RunAsAdminRequired.Message" xml:space="preserve">
+    <value>You need to run as administrator to modify these settings.</value>
   </data>
-  <data name="FileExplorerPreview_AffectsAllUsers.Text" xml:space="preserve">
+  <data name="FileExplorerPreview_AffectsAllUsers.Message" xml:space="preserve">
     <value>The settings on this page affect all users on the system</value>
   </data>
-  <data name="FileExplorerPreview_RebootRequired.Text" xml:space="preserve">
+  <data name="FileExplorerPreview_RebootRequired.Message" xml:space="preserve">
     <value>A reboot may be required for changes to these settings to take effect</value>
   </data>
   <data name="FancyZones_ExcludeApps_TextBoxControl.PlaceholderText" xml:space="preserve">

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml

@@ -6,6 +6,8 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
 
@@ -18,44 +20,55 @@
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_FileExplorerAddOns">
         <controls:SettingsPageControl.ModuleContent>
             
+            
             <StackPanel Orientation="Vertical">
-            <TextBlock x:Uid="FileExplorerPreview_RunAsAdminRequired"
-                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
-                       Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"
-                       Margin="{StaticResource SmallBottomMargin}"
-                       TextWrapping="Wrap"/>
 
-            <TextBlock x:Uid="FileExplorerPreview_AffectsAllUsers"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                       Margin="{StaticResource SmallBottomMargin}"
-                       TextWrapping="Wrap"/>
+                <muxc:InfoBar Severity="Warning"
+                                   x:Uid="FileExplorerPreview_RunAsAdminRequired"
+                                   IsOpen="True"
+                                   IsClosable="False"
+                                   Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}" />
 
-            <TextBlock x:Uid="FileExplorerPreview_PreviewPane_GroupSettings"
+                <muxc:InfoBar Severity="Informational"
+                                   x:Uid="FileExplorerPreview_AffectsAllUsers"
+                                   IsOpen="True"
+                                   IsClosable="False"
+                                   />
+
+
+
+
+
+                <toolkitcontrols:HeaderedItemsControl x:Uid="FileExplorerPreview_PreviewPane_GroupSettings">
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG" Icon="&#xE12A;">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGRenderIsEnabled}" FlowDirection="RightToLeft" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_MD" Icon="&#xE12A;">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.MDRenderIsEnabled}" FlowDirection="RightToLeft" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </toolkitcontrols:HeaderedItemsControl>
+
+                <toolkitcontrols:HeaderedItemsControl x:Uid="FileExplorerPreview_IconThumbnail_GroupSettings">
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_SVG_Thumbnail" Icon="&#xE12A;">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGThumbnailIsEnabled}" FlowDirection="RightToLeft" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+
+                    <muxc:InfoBar Severity="Informational"
+                                   x:Uid="FileExplorerPreview_RebootRequired"
+                                   IsOpen="True"
+                                   IsClosable="False"
+                                   />
+                </toolkitcontrols:HeaderedItemsControl>
+                <!--<TextBlock x:Uid=""
                        Style="{StaticResource SettingsGroupTitleStyleAsHeader}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <ToggleSwitch x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsOn="{Binding Mode=TwoWay, Path=SVGRenderIsEnabled}"                          
-                          IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
-
-            <ToggleSwitch x:Uid="FileExplorerPreview_ToggleSwitch_Preview_MD"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsOn="{Binding Mode=TwoWay, Path=MDRenderIsEnabled}"
-                          IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
-
-            <TextBlock x:Uid="FileExplorerPreview_IconThumbnail_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-            <TextBlock x:Uid="FileExplorerPreview_RebootRequired"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                       Margin="{StaticResource SmallTopBottomMargin}"
-                       TextWrapping="Wrap"/>
-
-            <ToggleSwitch x:Uid="FileExplorerPreview_ToggleSwitch_SVG_Thumbnail"
-                          IsOn="{Binding Mode=TwoWay, Path=SVGThumbnailIsEnabled}"
-                          IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
+                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>-->
         </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml

@@ -65,55 +65,55 @@
 
                 <winui:NavigationViewItem x:Uid="Shell_Awake" helpers:NavHelper.NavigateTo="views:AwakePage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xEC32;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAwake.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
                 
                 <winui:NavigationViewItem x:Uid="Shell_ColorPicker" helpers:NavHelper.NavigateTo="views:ColorPickerPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xEF3C;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_FancyZones" helpers:NavHelper.NavigateTo="views:FancyZonesPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <PathIcon Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_PowerPreview" helpers:NavHelper.NavigateTo="views:PowerPreviewPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xEC50;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFileExplorerPreview.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_ImageResizer" helpers:NavHelper.NavigateTo="views:ImageResizerPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <PathIcon Data="M0 768h1408v1152H0V768zm128 1024h870l-582-581-288 288v293zm1152 0v-102l-224-223-101 101 223 224h102zM128 896v421l288-287 448 447 192-191 224 224V896H128zm832 256q-26 0-45-19t-19-45q0-26 19-45t45-19q26 0 45 19t19 45q0 26-19 45t-45 19zm960-512V347l-339 338-90-90 338-339h-293V128h512v512h-128zm-768-512h256v128h-256V128zm-128 128H768V128h256v128zm-384 0H384V128h256v128zm-384 0H0V128h256v128zM128 640H0V384h128v256zm1920 128v256h-128V768h128zm-128 384h128v256h-128v-256zm0 384h128v256h-128v-256zm-384 256h256v128h-256v-128z"></PathIcon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_KeyboardManager" helpers:NavHelper.NavigateTo="views:KeyboardManagerPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE765;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE8AC;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerRename.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_PowerLauncher" helpers:NavHelper.NavigateTo="views:PowerLauncherPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE773;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
                 <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xEDA7;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>