[Fix]Crashes in model doc page: WinUI element hierarchy and UI thread reentrancy violations

AIDevGallery/Controls/Markdown/TextElements/MyHyperlink.cs

@@ -1,9 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-
 using HtmlAgilityPack;
 using Markdig.Syntax.Inlines;
 using Microsoft.UI.Xaml.Documents;
+using System;
 using Windows.Foundation;
 
 namespace CommunityToolkit.Labs.WinUI.MarkdownTextBlock.TextElements;
@@ -52,15 +52,19 @@ public MyHyperlink(HtmlNode htmlNode, string? baseUrl)
 
     public void AddChild(IAddChild child)
     {
-        if (child.TextElement is Microsoft.UI.Xaml.Documents.Inline inlineChild)
+        // Hyperlink cannot contain InlineUIContainer - this is a WinUI limitation
+        if (child.TextElement is not Microsoft.UI.Xaml.Documents.Inline inlineChild || inlineChild is InlineUIContainer)
+        {
+            return;
+        }
+
+        try
+        {
+            _hyperlink.Inlines.Add(inlineChild);
+        }
+        catch (Exception ex)
         {
-            try
-            {
-                _hyperlink.Inlines.Add(inlineChild);
-            }
-            catch
-            {
-            }
+            System.Diagnostics.Debug.WriteLine($"Exception when adding {inlineChild.GetType().Name}: {ex.GetType().Name} - {ex.Message}");
         }
     }
 }

AIDevGallery/Pages/Models/ModelPage.xaml

@@ -73,33 +73,28 @@
         </StackPanel>
 
 
-        <ScrollViewer
-            x:Name="RootScroller"
-            Grid.Row="2"
+        <Grid
+            x:Name="ContentGrid"
+            Grid.Row="1"
             Grid.ColumnSpan="2"
-            Margin="-16,8,-16,-16"
-            Padding="16,0,16,16"
-            VerticalAlignment="Stretch"
-            IsVerticalScrollChainingEnabled="True">
-            <Grid
-                x:Name="ContentGrid"
-                ColumnSpacing="16"
-                RowSpacing="16">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition x:Name="SideColumn" Width="380" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
-                <controls:Card
-                    x:Name="DocumentationCard"
-                    Title="Documentation"
-                    Grid.RowSpan="3"
-                    Icon="{ui:FontIcon Glyph=&#xE7C3;,
-                                       FontSize=16}">
+            Margin="0,8,0,0"
+            ColumnSpacing="16"
+            RowSpacing="16">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition x:Name="SideColumn" Width="380" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <controls:Card
+                x:Name="DocumentationCard"
+                Title="Documentation"
+                Grid.RowSpan="3"
+                Icon="{ui:FontIcon Glyph=&#xE7C3;,
+                                   FontSize=16}">
                     <controls:Card.TitleContent>
                         <HyperlinkButton
                             Visibility="{x:Bind ModelFamily.DocsUrl, Converter={StaticResource StringVisibilityConverter}}"
@@ -208,7 +203,6 @@
                     </ItemsView>
                 </controls:Card>
             </Grid>
-        </ScrollViewer>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
@@ -228,7 +222,6 @@
                         <Setter Target="ContentGrid.ColumnSpacing" Value="0" />
                         <Setter Target="DocumentationCard.(Grid.Row)" Value="2" />
                         <Setter Target="RootGrid.Padding" Value="16,12,16,12" />
-                        <Setter Target="RootScroller.VerticalScrollBarVisibility" Value="Auto" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>

AIDevGallery/Pages/Models/ModelPage.xaml.cs

@@ -249,28 +249,38 @@
             (AIToolkitAction action, ModelDetails modelDetails) = ((AIToolkitAction, ModelDetails))actionFlyoutItem.Tag;
 
             string toolkitDeeplink = modelDetails.CreateAiToolkitDeeplink(action);
-            bool wasDeeplinkSuccesful = true;
-            try
+            _ = Task.Run(() =>
             {
-                Process.Start(new ProcessStartInfo()
+                bool wasDeeplinkSuccesful = true;
+                try
                 {
-                    FileName = toolkitDeeplink,
-                    UseShellExecute = true
-                });
-            }
-            catch
-            {
-                Process.Start(new ProcessStartInfo()
+                    Process.Start(new ProcessStartInfo()
+                    {
+                        FileName = toolkitDeeplink,
+                        UseShellExecute = true
+                    });
+                }
+                catch
                 {
-                    FileName = "https://learn.microsoft.com/en-us/windows/ai/toolkit/",
-                    UseShellExecute = true
-                });
-                wasDeeplinkSuccesful = false;
-            }
-            finally
-            {
-                AIToolkitActionClickedEvent.Log(AIToolkitHelper.AIToolkitActionInfos[action].QueryName, modelDetails.Name, wasDeeplinkSuccesful);
-            }
+                    try
+                    {
+                        Process.Start(new ProcessStartInfo()
+                        {
+                            FileName = "https://learn.microsoft.com/en-us/windows/ai/toolkit/",
+                            UseShellExecute = true
+                        });
+                    }
+                    catch
+                    {
+                        // Silently fail if fallback also fails
+                    }
+                    wasDeeplinkSuccesful = false;
+                }
+                finally
+                {
+                    AIToolkitActionClickedEvent.Log(AIToolkitHelper.AIToolkitActionInfos[action].QueryName, modelDetails.Name, wasDeeplinkSuccesful);
+                }
+            });
         }
     }
 
@@ -312,22 +322,28 @@
             return;
         }
 
-        try
+        _ = Task.Run(() =>
         {
-            var psi = new ProcessStartInfo
+            try
             {
-                FileName = uri.AbsoluteUri,
-                UseShellExecute = true
-            };
-            Process.Start(psi);
-        }
-        catch (Exception ex) when (ex is Win32Exception
-                                || ex is InvalidOperationException
-                                || ex is PlatformNotSupportedException)
-        {
-            ModelDetailsLinkClickedEvent.Log($"OpenFailed: {uri} | {ex.GetType().Name}: {ex.Message}");
-            ShowDialog(message: errorMessage);
-        }
+                var psi = new ProcessStartInfo
+                {
+                    FileName = uri.AbsoluteUri,
+                    UseShellExecute = true
+                };
+                Process.Start(psi);
+            }
+            catch (Exception ex) when (ex is Win32Exception
+                                    || ex is InvalidOperationException
+                                    || ex is PlatformNotSupportedException)
+            {
+                ModelDetailsLinkClickedEvent.Log($"OpenFailed: {uri} | {ex.GetType().Name}: {ex.Message}");
+                DispatcherQueue.TryEnqueue(() =>
+                {
+                    ShowDialog(message: errorMessage);
+                });
+            }
+        });
     }
 
     private async void ShowDialog(string? message)