[Settings] Aligning XAML across all pages (#12212)

* Updating settings

* OOBE button

* Removed unused namespaces

Co-authored-by: Niels Laute <niels9001@hotmail.com>

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

@@ -0,0 +1,117 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.SettingsPageControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
+    mc:Ignorable="d"
+    >
+
+    <UserControl.Resources>
+        <converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter" GreaterThan="0" TrueValue="Visible" FalseValue="Collapsed" />
+    </UserControl.Resources>
+
+    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+        <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="ModuleContentPresenter.(Grid.Row)" Value="1" />
+                        <Setter Target="ModuleContentPresenter.Margin" Value="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="AboutTitle.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <ContentPresenter x:Name="ModuleContentPresenter"
+                          Content="{x:Bind ModuleContent}"
+                           Margin="0,0,48,0"
+                          HorizontalAlignment="Left"
+                          MaxWidth="{StaticResource MaxContentWidth}"/>
+
+        <RelativePanel Grid.Column="1" x:Name="SidePanel" Width="{StaticResource SidePanelWidth}">
+            <StackPanel x:Name="DescriptionPanel">
+                <TextBlock  x:Name="AboutTitle"
+                        Text="{x:Bind ModuleTitle}"
+                        Style="{StaticResource SettingsGroupTitleStyle}"
+                        Margin="{StaticResource XSmallBottomMargin}"/>
+                <TextBlock Text="{x:Bind ModuleDescription}"
+                           TextWrapping="Wrap">
+                </TextBlock>
+            </StackPanel>
+
+            <HyperlinkButton x:Name="AboutImage"
+                         RelativePanel.Below="DescriptionPanel"
+                         MaxWidth="240"
+                         CornerRadius="4"
+                         NavigateUri="{x:Bind ModuleImageLink}"
+                         Margin="{StaticResource SmallTopBottomMargin}">
+                <Image>
+                    <Image.Source>
+                        <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
+                    </Image.Source>
+                </Image>
+            </HyperlinkButton>
+
+            <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="0,-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="0,-3,0,0">
+                                    <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
+                                </HyperlinkButton>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </StackPanel>
+            </StackPanel>
+        </RelativePanel>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,88 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Documents;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class SettingsPageControl : UserControl
+    {
+        public SettingsPageControl()
+        {
+            this.InitializeComponent();
+            ModuleLinks = new ObservableCollection<SidePanelLink>();
+            AttributionLinks = new ObservableCollection<SidePanelLink>();
+        }
+
+        public object ModuleContent
+        {
+            get { return (object)GetValue(ModuleContentProperty); }
+            set { SetValue(ModuleContentProperty, value); }
+        }
+
+        public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
+
+        public string ModuleTitle
+        {
+            get => (string)GetValue(ModuleTitleProperty);
+            set => SetValue(ModuleTitleProperty, value);
+        }
+
+        public string ModuleDescription
+        {
+            get => (string)GetValue(ModuleDescriptionProperty);
+            set => SetValue(ModuleDescriptionProperty, value);
+        }
+
+        public string ModuleImageSource
+        {
+            get => (string)GetValue(ModuleImageSourceProperty);
+            set => SetValue(ModuleImageSourceProperty, value);
+        }
+
+        public Uri ModuleImageLink
+        {
+            get => (Uri)GetValue(ModuleImageLinkProperty);
+            set => SetValue(ModuleImageLinkProperty, value);
+        }
+
+#pragma warning disable CA2227 // Collection properties should be read only
+        public ObservableCollection<SidePanelLink> ModuleLinks
+#pragma warning restore CA2227 // Collection properties should be read only
+        {
+            get => (ObservableCollection<SidePanelLink>)GetValue(ModuleLinksProperty);
+            set => SetValue(ModuleLinksProperty, value);
+        }
+
+#pragma warning disable CA2227 // Collection properties should be read only
+        public ObservableCollection<SidePanelLink> AttributionLinks
+#pragma warning restore CA2227 // Collection properties should be read only
+        {
+            get => (ObservableCollection<SidePanelLink>)GetValue(AttributionLinksProperty);
+            set => SetValue(AttributionLinksProperty, value);
+        }
+
+        public static readonly DependencyProperty ModuleTitleProperty = DependencyProperty.Register("ModuleTitle", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleDescriptionProperty = DependencyProperty.Register("ModuleDescription", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleImageSourceProperty = DependencyProperty.Register("ModuleImageSource", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleImageLinkProperty = DependencyProperty.Register("ModuleImageLink", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public static readonly DependencyProperty ModuleLinksProperty = DependencyProperty.Register("ModuleLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
+        public static readonly DependencyProperty AttributionLinksProperty = DependencyProperty.Register("AttributionLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
+    }
+}

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

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public class SidePanelLink
+    {
+        public string Label { get; set; }
+
+        public Uri Link { get; set; }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj

@@ -105,6 +105,10 @@
     <Compile Include="Controls\ShortcutVisualControl.xaml.cs">
       <DependentUpon>ShortcutVisualControl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\SidePanel\SettingsPageControl.xaml.cs">
+      <DependentUpon>SettingsPageControl.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Controls\SidePanel\SidePanelLink.cs" />
     <Compile Include="Converters\AwakeModeToBoolConverter.cs" />
     <Compile Include="Converters\ModuleEnabledToOpacityConverter.cs" />
     <Compile Include="Converters\UpdatingStateCannotDownloadToVisibilityConverter.cs" />
@@ -312,6 +316,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\SidePanel\SettingsPageControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="OOBE\Views\OobeAwake.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

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

@@ -124,7 +124,7 @@
   <data name="VideoConference_Enable.Header" xml:space="preserve">
     <value>Enable Video Conference</value>
   </data>
-  <data name="VideoConference_Description.Text" xml:space="preserve">
+  <data name="About_VideoConference.ModuleDescription" xml:space="preserve">
     <value>Video Conference Mute is a quick and easy way to do an global "mute" of both your microphone and webcam.
 Disabling this module or closing PowerToys will unmute the microphone and camera.</value>
   </data>
@@ -185,7 +185,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="VideoConference_HideToolbarWhenUnmuted.Content" xml:space="preserve">
     <value>Hide toolbar when both camera and microphone are unmuted</value>
   </data>
-  <data name="About_VideoConference.Text" xml:space="preserve">
+  <data name="About_VideoConference.ModuleTitle" xml:space="preserve">
     <value>About Video Conference</value>
   </data>
   <data name="VideoConference_Camera.Text" xml:space="preserve">
@@ -253,7 +253,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Current configuration</value>
     <comment>Keyboard Manager current configuration header</comment>
   </data>
-  <data name="KeyboardManager_Description.Text" xml:space="preserve">
+  <data name="About_KeyboardManager.ModuleDescription" xml:space="preserve">
     <value>Reconfigure your keyboard by remapping keys and shortcuts.</value>
     <comment>Keyboard Manager page description</comment>
   </data>
@@ -311,7 +311,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Keyboard Manager</value>
     <comment>do not loc, product name</comment>
   </data>
-  <data name="ColorPicker_Description.Text" xml:space="preserve">
+  <data name="About_ColorPicker.ModuleDescription" xml:space="preserve">
     <value>Quick and simple system-wide color picker.</value>
   </data>
   <data name="ColorPicker_EnableColorPicker.Header" xml:space="preserve">
@@ -325,7 +325,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Activate Color Picker</value>
     <comment>do not loc product name</comment>
   </data>
-  <data name="PowerLauncher_Description.Text" xml:space="preserve">
+  <data name="About_PowerLauncher.ModuleDescription" xml:space="preserve">
     <value>A quick launcher that has additional capabilities without sacrificing performance.</value>
   </data>
   <data name="PowerLauncher_EnablePowerLauncher.Header" xml:space="preserve">
@@ -394,17 +394,14 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>To:</value>
     <comment>Keyboard Manager mapping keys view right header</comment>
   </data>
-  <data name="About_This_Feature.Text" xml:space="preserve">
-    <value>About this feature</value>
-  </data>
   <data name="Appearance_GroupSettings.Text" xml:space="preserve">
     <value>Appearance</value>
   </data>
-  <data name="Fancyzones_Image.AutomationProperties.Name" xml:space="preserve">
+  <data name="Fancyzones_ImageHyperlinkToDocs.AutomationProperties.Name" xml:space="preserve">
     <value>FancyZones windows</value>
     <comment>do not loc the Product name</comment>
   </data>
-  <data name="FancyZones_Description.Text" xml:space="preserve">
+  <data name="About_FancyZones.ModuleDescription" xml:space="preserve">
     <value>Create window layouts to help make multi-tasking easy.</value>
     <comment>windows refers to application windows</comment>
   </data>
@@ -476,10 +473,10 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="FancyZones_ZoneSetChangeMoveWindows.Content" xml:space="preserve">
     <value>During zone layout changes, windows assigned to a zone will match new size/positions</value>
   </data>
-  <data name="Give_Feedback.Text" xml:space="preserve">
+  <data name="Give_Feedback.Label" xml:space="preserve">
     <value>Give feedback</value>
   </data>
-  <data name="Module_overview.Text" xml:space="preserve">
+  <data name="Learn_More.Label" xml:space="preserve">
     <value>Learn more</value>
     <comment>This label is there to point people to additional overview for how to use the product</comment>
   </data>
@@ -487,26 +484,23 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Attribution</value>
     <comment>giving credit to the projects this utility was based on</comment>
   </data>
-  <data name="GeneralPage_AboutPowerToysHeader.Text" xml:space="preserve">
+  <data name="About_PowerToys.ModuleTitle" xml:space="preserve">
     <value>About PowerToys</value>
   </data>
-  <data name="PowerToys_Icon.AutomationProperties.Name" xml:space="preserve">
-    <value>PowerToys Icon</value>
-  </data>
   <data name="GeneralPage_CheckForUpdates.Content" xml:space="preserve">
     <value>Check for updates</value>
   </data>
   <data name="GeneralPage_UpdateNow.Content" xml:space="preserve">
     <value>Update now</value>
   </data>
-  <data name="GeneralPage_PrivacyStatement_URL.Text" xml:space="preserve">
+  <data name="GeneralPage_PrivacyStatement_URL.Label" xml:space="preserve">
     <value>Privacy statement</value>
   </data>
-  <data name="GeneralPage_ReportAbug.Text" xml:space="preserve">
+  <data name="GeneralPage_ReportAbug.Label" xml:space="preserve">
     <value>Report a bug</value>
     <comment>Report an issue inside powertoys</comment>
   </data>
-  <data name="GeneralPage_RequestAFeature_URL.Text" xml:space="preserve">
+  <data name="GeneralPage_RequestAFeature_URL.Label" xml:space="preserve">
     <value>Request a feature</value>
     <comment>Tell our team what we should build</comment>
   </data>
@@ -517,7 +511,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="GeneralPage_ToggleSwitch_RunAtStartUp.Header" xml:space="preserve">
     <value>Run at startup</value>
   </data>
-  <data name="PowerRename_Description.Text" xml:space="preserve">
+  <data name="About_PowerRename.ModuleDescription" xml:space="preserve">
     <value>A Windows Shell extension for more advanced bulk renaming using search and replace or regular expressions.</value>
   </data>
   <data name="PowerRename_ShellIntegration.Text" xml:space="preserve">
@@ -555,13 +549,13 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Enable SVG (.svg) thumbnails</value>
     <comment>Do you want this feature on / off</comment>
   </data>
-  <data name="FileExplorerPreview_Description.Text" xml:space="preserve">
+  <data name="About_FileExplorerPreview.ModuleDescription" xml:space="preserve">
     <value>These settings allow you to manage your Windows File Explorer custom preview handlers.</value>
   </data>
   <data name="PowerRename_AutoCompleteHeader.Text" xml:space="preserve">
     <value>Autocomplete</value>
   </data>
-  <data name="OpenSource_Notice.Text" xml:space="preserve">
+  <data name="OpenSource_Notice.Label" xml:space="preserve">
     <value>Open-source notice</value>
   </data>
   <data name="PowerRename_Toggle_AutoComplete.Content" xml:space="preserve">
@@ -573,7 +567,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="FancyZones_InActiveColor.Text" xml:space="preserve">
     <value>Zone inactive color</value>
   </data>
-  <data name="ShortcutGuide_Description.Text" xml:space="preserve">
+  <data name="About_ShortcutGuide.ModuleDescription" xml:space="preserve">
     <value>Shows a help overlay with Windows shortcuts when the Windows key is pressed.</value>
   </data>
   <data name="ShortcutGuide_PressTime.Header" xml:space="preserve">
@@ -603,7 +597,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="ImageResizer_CustomSizes.Text" xml:space="preserve">
     <value>Image sizes</value>
   </data>
-  <data name="ImageResizer_Description.Text" xml:space="preserve">
+  <data name="About_ImageResizer.ModuleDescription" xml:space="preserve">
     <value>Lets you resize images by right-clicking.</value>
   </data>
   <data name="ImageResizer_EnableToggle.Header" xml:space="preserve">
@@ -759,36 +753,32 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="GeneralSettings_RunningAsAdminText" xml:space="preserve">
     <value>Running as administrator</value>
   </data>
-  <data name="About_FancyZones.Text" xml:space="preserve">
+  <data name="About_FancyZones.ModuleTitle" xml:space="preserve">
     <value>About FancyZones</value>
   </data>
-  <data name="About_FileExplorerPreview.Text" xml:space="preserve">
+  <data name="About_FileExplorerPreview.ModuleTitle" xml:space="preserve">
     <value>About File Explorer</value>
   </data>
   <data name="FileExplorerPreview_Image.AutomationProperties.Name" xml:space="preserve">
     <value>File Explorer</value>
     <comment>Use same translation as Windows does for File Explorer</comment>
   </data>
-  <data name="About_ImageResizer.Text" xml:space="preserve">
+  <data name="About_ImageResizer.ModuleTitle" xml:space="preserve">
     <value>About Image Resizer</value>
   </data>
-  <data name="About_KeyboardManager.Text" xml:space="preserve">
+  <data name="About_KeyboardManager.ModuleTitle" xml:space="preserve">
     <value>About Keyboard Manager</value>
   </data>
-  <data name="About_ColorPicker.Text" xml:space="preserve">
+  <data name="About_ColorPicker.ModuleTitle" xml:space="preserve">
     <value>About Color Picker</value>
   </data>
-  <data name="ColorPicker_Image.AutomationProperties.Name" xml:space="preserve">
+  <data name="About_PowerLauncher.ModuleTitle" xml:space="preserve">
-    <value>Color Picker</value>
-    <comment>do not loc the Product name.</comment>
-  </data>
-  <data name="About_PowerLauncher.Text" xml:space="preserve">
     <value>About PowerToys Run</value>
   </data>
   <data name="PowerToys_Run_Image.AutomationProperties.Name" xml:space="preserve">
     <value>PowerToys Run</value>
   </data>
-  <data name="About_PowerRename.Text" xml:space="preserve">
+  <data name="About_PowerRename.ModuleTitle" xml:space="preserve">
     <value>About PowerRename</value>
     <comment>do not loc the product name</comment>
   </data>
@@ -796,13 +786,13 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>PowerRename</value>
     <comment>do not loc</comment>
   </data>
-  <data name="About_ShortcutGuide.Text" xml:space="preserve">
+  <data name="About_ShortcutGuide.ModuleTitle" xml:space="preserve">
     <value>About Shortcut Guide</value>
   </data>
   <data name="Shortcut_Guide_Image.AutomationProperties.Name" xml:space="preserve">
     <value>Shortcut Guide</value>
   </data>
-  <data name="General_Repository.Text" xml:space="preserve">
+  <data name="General_Repository.Label" xml:space="preserve">
     <value>GitHub repository</value>
   </data>
   <data name="General_Updates.Text" xml:space="preserve">
@@ -851,8 +841,10 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="KeyboardManager_RemapShortcutsSubtitle.Text" xml:space="preserve">
     <value>Remap shortcuts to other shortcuts or keys. Additionally, mappings can be targeted to specific applications as well.</value>
   </data>
-  <data name="About_PowerToys.Text" xml:space="preserve">
+  <data name="About_PowerToys.ModuleDescription" xml:space="preserve">
-    <value>Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows experience for greater productivity.</value>
+    <value>Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows experience for greater productivity.
+
+Made with 💗 by Microsoft and the PowerToys community.</value>
     <comment>Windows refers to the OS</comment>
   </data>
   <data name="FancyZones_SpanZonesAcrossMonitorsCheckBoxControl.Content" xml:space="preserve">
@@ -1000,50 +992,6 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Small</value>
     <comment>The size of the image</comment>
   </data>
-  <data name="ColorPicker_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_ColorPicker</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="Awake_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_Awake</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="FancyZones_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_FancyZones</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="GeneralPage_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/powertoys</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="ImageResizer_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_ImageResizer</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="FileExplorerPreview_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_FileExplorerAddOns</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="KeyboardManager_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_KeyboardManager</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="PowerRename_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_PowerRename</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="PowerToys_Run_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_PowerToysRun</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="ShortcutGuide_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_ShortcutGuide</value>
-    <comment>URL. Do not loc</comment>
-  </data>
-  <data name="VideoConference_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
-    <value>https://aka.ms/PowerToysOverview_VideoConference</value>
-    <comment>URL. Do not loc</comment>
-  </data>
   <data name="FancyZones_MoveWindowBasedOnRelativePosition.Content" xml:space="preserve">
     <value>Win + Up/Down/Left/Right to move windows based on relative position</value>
   </data>
@@ -1308,10 +1256,10 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="SettingsWindow_Title" xml:space="preserve">
     <value>PowerToys Settings</value>
   </data>
-  <data name="About_Awake.Text" xml:space="preserve">
+  <data name="About_Awake.ModuleTitle" xml:space="preserve">
     <value>About Awake</value>
   </data>
-  <data name="Awake_Description.Text" xml:space="preserve">
+  <data name="About_Awake.ModuleDescription" xml:space="preserve">
     <value>A convenient way to keep your PC awake on-demand.</value>
   </data>
   <data name="Awake_EnableAwake.Header" xml:space="preserve">
@@ -1350,13 +1298,6 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="Awake_TemporaryKeepAwake_Minutes.Header" xml:space="preserve">
     <value>Minutes</value>
   </data>
-  <data name="Awake_ModuleAttributionLabel.Text" xml:space="preserve">
-    <value>Den Delimarsky's Awake</value>
-  </data>
-  <data name="Awake_ModuleAttributionHyperlink.NavigateUri" xml:space="preserve">
-    <value>https://Awake.den.dev</value>
-    <comment>URL. Do not loc</comment>
-  </data>
   <data name="Oobe_Awake" xml:space="preserve">
     <value>Awake</value>
     <comment>Module name, do not loc</comment>

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

@@ -5,10 +5,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:c="using:Microsoft.PowerToys.Settings.UI.Converters"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     mc:Ignorable="d"
-    d:DesignHeight="300"
-    d:DesignWidth="400" 
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
@@ -16,44 +14,11 @@
         <c:AwakeModeToBoolConverter x:Key="AwakeModeToBoolConverter" />
     </Page.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_Awake"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/Awake.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_Awake">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <VisualState.StateTriggers>
+            <StackPanel Orientation="Vertical">
-                        <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="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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <StackPanel Orientation="Vertical"
-                    x:Name="AwakeView"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
                 <ToggleSwitch x:Uid="Awake_EnableAwake" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
 
                 <TextBlock x:Uid="Awake_Behavior_GroupSettings"
@@ -135,54 +100,14 @@
                     </StackPanel>
                 </StackPanel>
             </StackPanel>
+        </controls:SettingsPageControl.ModuleContent>
 
-        <RelativePanel x:Name="SidePanel" 
+        <controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_Awake"/>
-                    Width="{StaticResource SidePanelWidth}"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    Grid.Column="1">
+        </controls:SettingsPageControl.ModuleLinks>
-            <StackPanel x:Name="DescriptionPanel">
+        <controls:SettingsPageControl.AttributionLinks>
-                <TextBlock x:Uid="About_Awake"
+            <controls:SidePanelLink Label="Den Delimarsky's Awake" Link="https://Awake.den.dev"/>
-                           x:Name="AboutTitle"
+        </controls:SettingsPageControl.AttributionLinks>
-                           Grid.ColumnSpan="2"
+    </controls:SettingsPageControl>
-                           Style="{StaticResource SettingsGroupTitleStyle}"
-                           Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="Awake_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="Awake_ImageHyperlinkToDocs">
-                    <Image x:Uid="Awake_Image" Source="ms-appx:///Assets/Modules/Awake.png" />
-                </HyperlinkButton>
-            </Border>
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="Awake_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-
-                <TextBlock 
-                x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" />
-
-                <HyperlinkButton Margin="0,-3,0,0"
-                                 x:Uid="Awake_ModuleAttributionHyperlink">
-                    <TextBlock x:Uid="Awake_ModuleAttributionLabel"
-                               TextWrapping="Wrap" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -2,51 +2,19 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Views.ColorPickerPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:Custom="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-    xmlns:Color="using:Microsoft.PowerToys.Settings.UI.Library.ViewModels" xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
     mc:Ignorable="d"
-    d:DesignHeight="300"
-    d:DesignWidth="400" 
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_ColorPicker"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_ColorPicker">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <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="ColorPickerView.(Grid.Row)" Value="1" />
-                        <Setter Target="ColorPickerView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
 
         <StackPanel Orientation="Vertical"
                     x:Name="ColorPickerView"
@@ -60,7 +28,7 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
             
-            <Custom:HotkeySettingsControl x:Uid="ColorPicker_ActivationShortcut"
+            <controls:HotkeySettingsControl x:Uid="ColorPicker_ActivationShortcut"
                                           Margin="{StaticResource SmallTopMargin}"
                                           HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}"
                                           Keys="Win, Ctrl, Alt, Shift"
@@ -264,58 +232,15 @@
                           -->
         </StackPanel>
 
-        <RelativePanel x:Name="SidePanel" 
+</controls:SettingsPageControl.ModuleContent>
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock x:Uid="About_ColorPicker"
-                           x:Name="AboutTitle"
-                           Grid.ColumnSpan="2"
-                           Style="{StaticResource SettingsGroupTitleStyle}"
-                           Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="ColorPicker_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
 
-            <Border x:Name="AboutImage"
+<controls:SettingsPageControl.ModuleLinks>
-                    CornerRadius="4"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ColorPicker"/>
-                    Grid.Row="2"
+    <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    MaxWidth="240"
+</controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+<controls:SettingsPageControl.AttributionLinks>
-                    Margin="{StaticResource SmallTopBottomMargin}"
+    <controls:SidePanelLink Label="Martin Chrzan's Color Picker" Link="https://github.com/martinchrzan/ColorPicker/"/>
-                    RelativePanel.Below="DescriptionPanel">
+    <controls:SidePanelLink Label="Niels Laute's UX concept" Link="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c"/>
-                <HyperlinkButton x:Uid="ColorPicker_ImageHyperlinkToDocs">
+</controls:SettingsPageControl.AttributionLinks>
-                    <Image x:Uid="ColorPicker_Image" Source="ms-appx:///Assets/Modules/ColorPicker.png" />
+</controls:SettingsPageControl>
-                </HyperlinkButton>
-            </Border>
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="ColorPicker_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-
-                <TextBlock 
-                x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" />
-
-                <HyperlinkButton Margin="0,-3,0,0"
-                                NavigateUri="https://github.com/martinchrzan/ColorPicker/">
-                    <TextBlock Text="Martin Chrzan's Color Picker" TextWrapping="Wrap" />
-                </HyperlinkButton>
-
-                <HyperlinkButton Margin="0,-3,0,0"
-                                NavigateUri="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c">
-                    <TextBlock Text="Niels Laute's UX concept" TextWrapping="Wrap" />
-                </HyperlinkButton>
-                
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -2,15 +2,11 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Views.FancyZonesPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"     
-    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
-    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"        
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
@@ -19,46 +15,11 @@
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <Grid x:Name="MainView" RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_FancyZones"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/FancyZones.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_FancyZones">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <VisualState.StateTriggers>
+            <StackPanel Orientation="Vertical">
-                        <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="FZView.(Grid.Row)" Value="1" />
-                        <Setter Target="FZView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <StackPanel x:Name="FZView"
-                    Orientation="Vertical"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
                             x:Uid="FancyZones_EnableToggleControl_HeaderText"
                             IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
@@ -82,7 +43,7 @@
                 </StackPanel>
             </Button>
             
-            <CustomControls:HotkeySettingsControl 
+            <controls:HotkeySettingsControl 
                 x:Uid="FancyZones_HotkeyEditorControl"
                 Margin="{StaticResource SmallTopMargin}"
                 HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
@@ -345,42 +306,12 @@
                      MinHeight="160" />
         </StackPanel>
 
-        <RelativePanel x:Name="SidePanel" 
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock x:Uid="About_FancyZones"
-                           x:Name="AboutTitle" Grid.ColumnSpan="2"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="FancyZones_Description"
-                           TextWrapping="Wrap"/>
-            </StackPanel>
         
-            <Border x:Name="AboutImage"
+</controls:SettingsPageControl.ModuleContent>
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="FancyZones_ImageHyperlinkToDocs">
-                    <Image x:Uid="Fancyzones_Image" Source="ms-appx:///Assets/Modules/FancyZones.png" />
-                </HyperlinkButton>
-            </Border>
 
-            <StackPanel x:Name="LinksPanel"
+<controls:SettingsPageControl.ModuleLinks>
-                        Margin="0,1,0,0"
+    <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_FancyZones"/>
-                        RelativePanel.Below="AboutImage"
+    <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                        Orientation="Vertical" >
+</controls:SettingsPageControl.ModuleLinks>
-                <HyperlinkButton x:Uid="FancyZones_ImageHyperlinkToDocs">
+</controls:SettingsPageControl>
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -2,12 +2,11 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Views.GeneralPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     xmlns:localConverters="using:Microsoft.PowerToys.Settings.UI.Converters"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
@@ -21,46 +20,24 @@
         <localConverters:UpdatingStateReadyToInstallToVisibilityConverter x:Key="UpdatingStateReadyToInstallToVisibilityConverter" />
     </Page.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_PowerToys"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/PT.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/powertoys">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <VisualState.StateTriggers>
+            <StackPanel Orientation="Vertical">
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                <Button Click="OobeButton_Click"
-                    </VisualState.StateTriggers>
+                        Style="{StaticResource AccentButtonStyle}"
-                </VisualState>
+                        Margin="0,12,0,24">
-                <VisualState x:Name="SmallLayout">
+                    <Button.Content>
-                    <VisualState.StateTriggers>
+                        <StackPanel Orientation="Horizontal">
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                            <FontIcon FontSize="13" Glyph="&#xF133;" />
-                        <AdaptiveTrigger MinWindowWidth="0" />
+                            <TextBlock Margin="8,0,0,0"
-                    </VisualState.StateTriggers>
+                               x:Uid="Oobe_Button"/>
-                    <VisualState.Setters>
+                    </StackPanel>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
+                    </Button.Content>
-                        <Setter Target="SidePanel.Width" Value="Auto"/>
+                </Button>
-                        <Setter Target="GeneralView.(Grid.Row)" Value="1" />
+                
-                        <Setter Target="GeneralView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
                 
-        <StackPanel Orientation="Vertical"
-                    x:Name="GeneralView"
-                    Margin="0,0,48,0"
-                    HorizontalAlignment="Left"
-                    MaxWidth="{StaticResource MaxContentWidth}">
                 <TextBlock x:Uid="Admin_Mode" 
                        FontWeight="SemiBold"
                        TextWrapping="Wrap"
@@ -73,7 +50,6 @@
 
                 <Button x:Uid="GeneralPage_RestartAsAdmin_Button"
                     Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
                     Command = "{Binding RestartElevatedButtonEventHandler}"
                     IsEnabled="{Binding Mode=TwoWay, Path=IsAdminButtonEnabled}"
                     />
@@ -162,8 +138,6 @@
                            Visibility="{Binding IsNewVersionCheckedAndUpToDate, Converter={StaticResource VisibleIfTrueConverter}}"/>
 
                     <Button x:Uid="GeneralPage_CheckForUpdates"
-                        Style="{StaticResource AccentButtonStyle}"
-                        Foreground="White"
                         Margin="{StaticResource SmallTopMargin}"
                         Command="{Binding CheckForUpdatesEventHandler}"
                         IsEnabled="{Binding IsDownloadAllowed}"
@@ -208,8 +182,6 @@
 
                     <Button x:Uid="General_DownloadAndInstall"
                         Margin="{StaticResource SmallTopMargin}"
-                        Style="{StaticResource AccentButtonStyle}"
-                        Foreground="White"
                         Command="{Binding UpdateNowButtonEventHandler}"
                         IsEnabled="{Binding IsDownloadAllowed}"/>
                 </StackPanel>
@@ -246,8 +218,6 @@
 
                     <Button x:Uid="General_InstallNow"
                         Margin="{StaticResource SmallTopMargin}"
-                        Style="{StaticResource AccentButtonStyle}"
-                        Foreground="White"
                         Command="{Binding UpdateNowButtonEventHandler}"
                         IsEnabled="{Binding AutoUpdatesEnabled}"/>
                 </StackPanel>
@@ -282,8 +252,6 @@
 
                     <Button x:Uid="General_TryAgainToDownloadAndInstall"
                         Margin="{StaticResource SmallTopMargin}"
-                        Style="{StaticResource AccentButtonStyle}"
-                        Foreground="White"
                         Command="{Binding UpdateNowButtonEventHandler}"
                         IsEnabled="{Binding IsDownloadAllowed}"/>
                 </StackPanel>
@@ -294,61 +262,19 @@
                           IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates}"
                           IsEnabled="{Binding AutoUpdatesEnabled}" />
             </StackPanel>
-
+        </controls:SettingsPageControl.ModuleContent>
-        <RelativePanel x:Name="SidePanel" 
+        <!-- 
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <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" />
-                <TextBlock x:Uid="MadeWithOssLove" TextWrapping="Wrap" Margin="0, 10, 0, 0" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="GeneralPage_ImageHyperlinkToDocs">
-                    <Image x:Uid="PowerToys_Icon" Source="ms-appx:///Assets/Modules/PT.png"/>
-                </HyperlinkButton>
-            </Border>
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-
                 <HyperlinkButton Click="OobeButton_Click">
                     <TextBlock x:Uid="Oobe_Button"/>
-                </HyperlinkButton>
+                </HyperlinkButton> -->
+        <!-- Side panel -->
 
-                <HyperlinkButton x:Uid="GeneralPage_ImageHyperlinkToDocs">
+        <controls:SettingsPageControl.ModuleLinks>
-                    <TextBlock x:Uid="General_Repository"/>
+            <controls:SidePanelLink x:Uid="General_Repository" Link="https://aka.ms/powertoys"/>
-                </HyperlinkButton>
+            <controls:SidePanelLink x:Uid="GeneralPage_ReportAbug" Link="https://aka.ms/powerToysReportBug"/>
-
+            <controls:SidePanelLink x:Uid="GeneralPage_RequestAFeature_URL" Link="https://aka.ms/powerToysRequestFeature"/>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysReportBug">
+            <controls:SidePanelLink x:Uid="GeneralPage_PrivacyStatement_URL" Link="http://go.microsoft.com/fwlink/?LinkId=521839"/>
-                    <TextBlock x:Uid="GeneralPage_ReportAbug"/>
+            <controls:SidePanelLink x:Uid="OpenSource_Notice" Link="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md"/>
-                </HyperlinkButton>
+        </controls:SettingsPageControl.ModuleLinks>
-
+    </controls:SettingsPageControl>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysRequestFeature">
-                    <TextBlock x:Uid="GeneralPage_RequestAFeature_URL"/>
-                </HyperlinkButton>
-
-                <HyperlinkButton NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839">
-                    <TextBlock x:Uid="GeneralPage_PrivacyStatement_URL"/>
-                </HyperlinkButton>
-
-                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md">
-                    <TextBlock x:Uid="OpenSource_Notice"/>
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -2,9 +2,8 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Views.ImageResizerPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"    
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"    
     xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
-    xmlns:viewModels="using:Microsoft.PowerToys.Settings.UI.Library.ViewModels"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
@@ -12,46 +11,11 @@
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
-    <Page.Resources>
+    <controls:SettingsPageControl x:Uid="About_ImageResizer"
-        <!--<viewModel:ImageResizerViewModel x:Key="ViewModel"/>-->
+                                  ModuleImageSource="ms-appx:///Assets/Modules/ImageResizer.png"
-    </Page.Resources>
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_ImageResizer">
-
+        <controls:SettingsPageControl.ModuleContent>
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+            <StackPanel>
-        <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="ImageResizerView.(Grid.Row)" Value="1" />
-                        <Setter Target="ImageResizerView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical" x:Name="ImageResizerView"
-                    Margin="0,0,48,0">
 
                 <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
@@ -339,51 +303,14 @@
                       IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.KeepDateModified}"/>
             </StackPanel>
 
-        <RelativePanel x:Name="SidePanel" 
+        </controls:SettingsPageControl.ModuleContent>
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock x:Uid="About_ImageResizer" x:Name="AboutTitle" Grid.ColumnSpan="2"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="ImageResizer_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
 
-            <Border x:Name="AboutImage"
+        <controls:SettingsPageControl.ModuleLinks>
-                    CornerRadius="4"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ImageResizer"/>
-                    Grid.Row="2"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    MaxWidth="240"
+        </controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+        <controls:SettingsPageControl.AttributionLinks>
-                    Margin="{StaticResource SmallTopBottomMargin}"
+            <controls:SidePanelLink Label="Brice Lambson's ImageResizer" Link="https://github.com/bricelam/ImageResizer/"/>
-                    RelativePanel.Below="DescriptionPanel">
+        </controls:SettingsPageControl.AttributionLinks>
-                <HyperlinkButton x:Uid="ImageResizer_ImageHyperlinkToDocs">
+    </controls:SettingsPageControl>
-                    <Image x:Uid="ImageResizer_Image" Source="ms-appx:///Assets/Modules/ImageResizer.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="ImageResizer_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-
-                <TextBlock 
-                x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-                <HyperlinkButton Margin="0,-3,0,0"
-                NavigateUri="https://github.com/bricelam/ImageResizer/">
-                    <TextBlock Text="Brice Lambson's ImageResizer" TextWrapping="Wrap" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -5,9 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.Library.ViewModels"
     xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
@@ -189,46 +188,11 @@
         </DataTemplate>
     </Page.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_KeyboardManager"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/KBM.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_KeyboardManage">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <VisualState.StateTriggers>
+            <StackPanel Orientation="Vertical">
-                        <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="KeyboardManagerView.(Grid.Row)" Value="1" />
-                        <Setter Target="KeyboardManagerView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <StackPanel Orientation="Vertical"
-                    x:Name="KeyboardManagerView"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
                 <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                           IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>
 
@@ -259,8 +223,8 @@
 
                 <Button x:Uid="KeyboardManager_RemapKeyboardButton"
                     Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
                     Command="{Binding Path=RemapKeyboardCommand}"
+                    Style="{StaticResource AccentButtonStyle}"
                     IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
 
                 <ListView x:Name="RemapKeysList"
@@ -339,45 +303,10 @@
                     HorizontalAlignment="Left"
                     />-->
             </StackPanel>
-
+        </controls:SettingsPageControl.ModuleContent>
-        <RelativePanel x:Name="SidePanel" 
+        <controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
-                    Width="{StaticResource SidePanelWidth}"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    Grid.Column="1">
+        </controls:SettingsPageControl.ModuleLinks>
-            <StackPanel x:Name="DescriptionPanel">
+    </controls:SettingsPageControl>
-                <TextBlock x:Uid="About_KeyboardManager"
-                           x:Name="AboutTitle"
-                           Grid.ColumnSpan="2"
-                           Style="{StaticResource SettingsGroupTitleStyle}"
-                           Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="KeyboardManager_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="KeyboardManager_ImageHyperlinkToDocs">
-                    <Image x:Uid="KeyboardManager_Image" Source="ms-appx:///Assets/Modules/KBM.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="KeyboardManager_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -6,56 +6,23 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     x:Class="Microsoft.PowerToys.Settings.UI.Views.PowerLauncherPage"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
+    
     <Page.Resources>
         <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Visible" FalseValue="Collapsed"/>
         <converters:BoolNegationConverter x:Key="BoolNegationConverter"/>
     </Page.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}" >
+    <controls:SettingsPageControl x:Uid="About_PowerLauncher"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/PowerLauncher.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_PowerToysRun">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <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="LauncherView.(Grid.Row)" Value="1" />
-                        <Setter Target="LauncherView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical"
+            <StackPanel Orientation="Vertical">
-                    x:Name="LauncherView"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
                 <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}"/>
 
@@ -63,7 +30,7 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <CustomControls:HotkeySettingsControl x:Uid="PowerLauncher_OpenPowerLauncher"
+            <controls:HotkeySettingsControl x:Uid="PowerLauncher_OpenPowerLauncher"
                                                   HorizontalAlignment="Left"
                                                   MinWidth="240"
                                                   Margin="{StaticResource SmallTopMargin}"
@@ -359,55 +326,14 @@
             </ListView>
         </StackPanel>
 
-        <RelativePanel x:Name="SidePanel" 
+    </controls:SettingsPageControl.ModuleContent>
-                    HorizontalAlignment="Left"
+        <controls:SettingsPageControl.ModuleLinks>
-                    Width="{StaticResource SidePanelWidth}"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_PowerToysRun"/>
-                    Grid.Column="1">
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-            <StackPanel x:Name="DescriptionPanel">
+        </controls:SettingsPageControl.ModuleLinks>
-                <TextBlock x:Uid="About_PowerLauncher" x:Name="AboutTitle" Grid.ColumnSpan="2"
+        <controls:SettingsPageControl.AttributionLinks>
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+            <controls:SidePanelLink Label="Wox" Link="https://github.com/Wox-launcher/Wox/"/>
-                       Margin="{StaticResource XSmallBottomMargin}"/>
+            <controls:SidePanelLink Label="Beta Tadele's Window Walker" Link="https://github.com/betsegaw/windowwalker/"/>
-                <TextBlock x:Uid="PowerLauncher_Description"
+        </controls:SettingsPageControl.AttributionLinks>
-                           TextWrapping="Wrap"
+    </controls:SettingsPageControl>
-                           Grid.Row="1" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="PowerToys_Run_ImageHyperlinkToDocs">
-                    <Image x:Uid="PowerToys_Run_Image" Source="ms-appx:///Assets/Modules/PowerLauncher.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="PowerToys_Run_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-
-                <TextBlock x:Uid="AttributionTitle"
-                           Style="{StaticResource SettingsGroupTitleStyle}"
-                           Foreground="{ Binding Mode=TwoWay, Path=TextColor}"/>
-
-                <HyperlinkButton Margin="0,-3,0,0" NavigateUri="https://github.com/Wox-launcher/Wox/">
-                    <TextBlock Text="Wox"/>
-                </HyperlinkButton>
-
-                <HyperlinkButton NavigateUri="https://github.com/betsegaw/windowwalker/">
-                    <TextBlock Text="Beta Tadele's Window Walker" />
-                </HyperlinkButton>
-
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -5,6 +5,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     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"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
@@ -13,46 +14,12 @@
         <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
     </Page.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_FileExplorerPreview"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/PowerPreview.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_FileExplorerAddOns">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <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="PowerPreviewView.(Grid.Row)" Value="1" />
-                        <Setter Target="PowerPreviewView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
             
-        <StackPanel Orientation="Vertical"
+            <StackPanel Orientation="Vertical">
-                    x:Name="PowerPreviewView"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
             <TextBlock x:Uid="FileExplorerPreview_RunAsAdminRequired"
                        Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
                        Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"
@@ -91,42 +58,11 @@
                           IsOn="{Binding Mode=TwoWay, Path=SVGThumbnailIsEnabled}"
                           IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
         </StackPanel>
-        <RelativePanel x:Name="SidePanel" 
+        </controls:SettingsPageControl.ModuleContent>
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock x:Uid="About_FileExplorerPreview" x:Name="AboutTitle" Grid.ColumnSpan="2"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="FileExplorerPreview_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
 
-            <Border x:Name="AboutImage"
+        <controls:SettingsPageControl.ModuleLinks>
-                    CornerRadius="4"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_FileExplorerAddOns"/>
-                    Grid.Row="2"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    MaxWidth="240"
+        </controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+    </controls:SettingsPageControl>
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="FileExplorerPreview_ImageHyperlinkToDocs">
-                    <Image x:Uid="FileExplorerPreview_Image" Source="ms-appx:///Assets/Modules/PowerPreview.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="FileExplorerPreview_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -4,46 +4,16 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_PowerRename"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/PowerRename.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_PowerRename">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <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="PowerRenameView.(Grid.Row)" Value="1" />
-                        <Setter Target="PowerRenameView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
             <StackPanel Orientation="Vertical"
                     x:Name="PowerRenameView"
                     HorizontalAlignment="Left"
@@ -105,53 +75,14 @@
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
             </StackPanel>
 
+        </controls:SettingsPageControl.ModuleContent>
 
-        <RelativePanel x:Name="SidePanel" 
+        <controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_PowerRename"/>
-                    Width="{StaticResource SidePanelWidth}"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    Grid.Column="1">
+        </controls:SettingsPageControl.ModuleLinks>
-            <StackPanel x:Name="DescriptionPanel">
+        <controls:SettingsPageControl.AttributionLinks>
-                <TextBlock x:Uid="About_PowerRename" x:Name="AboutTitle" Grid.ColumnSpan="2"
+            <controls:SidePanelLink Label="Chris Davis's SmartRenamer" Link="https://github.com/chrdavis/SmartRename"/>
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+        </controls:SettingsPageControl.AttributionLinks>
-                       Margin="{StaticResource XSmallBottomMargin}"/>
+    </controls:SettingsPageControl>
-                <TextBlock x:Uid="PowerRename_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="PowerRename_ImageHyperlinkToDocs">
-                    <Image x:Uid="PowerRename_Image" Source="ms-appx:///Assets/Modules/PowerRename.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="PowerRename_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-
-                <TextBlock 
-                x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" 
-                Foreground="{ Binding Mode=TwoWay, Path=TextColor}"/>
-
-                <HyperlinkButton NavigateUri="https://github.com/chrdavis/SmartRename" Margin="0,-3,0,0">
-                    <TextBlock Text="Chris Davis's SmartRenamer" TextWrapping="Wrap" />
-                </HyperlinkButton>
-
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -4,7 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
@@ -15,40 +15,12 @@
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_ShortcutGuide"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_ShortcutGuide">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <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="ShortcutGuideView.(Grid.Row)" Value="1" />
-                        <Setter Target="ShortcutGuideView.Margin" Value="0" />
-                        <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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
             <StackPanel Orientation="Vertical"
                     x:Name="ShortcutGuideView"
                     HorizontalAlignment="Left"
@@ -61,7 +33,7 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <CustomControls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
+                <controls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
                                                   HorizontalAlignment="Left"
                                                   MinWidth="240"
                                                   Margin="{StaticResource SmallTopMargin}"
@@ -128,45 +100,10 @@
                      MinWidth="240"
                      MinHeight="160" />
             </StackPanel>
-
+        </controls:SettingsPageControl.ModuleContent>
-        <RelativePanel x:Name="SidePanel" 
+        <controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
-                    Width="{StaticResource SidePanelWidth}"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    Grid.Column="1">
+        </controls:SettingsPageControl.ModuleLinks>
-            <StackPanel x:Name="DescriptionPanel">
+    </controls:SettingsPageControl>
-                <TextBlock x:Uid="About_ShortcutGuide"
-                           x:Name="AboutTitle"
-                           Grid.ColumnSpan="2"
-                           Style="{StaticResource SettingsGroupTitleStyle}"
-                           Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="ShortcutGuide_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="ShortcutGuide_ImageHyperlinkToDocs">
-                    <Image x:Uid="Shortcut_Guide_Image" Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="ShortcutGuide_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>

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

@@ -4,44 +4,16 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <controls:SettingsPageControl x:Uid="About_VideoConference"
-        <VisualStateManager.VisualStateGroups>
+                                  ModuleImageSource="ms-appx:///Assets/Modules/VideoConference.png"
-            <VisualStateGroup x:Name="LayoutVisualStates">
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_VideoConference">
-                <VisualState x:Name="WideLayout">
+        <controls:SettingsPageControl.ModuleContent>
-                    <VisualState.StateTriggers>
+
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+            <StackPanel Orientation="Vertical">
-                    </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="VideoConferenceView.(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>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical" x:Name="VideoConferenceView">
 
                 <ToggleSwitch x:Uid="VideoConference_Enable"
                           IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
@@ -52,7 +24,7 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}" />
 
-            <CustomControls:HotkeySettingsControl 
+                <controls:HotkeySettingsControl 
                                           x:Uid="VideoConference_CameraAndMicrophoneMuteHotkeyControl_Header"
                                           Width="240"
                                           HorizontalAlignment="Left"
@@ -62,7 +34,7 @@
                                           IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                                           />
 
-            <CustomControls:HotkeySettingsControl 
+                <controls:HotkeySettingsControl 
                                           x:Uid="VideoConference_MicrophoneMuteHotkeyControl_Header"
                                           Width="240"
                                           HorizontalAlignment="Left"
@@ -72,7 +44,7 @@
                                           IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                                           />
 
-            <CustomControls:HotkeySettingsControl 
+                <controls:HotkeySettingsControl 
                                           x:Uid="VideoConference_CameraMuteHotkeyControl_Header"
                                           Width="240"
                                           HorizontalAlignment="Left"
@@ -167,44 +139,11 @@
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       />
             </StackPanel>
-        <RelativePanel x:Name="SidePanel" 
+        </controls:SettingsPageControl.ModuleContent>
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock x:Uid="About_VideoConference"
-                           x:Name="AboutTitle"
-                           Grid.ColumnSpan="2"
-                           Style="{StaticResource SettingsGroupTitleStyle}"
-                           Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="VideoConference_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
 
-            <Border x:Name="AboutImage"
+        <controls:SettingsPageControl.ModuleLinks>
-                    CornerRadius="4"
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_VideoConference"/>
-                    Grid.Row="2"
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-                    MaxWidth="240"
+        </controls:SettingsPageControl.ModuleLinks>
-                    HorizontalAlignment="Left"
+    </controls:SettingsPageControl>
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <HyperlinkButton x:Uid="VideoConference_ImageHyperlinkToDocs">
-                    <Image Source="ms-appx:///Assets/Modules/VideoConference.png" />
-                </HyperlinkButton>
-            </Border>
-
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton x:Uid="VideoConference_ImageHyperlinkToDocs">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
-    </Grid>
 </Page>