Changes

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

@@ -22,6 +22,7 @@
   <ItemGroup>
     <None Remove="Assets\Settings\Modules\APDialog.dark.png" />
     <None Remove="Assets\Settings\Modules\APDialog.light.png" />
+    <None Remove="SettingsXAML\Controls\OpacityMaskView\OpacityMaskView.xaml" />
   </ItemGroup>
   <ItemGroup>
     <Page Remove="SettingsXAML\App.xaml" />
@@ -132,6 +133,9 @@
     <None Update="Assets\Settings\Scripts\DisableModule.ps1">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
+    <Page Update="SettingsXAML\Controls\OpacityMaskView\OpacityMaskView.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
   </ItemGroup>
 
   <ItemGroup>

src/settings-ui/Settings.UI/SettingsXAML/App.xaml

@@ -9,6 +9,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                 <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml" />
+                <ResourceDictionary Source="/SettingsXAML/Controls/OpacityMaskView/OpacityMaskView.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/Button.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/InfoBadge.xaml" />

src/settings-ui/Settings.UI/SettingsXAML/Controls/OOBEPageControl/OOBEPageControl.xaml

@@ -2,18 +2,17 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Controls.OOBEPageControl"
     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:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="300"
     d:DesignWidth="400"
     mc:Ignorable="d">
-
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-
         <Image
             x:Name="HeaderImage"
             Height="{x:Bind HeroImageHeight}"

src/settings-ui/Settings.UI/SettingsXAML/Controls/OpacityMaskView/OpacityMaskView.cs

