[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/OOBE/Views/OobeColorPicker.xaml

@@ -6,7 +6,8 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Grid>
         <Grid.RowDefinitions>
@@ -38,16 +39,14 @@
                 </HyperlinkButton>
 
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           Style="{StaticResource OobeSubtitleStyle}"/>
-                
-            <TextBlock x:Uid="Oobe_ColorPicker_HowToUse"
-                       TextWrapping="Wrap"/>
-            
-            <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <controls:ShortcutTextControl x:Uid="Oobe_ColorPicker_HowToUse" />
+              
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
                        Style="{StaticResource OobeSubtitleStyle}"/>
-                
-            <TextBlock x:Uid="Oobe_ColorPicker_TipsAndTricks"
-                       TextWrapping="Wrap" />
+
+                <controls:ShortcutTextControl x:Uid="Oobe_ColorPicker_TipsAndTricks" />
             
             <StackPanel Orientation="Horizontal"
                         Spacing="4"

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

@@ -5,7 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Grid>
@@ -38,13 +39,14 @@
                 
                 <TextBlock x:Uid="Oobe_HowToUse"
                            Style="{StaticResource OobeSubtitleStyle}" />
-                <TextBlock x:Uid="Oobe_FancyZones_HowToUse"
-                           TextWrapping="Wrap" />
+
+
+                <controls:ShortcutTextControl x:Uid="Oobe_FancyZones_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
                            Style="{StaticResource OobeSubtitleStyle}" />
-                <TextBlock x:Uid="Oobe_FancyZones_TipsAndTricks"
-                           TextWrapping="Wrap" />
+
+                <controls:ShortcutTextControl x:Uid="Oobe_FancyZones_TipsAndTricks" />
 
                 <StackPanel Orientation="Horizontal"
                             Spacing="4"

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

@@ -4,6 +4,7 @@
       xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
@@ -40,9 +41,8 @@
                 <TextBlock x:Uid="Oobe_HowToEnable"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_FileExplorer_HowToEnable"
-                           TextWrapping="Wrap" />
-
+                <controls:ShortcutTextControl x:Uid="Oobe_FileExplorer_HowToEnable" />
+                
                 <StackPanel Orientation="Horizontal"
                             Spacing="4"
                             Margin="0,32,0,0">

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

@@ -5,7 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Grid>
@@ -41,14 +42,12 @@
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_ImageResizer_HowToLaunch"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_ImageResizer_HowToLaunch" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_ImageResizer_TipsAndTricks"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_ImageResizer_TipsAndTricks" />
 
                 <StackPanel Orientation="Horizontal"
                             Spacing="4"

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

@@ -4,6 +4,7 @@
       xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
@@ -40,14 +41,12 @@
                 <TextBlock x:Uid="Oobe_HowToCreateMappings"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_KBM_HowToCreateMappings"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_KBM_HowToCreateMappings" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_KBM_TipsAndTricks"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_KBM_TipsAndTricks" />
 
                 <StackPanel Orientation="Horizontal"
                             Spacing="4"

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

@@ -4,6 +4,7 @@
       xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
@@ -41,8 +42,7 @@
                 <TextBlock x:Uid="Oobe_HowToUse"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_PowerRename_HowToUse"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_PowerRename_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
                            Style="{StaticResource OobeSubtitleStyle}" />

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

@@ -5,7 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Grid>
@@ -42,13 +43,12 @@
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_Run_HowToLaunch" />
-
+                <controls:ShortcutTextControl x:Uid="Oobe_Run_HowToLaunch" />
+                
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_Run_TipsAndTricks"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_Run_TipsAndTricks" />
 
                 <StackPanel Orientation="Horizontal"
                             Margin="0,32,0,0"

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

@@ -5,7 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Grid>
@@ -42,9 +43,8 @@
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_ShortcutGuide_HowToLaunch"
-                           TextWrapping="Wrap" />
-
+                <controls:ShortcutTextControl x:Uid="Oobe_ShortcutGuide_HowToLaunch" />
+                
                 <StackPanel Orientation="Horizontal"
                             Margin="0,32,0,0"
                             Spacing="8">

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

@@ -5,7 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+      mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Grid>
@@ -41,8 +42,7 @@
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{StaticResource OobeSubtitleStyle}" />
 
-                <TextBlock x:Uid="Oobe_VideoConference_HowToLaunch"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_VideoConference_HowToLaunch" />
 
                 <StackPanel Orientation="Horizontal"
                             Margin="0,32,0,0"