Update ShellPage.xaml

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SettingsGroup/SettingsGroup.cs

@@ -19,13 +19,25 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
     /// </summary>
     [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
     [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
+    [TemplatePart(Name = PartDescriptionPresenter, Type = typeof(ContentPresenter))]
     public partial class SettingsGroup : ItemsControl
     {
+        private const string PartDescriptionPresenter = "DescriptionPresenter";
+        private ContentPresenter _descriptionPresenter;
+        private SettingsGroup _settingsGroup;
+
         public SettingsGroup()
         {
             DefaultStyleKey = typeof(SettingsGroup);
         }
 
+        [Localizable(true)]
+        public string Header
+        {
+            get => (string)GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
         public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
             "Header",
             typeof(string),
@@ -33,20 +45,33 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             new PropertyMetadata(default(string)));
 
         [Localizable(true)]
-        public string Header
+        public object Description
         {
-            get => (string)GetValue(HeaderProperty);
-            set => SetValue(HeaderProperty, value);
+            get => (object)GetValue(DescriptionProperty);
+            set => SetValue(DescriptionProperty, value);
         }
 
+        public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(
+            "Description",
+            typeof(object),
+            typeof(SettingsGroup),
+            new PropertyMetadata(null, OnDescriptionChanged));
+
         protected override void OnApplyTemplate()
         {
             IsEnabledChanged -= SettingsGroup_IsEnabledChanged;
+            _settingsGroup = (SettingsGroup)this;
+            _descriptionPresenter = (ContentPresenter)_settingsGroup.GetTemplateChild(PartDescriptionPresenter);
             SetEnabledState();
             IsEnabledChanged += SettingsGroup_IsEnabledChanged;
             base.OnApplyTemplate();
         }
 
+        private static void OnDescriptionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((SettingsGroup)d).Update();
+        }
+
         private void SettingsGroup_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
         {
             SetEnabledState();
@@ -57,6 +82,23 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
         }
 
+        private void Update()
+        {
+            if (_settingsGroup == null)
+            {
+                return;
+            }
+
+            if (_settingsGroup.Description == null)
+            {
+                _settingsGroup._descriptionPresenter.Visibility = Visibility.Collapsed;
+            }
+            else
+            {
+                _settingsGroup._descriptionPresenter.Visibility = Visibility.Visible;
+            }
+        }
+
         protected override AutomationPeer OnCreateAutomationPeer()
         {
             return new SettingsGroupAutomationPeer(this);

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

@@ -25,6 +25,7 @@
                                 <VisualState x:Name="Disabled">
                                     <VisualState.Setters>
                                         <Setter Target="HeaderPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="DescriptionPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
@@ -32,14 +33,36 @@
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
                             <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
                         </Grid.RowDefinitions>
                         <TextBlock x:Name="HeaderPresenter"
                                    Text="{TemplateBinding Header}"
                                    Grid.Row="0"
                                    Style="{ThemeResource BodyStrongTextBlockStyle}"
-                                   Margin="1,32,0,8"
+                                   Margin="1,32,0,0"
                                    AutomationProperties.HeadingLevel="Level2"/>
-                        <ItemsPresenter Grid.Row="1"/>
+
+                        <ContentPresenter
+                                x:Name="DescriptionPresenter"
+                                Content="{TemplateBinding Description}"
+                                TextWrapping="WrapWholeWords"
+                                Margin="1,4,0,0"
+                                Grid.Row="1"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}">
+                            <ContentPresenter.Resources>
+                                <Style TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}">
+                                    <Style.Setters>
+                                        <Setter Property="TextWrapping" Value="WrapWholeWords"/>
+                                    </Style.Setters>
+                                </Style>
+                                <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextButtonStyle}">
+                                    <Style.Setters>
+                                        <Setter Property="Padding" Value="0,0,0,0"/>
+                                    </Style.Setters>
+                                </Style>
+                            </ContentPresenter.Resources>
+                        </ContentPresenter>
+                        <ItemsPresenter Grid.Row="2" Margin="0,8,0,0"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>

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

@@ -189,6 +189,9 @@
   </data>
   <data name="VideoConference_Camera.Header" xml:space="preserve">
     <value>Camera</value>
+  </data>
+	<data name="VideoConference_Camera.Description" xml:space="preserve">
+    <value>To use this feature, make sure to select PowerToys VideoConference Mute as your camera source in your apps.</value>
   </data>
   <data name="VideoConference_Microphone.Header" xml:space="preserve">
     <value>Microphone</value>
@@ -993,8 +996,12 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
   <data name="FileExplorerPreview_IconThumbnail_GroupSettings.Header" xml:space="preserve">
     <value>Icon Preview</value>
   </data>
-  <data name="FileExplorerPreview_PreviewPane_GroupSettings.Header" xml:space="preserve">
+  <data name="FileExplorerPreview_PreviewPane.Header" xml:space="preserve">
     <value>Preview Pane</value>
