Adding new settings control

src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml

@@ -14,6 +14,10 @@
                 <ResourceDictionary Source="/Styles/_Sizes.xaml" />
                 <ResourceDictionary Source="/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/Styles/Button.xaml"/>
+
+                <ResourceDictionary Source="/Themes/Colors.xaml"/>
+                <ResourceDictionary Source="/Themes/SettingsExpanderStyles.xaml"/>
+                <ResourceDictionary Source="/Themes/SettingsSectionStyles.xaml"/>
             </ResourceDictionary.MergedDictionaries>
             
             <converters:ModuleEnabledToOpacityConverter x:Key="ModuleEnabledToOpacityConverter"/>
@@ -41,6 +45,12 @@
                     <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Transparent"/>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
+            
+            
+            
+            
+            
+            
         </ResourceDictionary>
     </Application.Resources>
 </xaml:XamlApplication>

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

@@ -0,0 +1,124 @@
+// 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.ComponentModel;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    [TemplatePart(Name = PartIconPresenter, Type = typeof(ContentPresenter))]
+    [TemplatePart(Name = PartDescriptionPresenter, Type = typeof(ContentPresenter))]
+    public class Setting : ContentControl
+    {
+        private const string PartIconPresenter = "IconPresenter";
+        private const string PartDescriptionPresenter = "DescriptionPresenter";
+        private ContentPresenter _iconPresenter;
+        private ContentPresenter _descriptionPresenter;
+        private Setting _setting;
+
+        public Setting()
+        {
+            this.DefaultStyleKey = typeof(Setting);
+        }
+
+        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(
+           "Title",
+           typeof(string),
+           typeof(Setting),
+           new PropertyMetadata(default(string)));
+
+        public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(
+            "Description",
+            typeof(object),
+            typeof(Setting),
+            new PropertyMetadata(null, OnDescriptionChanged));
+
+        public static readonly DependencyProperty IconProperty = DependencyProperty.Register(
+            "Icon",
+            typeof(object),
+            typeof(Setting),
+            new PropertyMetadata(default(string), OnIconChanged));
+
+        public static readonly DependencyProperty ActionContentProperty = DependencyProperty.Register(
+            "ActionContent",
+            typeof(object),
+            typeof(Setting),
+            null);
+
+        [Localizable(true)]
+        public string Title
+        {
+            get => (string)GetValue(TitleProperty);
+            set => SetValue(TitleProperty, value);
+        }
+
+        [Localizable(true)]
+        public object Description
+        {
+            get => (object)GetValue(DescriptionProperty);
+            set => SetValue(DescriptionProperty, value);
+        }
+
+        public object Icon
+        {
+            get => (object)GetValue(IconProperty);
+            set => SetValue(IconProperty, value);
+        }
+
+        public object ActionContent
+        {
+            get => (object)GetValue(ActionContentProperty);
+            set => SetValue(ActionContentProperty, value);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+            _setting = (Setting)this;
+            _iconPresenter = (ContentPresenter)_setting.GetTemplateChild(PartIconPresenter);
+            _descriptionPresenter = (ContentPresenter)_setting.GetTemplateChild(PartDescriptionPresenter);
+            Update();
+        }
+
+        private static void OnIconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((Setting)d).Update();
+        }
+
+        private static void OnDescriptionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((Setting)d).Update();
+        }
+
+        private void Update()
+        {
+            if (_setting == null)
+            {
+                return;
+            }
+
+            if (_setting._iconPresenter != null)
+            {
+                if (_setting.Icon == null)
+                {
+                    _setting._iconPresenter.Visibility = Visibility.Collapsed;
+                }
+                else
+                {
+                    _setting._iconPresenter.Visibility = Visibility.Visible;
+                }
+            }
+
+            if (_setting.Description == null)
+            {
+                _setting._descriptionPresenter.Visibility = Visibility.Collapsed;
+            }
+            else
+            {
+                _setting._descriptionPresenter.Visibility = Visibility.Visible;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,93 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls">
+
+    <Style TargetType="controls:Setting">
+        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="Padding" Value="16" />
+        <Setter Property="Margin" Value="0,0,0,2"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Setting">
+                    <Grid x:Name="RootGrid"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          Background="{TemplateBinding Background}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalAlignment="Stretch"
+                          VerticalAlignment="Center"
+                          MinHeight="48">
+
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <!-- Icon -->
+                            <ColumnDefinition Width="*"/>
+                            <!-- Title and subtitle -->
+                            <ColumnDefinition Width="Auto"/>
+                            <!-- Action control -->
+                        </Grid.ColumnDefinitions>
+
+                        <ContentPresenter x:Name="IconPresenter"
+                          Content="{TemplateBinding Icon}"
+                          HorizontalAlignment="Center"
+                          FontSize="20"
+                          Margin="2,0,18,0"
+                          MaxWidth="26"
+                          AutomationProperties.AccessibilityView="Raw"
+                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                          Foreground="{ThemeResource CardPrimaryForegroundBrush}"
+                          VerticalAlignment="Center"/>
+
+
+                        <StackPanel x:Name="TitleDescriptionPanel"
+                            VerticalAlignment="Center"
+                            Grid.Column="1"
+                            HorizontalAlignment="Stretch"
+                            Margin="0,0,16,0">
+
+                            <TextBlock
+                                x:Name="TitlePresenter"
+                                Text="{TemplateBinding Title}"
+                                FontWeight="SemiBold"
+                                VerticalAlignment="Center"
+                                Foreground="{ThemeResource CardPrimaryForegroundBrush}" />
+
+                            <ContentPresenter
+                                x:Name="DescriptionPresenter"
+                                Content="{TemplateBinding Description}"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}">
+                                <ContentPresenter.Resources>
+                                    <Style TargetType="TextBlock"  BasedOn="{StaticResource CaptionTextBlockStyle}">
+                                        <Style.Setters>
+                                            <Setter Property="TextWrapping" Value="WrapWholeWords"/>
+                                        </Style.Setters>
+                                    </Style>
+                                    <Style TargetType="HyperlinkButton" BasedOn="{StaticResource TextBlockButtonStyle}">
+                                        <Style.Setters>
+                                            <Setter Property="FontWeight" Value="SemiBold"/>
+                                            <Setter Property="Margin" Value="0"/>
+                                            <Setter Property="Padding" Value="0,6,0,0"/>
+                                        </Style.Setters>
+                                    </Style>
+                                </ContentPresenter.Resources>
+                            </ContentPresenter>
+                        </StackPanel>
+
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Content="{TemplateBinding ActionContent}"
+                            Grid.Column="2"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Right" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

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

@@ -99,6 +99,7 @@
       <DependentUpon>HotkeySettingsControl.xaml</DependentUpon>
     </Compile>
     <Compile Include="Controls\KeyVisual\KeyVisual.cs" />
+    <Compile Include="Controls\Setting\Setting.cs" />
     <Compile Include="Controls\ShortcutTextControl.xaml.cs">
       <DependentUpon>ShortcutTextControl.xaml</DependentUpon>
     </Compile>
@@ -279,7 +280,7 @@
       <Version>6.1.2</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.UI.Xaml">
-      <Version>2.6.0-prerelease.210623001</Version>
+      <Version>2.6.1-prerelease.210709001</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.Xaml.Behaviors.Uwp.Managed">
       <Version>2.0.1</Version>
@@ -310,6 +311,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\Setting\Setting.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\ShortcutTextControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -390,6 +395,22 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Themes\Colors.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Themes\Generic.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Themes\SettingsExpanderStyles.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Themes\SettingsSectionStyles.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\AwakePage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/Colors.xaml

@@ -0,0 +1,27 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Dark">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <Thickness x:Key="CardBorderThickness">1</Thickness>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <Thickness x:Key="CardBorderThickness">1</Thickness>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="SystemColorButtonFaceColorBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <Thickness x:Key="CardBorderThickness">2</Thickness>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/Generic.xaml

@@ -0,0 +1,8 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Controls/Setting/Setting.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/SettingsExpanderStyles.xaml

@@ -0,0 +1,40 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
+
+    <!-- Thickness -->
+    <Thickness x:Key="ExpanderContentPadding">0</Thickness>
+
+    <Thickness x:Key="ExpanderSettingMargin">56, 12, 40, 12</Thickness>
+
+    <!-- Styles -->
+    <!-- Setting used in a Expander header -->
+    <Style x:Key="ExpanderHeaderSettingStyle" TargetType="controls:Setting">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="Padding" Value="0, 14, 0, 14" />
+        <Setter Property="Margin" Value="0"/>
+    </Style>
+
+    <Thickness x:Key="ExpanderChevronMargin">0,0,8,0</Thickness>
+
+    <!-- Setting used in a Expander header -->
+    <Style x:Key="ExpanderContentSettingStyle" TargetType="controls:Setting">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0,1,0,0" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Padding" Value="{StaticResource ExpanderSettingMargin}" />
+    </Style>
+
+    <!-- Setting expander style -->
+    <Style x:Key="SettingsExpanderStyle" TargetType="muxc:Expander">
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
+    </Style>
+
+</ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/SettingsSectionStyles.xaml

@@ -0,0 +1,26 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls">
+
+    <!-- Template for the header of a section of settings -->
+    <DataTemplate x:Key="SectionHeaderTemplate">
+        <TextBlock
+                    Text="{Binding}"
+                    Style="{ThemeResource BodyStrongTextBlockStyle}"
+                    Margin="2,32,0,8"
+                    AutomationProperties.HeadingLevel="Level2" />
+    </DataTemplate>
+
+    <!-- Template for content of a section of settings -->
+    <Style TargetType="toolkitcontrols:HeaderedItemsControl">
+        <Setter Property="HeaderTemplate" Value="{StaticResource SectionHeaderTemplate}"/>
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <StackPanel Orientation="Vertical" Spacing="2"/>
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

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

@@ -24,6 +24,8 @@
                                   ModuleImageLink="https://aka.ms/powertoys">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
+
+                <controls:Setting/>
                 <TextBlock x:Uid="Admin_Mode" 
                        FontWeight="SemiBold"
                        TextWrapping="Wrap"

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

@@ -13,11 +13,14 @@
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerRename.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_PowerRename">
         <controls:SettingsPageControl.ModuleContent>
+
+         
             <StackPanel Orientation="Vertical"
                     x:Name="PowerRenameView"
                     HorizontalAlignment="Left"
-                    Margin="0,0,48,0"
-                    MaxWidth="{StaticResource MaxContentWidth}">
+                    Margin="0,0,48,0">
+
+                <controls:Setting Title="Enable PowerRename" />
 
                 <ToggleSwitch x:Uid="PowerRename_Toggle_Enable"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"