[Settings] Make images clickable and fix issue with Power Preview settings image (#8710)

* Hopefully I have got this right

* Add a more descriptive Uid

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -876,4 +876,40 @@
   <data name="ColorPicker_ShowColorName.Content" xml:space="preserve">
     <value>Show color name</value>
   </data>
-</root>
+  <data name="ColorPicker_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_ColorPicker</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="FancyZones_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_FancyZones</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="GeneralPage_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/powertoys</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="ImageResizer_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_ImageResizer</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="FileExplorerPreview_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_FileExplorerAddOns</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="KeyboardManager_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_KeyboardManager</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="PowerRename_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_PowerRename</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="PowerToys_Run_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_PowerToysRun</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+  <data name="ShortcutGuide_ImageHyperlinkToDocs.NavigateUri" xml:space="preserve">
+    <value>https://aka.ms/PowerToysOverview_ShortcutGuide</value>
+    <comment>URL. Do not loc</comment>
+  </data>
+</root>

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

@@ -216,13 +216,15 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="ColorPicker_Image" Source="ms-appx:///Assets/Modules/ColorPicker.png" />
+                <HyperlinkButton x:Uid="ColorPicker_ImageHyperlinkToDocs">
+                    <Image x:Uid="ColorPicker_Image" Source="ms-appx:///Assets/Modules/ColorPicker.png" />
+                </HyperlinkButton>
             </Border>
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ColorPicker">
+                <HyperlinkButton x:Uid="ColorPicker_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">

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

@@ -328,14 +328,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="Fancyzones_Image" Source="ms-appx:///Assets/Modules/FancyZones.png" />
+                <HyperlinkButton x:Uid="FancyZones_ImageHyperlinkToDocs">
+                    <Image x:Uid="Fancyzones_Image" Source="ms-appx:///Assets/Modules/FancyZones.png" />
+                </HyperlinkButton>
             </Border>
 
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FancyZones">
+                <HyperlinkButton x:Uid="FancyZones_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">

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

@@ -170,14 +170,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="PowerToys_Icon" Source="ms-appx:///Assets/Modules/PT.png"/>
+                <HyperlinkButton x:Uid="GeneralPage_ImageHyperlinkToDocs">
+                    <Image x:Uid="PowerToys_Icon" Source="ms-appx:///Assets/Modules/PT.png"/>
+                </HyperlinkButton>
             </Border>
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
 
-                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/">
+                <HyperlinkButton x:Uid="GeneralPage_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="General_Repository"/>
                 </HyperlinkButton>
 

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

@@ -355,14 +355,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="ImageResizer_Image" Source="ms-appx:///Assets/Modules/ImageResizer.png" />
+                <HyperlinkButton x:Uid="ImageResizer_ImageHyperlinkToDocs">
+                    <Image x:Uid="ImageResizer_Image" Source="ms-appx:///Assets/Modules/ImageResizer.png" />
+                </HyperlinkButton>
             </Border>
 
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ImageResizer">
+                <HyperlinkButton x:Uid="ImageResizer_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">

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

@@ -357,14 +357,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="KeyboardManager_Image" Source="ms-appx:///Assets/Modules/KBM.png" />
+                <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 NavigateUri="https://aka.ms/PowerToysOverview_KeyboardManager">
+                <HyperlinkButton x:Uid="KeyboardManager_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">

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

@@ -193,14 +193,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="PowerToys_Run_Image" Source="ms-appx:///Assets/Modules/PowerLauncher.png" />
+                <HyperlinkButton x:Uid="PowerToys_Run_ImageHyperlinkToDocs">
+                    <Image x:Uid="PowerToys_Run_Image" Source="ms-appx:///Assets/Modules/PowerLauncher.png" />
+                </HyperlinkButton>
             </Border>
 
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerToysRun">
+                <HyperlinkButton x:Uid="PowerToys_Run_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">

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

@@ -110,14 +110,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="FileExplorerPreview_Image" Source="https://aka.ms/powerToysPowerPreviewSettingImage" />
+                <HyperlinkButton x:Uid="FileExplorerPreview_ImageHyperlinkToDocs">
+                    <Image x:Uid="FileExplorerPreview_Image" Source="ms-appx:///Assets/Modules/PowerPreview.png" />
+                </HyperlinkButton>
             </Border>
 
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FileExplorerAddOns">
+                <HyperlinkButton x:Uid="FileExplorerPreview_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">

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

@@ -122,14 +122,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="PowerRename_Image" Source="ms-appx:///Assets/Modules/PowerRename.png" />
+                <HyperlinkButton x:Uid="PowerRename_ImageHyperlinkToDocs">
+                    <Image x:Uid="PowerRename_Image" Source="ms-appx:///Assets/Modules/PowerRename.png" />
+                </HyperlinkButton>
             </Border>
 
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerRename">
+                <HyperlinkButton x:Uid="PowerRename_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">

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

@@ -129,14 +129,16 @@
                     HorizontalAlignment="Left"
                     Margin="{StaticResource SmallTopBottomMargin}"
                     RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="Shortcut_Guide_Image" Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
+                <HyperlinkButton x:Uid="ShortcutGuide_ImageHyperlinkToDocs">
+                    <Image x:Uid="Shortcut_Guide_Image" Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
+                </HyperlinkButton>
             </Border>
 
             <StackPanel x:Name="LinksPanel"
                         Margin="0,1,0,0"
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ShortcutGuide">
+                <HyperlinkButton x:Uid="ShortcutGuide_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="Module_overview" />
                 </HyperlinkButton>
                 <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">