[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/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,54 +188,19 @@
         </DataTemplate>
     </Page.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="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"
+    <controls:SettingsPageControl x:Uid="About_KeyboardManager"
+                                  ModuleImageSource="ms-appx:///Assets/Modules/KBM.png"
+                                  ModuleImageLink="https://aka.ms/PowerToysOverview_KeyboardManage">
+        <controls:SettingsPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
+                <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                           IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>
 
-            <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys" Margin="{StaticResource XSmallTopMargin}">
-                <TextBlock x:Uid="KBM_KeysCannotBeRemapped" />
-            </HyperlinkButton>
-            
-            <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
+                <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys" Margin="{StaticResource XSmallTopMargin}">
+                    <TextBlock x:Uid="KBM_KeysCannotBeRemapped" />
+                </HyperlinkButton>
+
+                <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
             <TextBlock x:Uid="KeyboardManager_ProfileDescription"
@@ -249,21 +213,21 @@
                 <ComboBoxItem Content="Config-3"/>
             </ComboBox>-->
 
-            <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
+                <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <TextBlock x:Uid="KeyboardManager_RemapKeyboardSubtitle"
+                <TextBlock x:Uid="KeyboardManager_RemapKeyboardSubtitle"
                        Margin="{StaticResource SmallTopMargin}"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <Button x:Uid="KeyboardManager_RemapKeyboardButton"
+                <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"
+                <ListView x:Name="RemapKeysList"
                       x:Uid="RemapKeysList"
                       extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
                       ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
@@ -282,7 +246,7 @@
                       ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
                       />
 
-            <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
+                <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
                     Icon="Add"
                     Width="370"
                     Style="{StaticResource AddItemAppBarButtonStyle}"
@@ -291,23 +255,23 @@
                     HorizontalAlignment="Left"
                     IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>-->
 
-            <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
+                <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <TextBlock x:Uid="KeyboardManager_RemapShortcutsSubtitle"
+                <TextBlock x:Uid="KeyboardManager_RemapShortcutsSubtitle"
                        Margin="{StaticResource SmallTopMargin}"
                        TextWrapping="WrapWholeWords"
                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-            <Button x:Uid="KeyboardManager_RemapShortcutsButton"
+                <Button x:Uid="KeyboardManager_RemapShortcutsButton"
                     Margin="{StaticResource SmallTopMargin}"
                     Style="{StaticResource AccentButtonStyle}"
                     Command="{Binding Path=EditShortcutCommand}"
                     IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
                     />
 
-            <ListView x:Name="RemapShortcutsList"
+                <ListView x:Name="RemapShortcutsList"
                       x:Uid="RemapShortcutsList"
                       extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
                       ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
@@ -329,7 +293,7 @@
                       ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
                       />
 
-            <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
+                <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
                     Icon="Add"
                     Width="370"
                     Style="{StaticResource AddItemAppBarButtonStyle}"
@@ -338,46 +302,11 @@
                     Margin="{StaticResource AddItemButtonMargin}"
                     HorizontalAlignment="Left"
                     />-->
-        </StackPanel>
-
-        <RelativePanel x:Name="SidePanel" 
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <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>
+        </controls:SettingsPageControl.ModuleContent>
+        <controls:SettingsPageControl.ModuleLinks>
+            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
+            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
+        </controls:SettingsPageControl.ModuleLinks>
+    </controls:SettingsPageControl>
 </Page>