Implementing Tapped on Images in MarkdownTextBlock

Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml.cs

@@ -520,7 +520,10 @@ private async void InfoAreaPivot_OnSelectionChanged(object sender, SelectionChan
         private async void DocumentationTextblock_OnLinkClicked(object sender, LinkClickedEventArgs e)
         {
             TrackingManager.TrackEvent("Link", e.Link);
-            await Launcher.LaunchUriAsync(new Uri(e.Link));
+            if (Uri.TryCreate(e.Link, UriKind.Absolute, out Uri result))
+            {
+                await Launcher.LaunchUriAsync(new Uri(e.Link));
+            }
         }
 
         private async void DocumentationTextblock_ImageResolving(object sender, ImageResolvingEventArgs e)

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/LinkClickedEventArgs.cs

@@ -19,14 +19,20 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     /// </summary>
     public class LinkClickedEventArgs : EventArgs
     {
-        internal LinkClickedEventArgs(string link)
+        internal LinkClickedEventArgs(string link, LinkReturnType type)
         {
             Link = link;
+            Type = type;
         }
 
         /// <summary>
         /// Gets the link that was tapped.
         /// </summary>
         public string Link { get; }
+
+        /// <summary>
+        /// Gets the type of link that was tapped.(Image/Link)
+        /// </summary>
+        public LinkReturnType Type { get; }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/LinkReturnType.cs

@@ -0,0 +1,30 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// Return type for Clicked Event
+    /// </summary>
+    public enum LinkReturnType
+    {
+        /// <summary>
+        /// Returns when Link Clicked is Hyperlink
+        /// </summary>
+        Hyperlink,
+
+        /// <summary>
+        /// Returns when Link Clicked is Image
+        /// </summary>
+        Image
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Events.cs

@@ -15,6 +15,7 @@
 using System.Reflection;
 using Windows.UI.Core;
 using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Documents;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
@@ -46,29 +47,17 @@ private void OnPropertyChanged(DependencyObject d, DependencyProperty prop)
         /// <summary>
         /// Fired when a user taps one of the link elements
         /// </summary>
-        private async void Hyperlink_Click(Hyperlink sender, HyperlinkClickEventArgs args)
+        private void Hyperlink_Click(Hyperlink sender, HyperlinkClickEventArgs args)
         {
-            // Links that are nested within superscript elements cause the Click event to fire multiple times.
-            // e.g. this markdown "[^bot](http://www.reddit.com/r/youtubefactsbot/wiki/index)"
-            // Therefore we detect and ignore multiple clicks.
-            if (multiClickDetectionTriggered)
-            {
-                return;
-            }
-
-            multiClickDetectionTriggered = true;
-            await Dispatcher.RunAsync(CoreDispatcherPriority.High, () => multiClickDetectionTriggered = false);
-
-            // Get the hyperlink URL.
-            var url = (string)sender.GetValue(HyperlinkUrlProperty);
-            if (url == null)
-            {
-                return;
-            }
+            LinkHandled((string)sender.GetValue(HyperlinkUrlProperty), LinkReturnType.Hyperlink);
+        }
 
-            // Fire off the event.
-            var eventArgs = new LinkClickedEventArgs(url);
-            LinkClicked?.Invoke(this, eventArgs);
+        /// <summary>
+        /// Fired when a user taps one of the image elements
+        /// </summary>
+        private void NewImagelink_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
+        {
+            LinkHandled((string)(sender as Image).GetValue(HyperlinkUrlProperty), LinkReturnType.Image);
         }
 
         /// <summary>

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Methods.cs

@@ -17,7 +17,9 @@
 using ColorCode;
 using Microsoft.Toolkit.Parsers.Markdown;
 using Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Render;
+using Windows.UI.Core;
 using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Documents;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Media.Imaging;
@@ -164,9 +166,16 @@ private void RenderMarkdown()
         private void UnhookListeners()
         {
             // Clear any hyper link events if we have any
-            foreach (Hyperlink link in _listeningHyperlinks)
+            foreach (object link in _listeningHyperlinks)
             {
-                link.Click -= Hyperlink_Click;
+                if (link is Hyperlink hyperlink)
+                {
+                    hyperlink.Click -= Hyperlink_Click;
+                }
+                else if (link is Image image)
+                {
+                    image.Tapped -= NewImagelink_Tapped;
+                }
             }
 
             // Clear everything that exists.
@@ -188,6 +197,21 @@ public void RegisterNewHyperLink(Hyperlink newHyperlink, string linkUrl)
             _listeningHyperlinks.Add(newHyperlink);
         }
 
+        /// <summary>
+        /// Called when the render has a link we need to listen to.
+        /// </summary>
+        public void RegisterNewHyperLink(Image newImagelink, string linkUrl)
+        {
+            // Setup a listener for clicks.
+            newImagelink.Tapped += NewImagelink_Tapped;
+
+            // Associate the URL with the hyperlink.
+            newImagelink.SetValue(HyperlinkUrlProperty, linkUrl);
+
+            // Add it to our list
+            _listeningHyperlinks.Add(newImagelink);
+        }
+
         /// <summary>
         /// Called when the renderer needs to display a image.
         /// </summary>
@@ -277,5 +301,32 @@ bool ICodeBlockResolver.ParseSyntax(InlineCollection inlineCollection, string te
                 return false;
             }
         }
+
+        /// <summary>
+        /// Called when a link needs to be handled
+        /// </summary>
+        internal async void LinkHandled(string url, LinkReturnType type)
+        {
+            // Links that are nested within superscript elements cause the Click event to fire multiple times.
+            // e.g. this markdown "[^bot](http://www.reddit.com/r/youtubefactsbot/wiki/index)"
+            // Therefore we detect and ignore multiple clicks.
+            if (multiClickDetectionTriggered)
+            {
+                return;
+            }
+
+            multiClickDetectionTriggered = true;
+            await Dispatcher.RunAsync(CoreDispatcherPriority.High, () => multiClickDetectionTriggered = false);
+
+            // Get the hyperlink URL.
+            if (url == null)
+            {
+                return;
+            }
+
+            // Fire off the event.
+            var eventArgs = new LinkClickedEventArgs(url, type);
+            LinkClicked?.Invoke(this, eventArgs);
+        }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Properties.cs

@@ -625,7 +625,7 @@ public string UriPrefix
         /// <summary>
         /// Holds a list of hyperlinks we are listening to.
         /// </summary>
-        private readonly List<Hyperlink> _listeningHyperlinks = new List<Hyperlink>();
+        private readonly List<object> _listeningHyperlinks = new List<object>();
 
         /// <summary>
         /// The root element for our rendering.

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/ILinkRegister.cs

@@ -10,6 +10,7 @@
 // THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
 // ******************************************************************
 
+using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Documents;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Render
@@ -25,5 +26,12 @@ public interface ILinkRegister
         /// <param name="newHyperlink">Hyperlink to Register.</param>
         /// <param name="linkUrl">Url to Register.</param>
         void RegisterNewHyperLink(Hyperlink newHyperlink, string linkUrl);
+
+        /// <summary>
+        /// Registers a Hyperlink with a LinkUrl.
+        /// </summary>
+        /// <param name="newImagelink">ImageLink to Register.</param>
+        /// <param name="linkUrl">Url to Register.</param>
+        void RegisterNewHyperLink(Image newImagelink, string linkUrl);
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs

@@ -252,6 +252,8 @@ protected override async void RenderImage(ImageInline element, IRenderContext co
             var image = new Image();
             var imageContainer = new InlineUIContainer() { Child = image };
 
+            LinkRegister.RegisterNewHyperLink(image, element.Url);
+
             image.Source = resolvedImage;
             image.HorizontalAlignment = HorizontalAlignment.Left;
             image.VerticalAlignment = VerticalAlignment.Top;

docs/controls/MarkdownTextBlock.md

@@ -28,6 +28,7 @@ Here are some limitations you may encounter:
 
 - Images cannot be embedded inside a hyperlink
 - All images are stretched with the same stretch value (defined by ImageStretch property)
+- Relative Links & Relative Images needs to be handled manually using `LinkClicked` event.
 
 ## Example Image
 Note: scrolling is smooth, the gif below is not.
@@ -95,7 +96,7 @@ The MarkdownTextBlock control is highly customizable to blend with any theme. Cu
 
 ### LinkClicked
 
-Use this event to handle clicking on links for Markdown, by default the MarkdownTextBlock does not handle Clicking on Links.
+Use this event to handle clicking on links or images for Markdown, by default the MarkdownTextBlock does not handle Clicking on Links or Images.
 
 ```c#
 private async void MarkdownText_LinkClicked(object sender, LinkClickedEventArgs e)
@@ -107,6 +108,9 @@ private async void MarkdownText_LinkClicked(object sender, LinkClickedEventArgs
 }
 ```
 
+> [!NOTE]
+The **LinkClicked** event will be raised when either a Hyperlink or an Image is Tapped and will return element Type in **e.LinkType** on **LinkClickedEventArgs**.
+
 
 ### ImageResolving