[OOBE] Bolded shortcuts / instructions (#10574)

* Colorpicker keys

* Key visuals added

* Added highlighted text

* Undo comment

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

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

@@ -0,0 +1,30 @@
+// 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 Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed class KeyVisual : Control
+    {
+        public object Content
+        {
+            get => (string)GetValue(ContentProperty);
+            set => SetValue(ContentProperty, value);
+        }
+
+        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(KeyVisual), new PropertyMetadata(default(string)));
+
+        public KeyVisual()
+        {
+            this.DefaultStyleKey = typeof(KeyVisual);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+        }
+    }
+}

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

@@ -0,0 +1,57 @@
+<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.Controls">
+
+    <!-- This can be removed once we adopt WinUI 2.6 or higher -->
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <Color x:Key="ControlStrokeColorDefault">#12FFFFFF</Color>
+            <Color x:Key="ControlStrokeColorSecondary">#18FFFFFF</Color>
+            <Color x:Key="ControlFillColorDefault">#0FFFFFFF</Color>
+            
+        </ResourceDictionary>
+        
+        <ResourceDictionary x:Key="Light">
+            <Color x:Key="ControlStrokeColorDefault">#0F000000</Color>
+            <Color x:Key="ControlStrokeColorSecondary">#29000000</Color>
+            <Color x:Key="ControlFillColorDefault">#B3FFFFFF</Color>
+            
+        </ResourceDictionary>
+        
+    </ResourceDictionary.ThemeDictionaries>
+    
+    <LinearGradientBrush x:Key="ControlElevationBorderBrush"
+                         MappingMode="Absolute"
+                         StartPoint="0,0"
+                         EndPoint="0,3">
+        <LinearGradientBrush.GradientStops>
+            <GradientStop Offset="0.33"
+                          Color="{ThemeResource ControlStrokeColorSecondary}" />
+            <GradientStop Offset="1.0"
+                          Color="{ThemeResource ControlStrokeColorDefault}" />
+        </LinearGradientBrush.GradientStops>
+    </LinearGradientBrush>
+    <!--- -->
+    
+    
+    <Style TargetType="local:KeyVisual">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyVisual">
+                    <!-- Background="{ThemeResource ControlFillColorDefault}" -->
+                    <Border Background="LightGray"
+                            BorderThickness="1"
+                            BorderBrush="{ThemeResource ControlElevationBorderBrush}"
+                            CornerRadius="4"
+                            Padding="11,5,11,6"
+                            Height="32">
+                        <ContentPresenter Content="{TemplateBinding Content}"
+                                          FontWeight="SemiBold"
+                                          VerticalAlignment="Center" />
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>

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

@@ -0,0 +1,11 @@
+<UserControl x:Class="Microsoft.PowerToys.Settings.UI.Controls.ShortcutTextControl"
+             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"
+             mc:Ignorable="d"
+             d:DesignHeight="300"
+             d:DesignWidth="400">
+    <TextBlock x:Name="ContentText" TextWrapping="Wrap" />
+</UserControl>

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

@@ -0,0 +1,60 @@
+// 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.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using System.Text.RegularExpressions;
+using Windows.UI.Text;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Documents;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class ShortcutTextControl : UserControl
+    {
+        public string Text
+        {
+            get => (string)GetValue(TextProperty);
+            set => SetValue(TextProperty, value);
+        }
+
+        public ShortcutTextControl()
+        {
+            this.InitializeComponent();
+        }
+
+        public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ShortcutVisualControl), new PropertyMetadata(default(string), (s, e) =>
+        {
+            var self = (ShortcutTextControl)s;
+            var parts = Regex.Split(e.NewValue.ToString(), @"({[\s\S]+?})").Where(l => !string.IsNullOrEmpty(l)).ToArray();
+
+            foreach (var seg in parts)
+            {
+                if (!string.IsNullOrWhiteSpace(seg))
+                {
+                    if (seg.Contains("{", StringComparison.InvariantCulture))
+                    {
+                        Run key = new Run()
+                        {
+                            Text = Regex.Replace(seg, @"[{}]", string.Empty),
+                            FontWeight = FontWeights.SemiBold,
+                        };
+                        self.ContentText.Inlines.Add(key);
+                    }
+                    else
+                    {
+                        Run description = new Run()
+                        {
+                            Text = seg,
+                            FontWeight = FontWeights.Normal,
+                        };
+                        self.ContentText.Inlines.Add(description);
+                    }
+                }
+            }
+        }));
+    }
+}

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

@@ -0,0 +1,15 @@
+<UserControl x:Class="Microsoft.PowerToys.Settings.UI.Controls.ShortcutVisualControl"
+             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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+             mc:Ignorable="d"
+             d:DesignHeight="300"
+             d:DesignWidth="400">
+
+    <controls:WrapPanel x:Name="contentPanel"
+                        Orientation="Horizontal"                      
+                        HorizontalSpacing="4" />
+</UserControl>

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

@@ -0,0 +1,62 @@
+// 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.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using System.Text.RegularExpressions;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class ShortcutVisualControl : UserControl
+    {
+        public ShortcutVisualControl()
+        {
+            InitializeComponent();
+        }
+
+        public string Text
+        {
+            get => (string)GetValue(TextProperty);
+            set => SetValue(TextProperty, value);
+        }
+
+        public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ShortcutVisualControl), new PropertyMetadata(default(string), (s, e) =>
+        {
+            var self = (ShortcutVisualControl)s;
+            var parts = Regex.Split(e.NewValue.ToString(), @"({[\s\S]+?})").Where(l => !string.IsNullOrEmpty(l)).ToArray();
+
+            foreach (var seg in parts)
+            {
+                if (!string.IsNullOrWhiteSpace(seg))
+                {
+                    if (seg.Contains("{", StringComparison.InvariantCulture))
+                    {
+                        KeyVisual k = new KeyVisual
+                        {
+                            Content = Regex.Replace(seg, @"[{}]", string.Empty),
+                            VerticalAlignment = VerticalAlignment.Center,
+                        };
+
+                        self.contentPanel.Children.Add(k);
+                    }
+                    else
+                    {
+                        TextBlock t = new TextBlock
+                        {
+                            Text = seg,
+                            TextWrapping = TextWrapping.Wrap,
+                            VerticalAlignment = VerticalAlignment.Top,
+                            Margin = new Thickness(0, 6, 0, 0),
+                        };
+
+                        self.contentPanel.Children.Add(t);
+                    }
+                }
+            }
+        }));
+    }
+}