+  </data>
+	<data name="FileExplorerPreview_PreviewPane.Description" xml:space="preserve">
+    <value>Ensure that Preview Pane is open by toggling the view with Alt + P in File Explorer.</value>
+	   <comment>Preview Pane and File Explorer are app/feature names in Windows. 'Alt + P' is a shortcut</comment>
   </data>
   <data name="FileExplorerPreview_RunAsAdminRequired.Title" xml:space="preserve">
     <value>You need to run as administrator to modify these settings.</value>
@@ -1002,9 +1009,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
   <data name="FileExplorerPreview_AffectsAllUsers.Title" xml:space="preserve">
     <value>The settings on this page affect all users on the system</value>
   </data>
-  <data name="FileExplorerPreview_TogglePreviewPane.Text" xml:space="preserve">
-    <value>Please ensure that Preview Pane is open by toggling the view with Alt + P in File Explorer</value>
-  </data>
+
   <data name="FileExplorerPreview_RebootRequired.Title" xml:space="preserve">
     <value>A reboot may be required for changes to these settings to take effect</value>
   </data>
@@ -1723,14 +1728,14 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
   <data name="MouseUtils_FindMyMouse.Header" xml:space="preserve">
     <value>Find My Mouse</value>
     <comment>Refers to the utility name</comment>
+  </data>
+	<data name="MouseUtils_FindMyMouse.Description" xml:space="preserve">
+    <value>Find My Mouse highlights the position of the cursor when pressing the left Ctrl key twice.</value>
+    <comment>Ctrl" is a keyboard key. "Find My Mouse" is the name of the utility</comment>
   </data>
   <data name="MouseUtils_Enable_FindMyMouse.Header" xml:space="preserve">
     <value>Enable Find My Mouse</value>
     <comment>"Find My Mouse" is the name of the utility.</comment>
-  </data>
-	<data name="MouseUtils_FindMyMouse_Description.Text" xml:space="preserve">
-    <value>Find My Mouse highlights the position of the cursor when pressing the left Ctrl key twice.</value>
-    <comment>"Ctrl" is a keyboard key. "Find My Mouse" is the name of the utility</comment>
   </data>
   <data name="MouseUtils_Prevent_Activation_On_Game_Mode.Content" xml:space="preserve">
     <value>Do not activate when Game Mode is on</value>
@@ -1763,14 +1768,14 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
   <data name="MouseUtils_MouseHighlighter.Header" xml:space="preserve">
     <value>Mouse Highlighter</value>
     <comment>Refers to the utility name</comment>
+  </data>
+	<data name="MouseUtils_MouseHighlighter.Description" xml:space="preserve">
+    <value>Mouse Highlighter mode will highlight mouse clicks.</value>
+    <comment>"Mouse Highlighter" is the name of the utility. Mouse is the hardware mouse.</comment>
   </data>
   <data name="MouseUtils_Enable_MouseHighlighter.Header" xml:space="preserve">
     <value>Enable Mouse Highlighter</value>
     <comment>"Find My Mouse" is the name of the utility.</comment>
-  </data>
-  <data name="MouseUtils_MouseHighlighter_Description.Text" xml:space="preserve">
-    <value>Mouse Highlighter mode will highlight mouse clicks.</value>
-    <comment>"Mouse Highlighter" is the name of the utility. Mouse is the hardware mouse.</comment>
   </data>
 	<data name="MouseUtils_MouseHighlighter_ActivationShortcut.Header" xml:space="preserve">
     <value>Activation shortcut</value>

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

@@ -14,7 +14,6 @@
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
                 <controls:SettingsGroup x:Uid="MouseUtils_FindMyMouse">
-                    <TextBlock x:Uid="MouseUtils_FindMyMouse_Description" Margin="0,0,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                     <controls:Setting x:Uid="MouseUtils_Enable_FindMyMouse">
                         <controls:Setting.Icon>
                             <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFindMyMouse.png" ShowAsMonochrome="False" />
@@ -89,7 +88,6 @@
                 </controls:SettingsGroup>
 
                 <controls:SettingsGroup x:Uid="MouseUtils_MouseHighlighter">
-                    <TextBlock x:Uid="MouseUtils_MouseHighlighter_Description" Margin="0,0,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                     <controls:Setting x:Uid="MouseUtils_Enable_MouseHighlighter">
                         <controls:Setting.Icon>
                             <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsMouseHighlighter.png" ShowAsMonochrome="False" />

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

@@ -34,8 +34,7 @@
                                    IsClosable="False"
                                    />
 
-                <controls:SettingsGroup x:Uid="FileExplorerPreview_PreviewPane_GroupSettings">
-                <TextBlock x:Uid="FileExplorerPreview_TogglePreviewPane" Margin="0,0,0,8" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                <controls:SettingsGroup x:Uid="FileExplorerPreview_PreviewPane">
                     <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG" Icon="&#xE91B;">
                         <controls:Setting.ActionContent>
                             <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGRenderIsEnabled}"