@@ -0,0 +1,118 @@
+// 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.Linq;
+using System.Numerics;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Documents;
+using Microsoft.UI.Xaml.Hosting;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls;
+
+/// <summary>
+/// A control that applies an opacity mask to its content.
+/// </summary>
+[TemplatePart(Name = RootGridTemplateName, Type = typeof(Grid))]
+[TemplatePart(Name = MaskContainerTemplateName, Type = typeof(Border))]
+[TemplatePart(Name = ContentPresenterTemplateName, Type = typeof(ContentPresenter))]
+public partial class OpacityMaskView : ContentControl
+{
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+
+    // This is from Windows Community Toolkit Labs: https://github.com/CommunityToolkit/Labs-Windows/pull/491
+
+    /// <summary>
+    /// Identifies the <see cref="OpacityMask"/> property.
+    /// </summary>
+    public static readonly DependencyProperty OpacityMaskProperty =
+        DependencyProperty.Register(nameof(OpacityMask), typeof(UIElement), typeof(OpacityMaskView), new PropertyMetadata(null, OnOpacityMaskChanged));
+
+    private const string ContentPresenterTemplateName = "PART_ContentPresenter";
+    private const string MaskContainerTemplateName = "PART_MaskContainer";
+    private const string RootGridTemplateName = "PART_RootGrid";
+
+    private readonly Compositor _compositor = CompositionTarget.GetCompositorForCurrentThread();
+    private CompositionBrush? _mask;
+    private CompositionMaskBrush? _maskBrush;
+
+    /// <summary>
+    /// Initializes a new instance of the <see cref="OpacityMaskView"/> class.
+    /// Creates a new instance of the <see cref="OpacityMaskView"/> class.
+    /// </summary>
+    public OpacityMaskView()
+    {
+        DefaultStyleKey = typeof(OpacityMaskView);
+    }
+
+    /// <summary>
+    /// Gets or sets a <see cref="UIElement"/> as the opacity mask that is applied to alpha-channel masking for the rendered content of the content.
+    /// </summary>
+    public UIElement? OpacityMask
+   {
+        get => (UIElement?)GetValue(OpacityMaskProperty);
+        set => SetValue(OpacityMaskProperty, value);
+    }
+#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+
+    /// <inheritdoc />
+    protected override void OnApplyTemplate()
+    {
+        base.OnApplyTemplate();
+
+        Grid rootGrid = (Grid)GetTemplateChild(RootGridTemplateName);
+        ContentPresenter contentPresenter = (ContentPresenter)GetTemplateChild(ContentPresenterTemplateName);
+        Border maskContainer = (Border)GetTemplateChild(MaskContainerTemplateName);
+
+        _maskBrush = _compositor.CreateMaskBrush();
+        _maskBrush.Source = GetVisualBrush(contentPresenter);
+        _mask = GetVisualBrush(maskContainer);
+        _maskBrush.Mask = OpacityMask is null ? null : _mask;
+
+        SpriteVisual redirectVisual = _compositor.CreateSpriteVisual();
+        redirectVisual.RelativeSizeAdjustment = Vector2.One;
+        redirectVisual.Brush = _maskBrush;
+        ElementCompositionPreview.SetElementChildVisual(rootGrid, redirectVisual);
+    }
+
+    private static CompositionBrush GetVisualBrush(UIElement element)
+    {
+        Visual visual = ElementCompositionPreview.GetElementVisual(element);
+
+        Compositor compositor = visual.Compositor;
+
+        CompositionVisualSurface visualSurface = compositor.CreateVisualSurface();
+        visualSurface.SourceVisual = visual;
+        ExpressionAnimation sourceSizeAnimation = compositor.CreateExpressionAnimation($"{nameof(visual)}.Size");
+        sourceSizeAnimation.SetReferenceParameter(nameof(visual), visual);
+        visualSurface.StartAnimation(nameof(visualSurface.SourceSize), sourceSizeAnimation);
+
+        CompositionSurfaceBrush brush = compositor.CreateSurfaceBrush(visualSurface);
+
+        visual.Opacity = 0;
+
+        return brush;
+    }
+
+    private static void OnOpacityMaskChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        OpacityMaskView self = (OpacityMaskView)d;
+        if (self._maskBrush is not { } maskBrush)
+        {
+            return;
+        }
+
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+        UIElement? opacityMask = (UIElement?)e.NewValue;
+#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+        maskBrush.Mask = opacityMask is null ? null : self._mask;
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/OpacityMaskView/OpacityMaskView.xaml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<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 BasedOn="{StaticResource DefaultOpacityMaskViewStyle}" TargetType="controls:OpacityMaskView" />
+
+    <Style x:Key="DefaultOpacityMaskViewStyle" TargetType="controls:OpacityMaskView">
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Top" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:OpacityMaskView">
+                    <Grid
+                        x:Name="PART_RootGrid"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                        <Border
+                            x:Name="PART_MaskContainer"
+                            Child="{TemplateBinding OpacityMask}"
+                            IsHitTestVisible="False" />
+                        <ContentPresenter
+                            x:Name="PART_ContentPresenter"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsGroup/SettingsGroup.xaml

@@ -8,7 +8,7 @@
             <Setter.Value>
                 <ItemsPanelTemplate>
                     <StackPanel
-                        ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
+                    
                         Orientation="Vertical"
                         Spacing="{StaticResource SettingsCardSpacing}" />
                 </ItemsPanelTemplate>

src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsPageControl/SettingsPageControl.xaml

@@ -5,28 +5,82 @@
     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:oobe="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:tk7controls="using:CommunityToolkit.WinUI.UI.Controls"
     xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
     Loaded="UserControl_Loaded"
     mc:Ignorable="d">
 
     <UserControl.Resources>
-        <x:Double x:Key="PageMaxWidth">1000</x:Double>
-        <tkconverters:DoubleToVisibilityConverter
-            x:Name="doubleToVisibilityConverter"
-            FalseValue="Collapsed"
-            GreaterThan="0"
-            TrueValue="Visible" />
+        <ResourceDictionary>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Light">
+                    <LinearGradientBrush x:Key="OverlayLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <GradientStop Offset="0" Color="#FFFFFFFF" />
+                        <GradientStop Offset="0.55" Color="#FFFFFFFF" />
+                        <GradientStop Offset="0.65" Color="#99FFFFFF" />
+                        <GradientStop Offset="0.70" Color="#66FFFFFF" />
+                        <GradientStop Offset="0.80" Color="#19FFFFFF" />
+                        <GradientStop Offset="0.85" Color="#00FFFFFF" />
+                        <GradientStop Offset="1" Color="#00FFFFFF" />
+                    </LinearGradientBrush>
+                    <RadialGradientBrush x:Key="OverlayRadialGradient" Center="0.5,0.5" MappingMode="RelativeToBoundingBox" RadiusX="0.92" RadiusY="0.8200000000000001" SpreadMethod="Pad">
+                        <GradientStop Offset="0" Color="#FFFFFFFF" />
+                        <GradientStop Offset="0.05" Color="#FFFFFFFF" />
+                        <GradientStop Offset="0.35" Color="#FFFFFFFF" />
+                        <GradientStop Offset="0.55" Color="#00FFFFFF" />
+                        <GradientStop Offset="0.95" Color="#00FFFFFF" />
+                        <GradientStop Offset="1" Color="#00FFFFFF" />
+                    </RadialGradientBrush>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Dark">
+                    <LinearGradientBrush x:Key="OverlayLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <GradientStop Offset="0" Color="#FF000000" />
+                        <GradientStop Offset="0.55" Color="#FF000000" />
+                        <GradientStop Offset="0.85" Color="#00000000" />
+                        <GradientStop Offset="1" Color="#00000000" />
+                    </LinearGradientBrush>
+                    <RadialGradientBrush x:Key="OverlayRadialGradient" MappingMode="RelativeToBoundingBox" RadiusX="0.8" RadiusY="0.6" SpreadMethod="Pad">
+                        <GradientStop Offset="0" Color="#FF000000" />
+                        <GradientStop Offset="0.30" Color="#FF000000" />
+                        <GradientStop Offset="0.80" Color="#00000000" />
+                        <GradientStop Offset="1" Color="#00000000" />
+                    </RadialGradientBrush>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="HighContrast">
+                    <LinearGradientBrush x:Key="OverlayLinearGradient" StartPoint="0.5,0" EndPoint="0.5,1">
+                        <GradientStop Offset="0" Color="#FF000000" />
+                        <GradientStop Offset="0.55" Color="#FF000000" />
+                        <GradientStop Offset="0.95" Color="#00000000" />
+                    </LinearGradientBrush>
+                    <RadialGradientBrush x:Key="OverlayRadialGradient" Center="0.5,0.5" MappingMode="RelativeToBoundingBox" RadiusX="0.92" RadiusY="0.8200000000000001" SpreadMethod="Pad">
+                        <GradientStop Offset="0" Color="#FF000000" />
+                        <GradientStop Offset="0.05" Color="#FF000000" />
+                        <GradientStop Offset="0.35" Color="#FF000000" />
+                        <GradientStop Offset="0.55" Color="#FF000000" />
+                        <GradientStop Offset="0.95" Color="#00000000" />
+                        <GradientStop Offset="1" Color="#00000000" />
+                    </RadialGradientBrush>
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
+            <x:Double x:Key="PageMaxWidth">1000</x:Double>
+            <tkconverters:DoubleToVisibilityConverter
+                x:Name="doubleToVisibilityConverter"
+                FalseValue="Collapsed"
+                GreaterThan="0"
+                TrueValue="Visible" />
+            <x:Double x:Key="ContentDialogMaxWidth">640</x:Double>
+        </ResourceDictionary>
     </UserControl.Resources>
 
-    <Grid Padding="20,0,0,0" RowSpacing="24">
+    <Grid Padding="20,0,0,0" RowSpacing="16">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <TextBlock
             x:Name="Header"
-            MaxWidth="{StaticResource PageMaxWidth}"
+            MaxWidth="1020"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             AutomationProperties.HeadingLevel="1"
@@ -52,6 +106,7 @@
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto" />
                         <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
@@ -61,7 +116,7 @@
                         MaxWidth="160"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
-                        CornerRadius="4">
+                        CornerRadius="8">
                         <Image AutomationProperties.AccessibilityView="Raw">
                             <Image.Source>
                                 <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
@@ -69,6 +124,34 @@
                         </Image>
                     </Border>
 
+                    <ContentDialog x:Name="OobeDialog">
+                        <oobe:OobeAdvancedPaste />
+                    </ContentDialog>
+                    <Button
+                        Grid.Column="2"
+                        Margin="0,-4,12,0"
+                        VerticalAlignment="Top"
+                        Click="Button_Click"
+                        Style="{StaticResource SubtleButtonStyle}">
+                        <Grid ColumnSpacing="16">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <FontIcon
+                                FontSize="20"
+                                Foreground="{ThemeResource AccentTextFillColorTertiaryBrush}"
+                                Glyph="&#xE946;" />
+                            <StackPanel Grid.Column="1" Orientation="Vertical">
+                                <TextBlock FontWeight="SemiBold" Text="How to use" />
+                                <TextBlock
+                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                    Style="{StaticResource CaptionTextBlockStyle}"
+                                    Text="Tips and tricks" />
+                            </StackPanel>
+                        </Grid>
+                    </Button>
+
                     <StackPanel x:Name="DescriptionPanel" Grid.Column="1">
                         <TextBlock
                             x:Name="AboutDescription"

src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsPageControl/SettingsPageControl.xaml.cs

@@ -2,8 +2,8 @@
 // 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.ObjectModel;
-
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 
@@ -72,5 +72,10 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
         {
             PrimaryLinksControl.Focus(FocusState.Programmatic);
         }
+
+        private async void Button_Click(object sender, RoutedEventArgs e)
+        {
+            var result = await OobeDialog.ShowAsync();
+        }
     }
 }

src/settings-ui/Settings.UI/SettingsXAML/OOBE/Views/OobeAdvancedPaste.xaml.cs

@@ -18,7 +18,11 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
         public OobeAdvancedPaste()
         {
             this.InitializeComponent();
-            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModules.AdvancedPaste]);
+            ViewModel = new OobePowerToysModule(new OobePowerToysModule()
+            {
+                ModuleName = "AdvancedPaste",
+                IsNew = false,
+            });
             DataContext = ViewModel;
         }
 

src/settings-ui/Settings.UI/SettingsXAML/Views/AlwaysOnTopPage.xaml

@@ -15,7 +15,7 @@
         IsTabStop="False"
         ModuleImageSource="ms-appx:///Assets/Settings/Modules/AlwaysOnTop.png">
         <controls:SettingsPageControl.ModuleContent>
-            <StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}" Orientation="Vertical">
+            <StackPanel Orientation="Vertical">
                 <tkcontrols:SettingsCard
                     x:Uid="AlwaysOnTop_EnableToggleControl_HeaderText"
                     HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/AlwaysOnTop.png}"

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

@@ -0,0 +1,4 @@
+<ResourceDictionary
+    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" />