From 77635eeadbd9055473aad4162fde8356081b9b58 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Thu, 12 Dec 2024 22:05:35 +0100
Subject: [PATCH] [UX] Pageheader improvements (#1679)

![image](https://github.com/user-attachments/assets/ee4b7050-934a-468a-a495-b48e08441da8)

This PR moves the `Namespace` and `Inheritance` information in a flyout.

Closes #1678

---------

Co-authored-by: Jay <65828559+Jay-o-Way@users.noreply.github.com>
---
 WinUIGallery/Controls/PageHeader.xaml    | 218 +++++++++++++++--------
 WinUIGallery/Controls/PageHeader.xaml.cs |   8 +
 WinUIGallery/ItemPage.xaml               |  85 +++------
 3 files changed, 173 insertions(+), 138 deletions(-)

diff --git a/WinUIGallery/Controls/PageHeader.xaml b/WinUIGallery/Controls/PageHeader.xaml
index 8205084a5..666e08d54 100644
--- a/WinUIGallery/Controls/PageHeader.xaml
+++ b/WinUIGallery/Controls/PageHeader.xaml
@@ -10,6 +10,7 @@
     xmlns:data="using:WinUIGallery.Data"
     xmlns:local="using:WinUIGallery.DesktopWap.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Loaded="UserControl_Loaded"
     mc:Ignorable="d">
 
     <UserControl.Resources>
@@ -17,31 +18,81 @@
             x:Name="collectionConverter"
             EmptyValue="Collapsed"
             NotEmptyValue="Visible" />
+        <Style
+            x:Key="CustomFlyoutPresenterStyle"
+            BasedOn="{StaticResource DefaultFlyoutPresenterStyle}"
+            TargetType="FlyoutPresenter">
+            <Setter Property="MinWidth" Value="420" />
+            <Setter Property="MaxWidth" Value="800" />
+        </Style>
     </UserControl.Resources>
     <Grid x:Name="headerGrid">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <TextBlock
-            Grid.Row="0"
-            AutomationProperties.AutomationId="PageHeader"
-            Style="{StaticResource TitleTextBlockStyle}"
-            Text="{x:Bind Item.Title}"
-            TextTrimming="CharacterEllipsis"
-            TextWrapping="NoWrap" />
-        <TextBlock
-            x:Name="NamespaceTextBlock"
-            Grid.Row="1"
-            Margin="0,4,0,0"
-            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-            IsTextSelectionEnabled="True"
-            Style="{StaticResource CaptionTextBlockStyle}"
-            Text="{x:Bind Item.ApiNamespace}"
-            Visibility="{x:Bind Item.ApiNamespace, Converter={StaticResource emptyStringToVisibilityConverter}}" />
-        <Grid Grid.Row="2" Margin="0,12,0,12">
+        <StackPanel Orientation="Horizontal" Spacing="4">
+            <TextBlock
+                AutomationProperties.AutomationId="PageHeader"
+                Style="{StaticResource TitleTextBlockStyle}"
+                Text="{x:Bind Item.Title}"
+                TextTrimming="CharacterEllipsis"
+                TextWrapping="NoWrap" />
+            <Button
+                x:Name="APIDetailsBtn"
+                Margin="0,0,0,3"
+                Padding="4"
+                VerticalAlignment="Bottom"
+                AutomationProperties.Name="API details"
+                Style="{StaticResource SubtleButtonStyle}"
+                ToolTipService.ToolTip="API namespace and inheritance">
+                <FontIcon
+                    FontSize="14"
+                    Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                    Glyph="&#xE946;" />
+                <Button.Flyout>
+                    <Flyout FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenterStyle}" Placement="Bottom">
+                        <StackPanel x:Name="APIPanel" Spacing="16">
+                            <StackPanel
+                                x:Name="APISourcePanel"
+                                Spacing="8"
+                                Visibility="{x:Bind Item.ApiNamespace, Converter={StaticResource emptyStringToVisibilityConverter}}">
+                                <TextBlock
+                                    VerticalAlignment="Center"
+                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                    Style="{StaticResource CaptionTextBlockStyle}"
+                                    Text="Namespace" />
+                                <TextBlock
+                                    VerticalAlignment="Center"
+                                    FontFamily="Consolas"
+                                    IsTextSelectionEnabled="True"
+                                    Style="{StaticResource CaptionTextBlockStyle}"
+                                    Text="{x:Bind Item.ApiNamespace}" />
+                            </StackPanel>
+                            <MenuFlyoutSeparator Margin="-12" />
+                            <StackPanel x:Name="InheritanceSourcePanel" Visibility="{x:Bind Item.BaseClasses, Converter={StaticResource collectionConverter}}">
+                                <TextBlock
+                                    VerticalAlignment="Center"
+                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                    Style="{StaticResource CaptionTextBlockStyle}"
+                                    Text="Inheritance" />
+                                <BreadcrumbBar IsHitTestVisible="False" ItemsSource="{x:Bind Item.BaseClasses}">
+                                    <BreadcrumbBar.ItemTemplate>
+                                        <DataTemplate x:DataType="x:String">
+                                            <TextBlock
+                                                FontFamily="Consolas"
+                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                Text="{x:Bind}" />
+                                        </DataTemplate>
+                                    </BreadcrumbBar.ItemTemplate>
+                                </BreadcrumbBar>
+                            </StackPanel>
+                        </StackPanel>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
+        </StackPanel>
+        <Grid Grid.Row="1" Margin="0,12,0,12">
             <StackPanel Orientation="Horizontal" Spacing="4">
                 <DropDownButton
                     AutomationProperties.Name="Documentation"
@@ -67,9 +118,11 @@
                                 </ItemsControl.ItemsPanel>
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="data:ControlInfoDocLink">
-                                        <HyperlinkButton HorizontalAlignment="Stretch"
-                                                         HorizontalContentAlignment="Left"
-                                                         NavigateUri="{Binding Uri}" ToolTipService.ToolTip="{Binding Uri}">
+                                        <HyperlinkButton
+                                            HorizontalAlignment="Stretch"
+                                            HorizontalContentAlignment="Left"
+                                            NavigateUri="{Binding Uri}"
+                                            ToolTipService.ToolTip="{Binding Uri}">
                                             <TextBlock Text="{x:Bind Title}" />
                                         </HyperlinkButton>
                                     </DataTemplate>
@@ -78,19 +131,19 @@
                         </Flyout>
                     </DropDownButton.Flyout>
                 </DropDownButton>
-                <DropDownButton AutomationProperties.Name="Source code"
-                                ToolTipService.ToolTip="Source code of this sample page">
+                <DropDownButton AutomationProperties.Name="Source code" ToolTipService.ToolTip="Source code of this sample page">
                     <DropDownButton.Content>
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <PathIcon Margin="-3,-3,-16,-3"
-                                      VerticalAlignment="Center"
-                                      Data="{StaticResource GitHubIconPath}">
+                        <StackPanel Orientation="Horizontal" Spacing="8">
+                            <PathIcon
+                                Margin="-3,-3,-16,-3"
+                                VerticalAlignment="Center"
+                                Data="{StaticResource GitHubIconPath}">
                                 <PathIcon.RenderTransform>
-                                    <CompositeTransform ScaleX="0.65"
-                                                        ScaleY="0.65"
-                                                        TranslateX="-5"
-                                                        TranslateY="5" />
+                                    <CompositeTransform
+                                        ScaleX="0.65"
+                                        ScaleY="0.65"
+                                        TranslateX="-5"
+                                        TranslateY="5" />
                                 </PathIcon.RenderTransform>
                             </PathIcon>
                             <TextBlock Text="Source" />
@@ -98,65 +151,72 @@
                     </DropDownButton.Content>
                     <DropDownButton.Flyout>
                         <Flyout Placement="Bottom">
-                            <StackPanel x:Name="SourcePanel"
-                                        Margin="0,-8,0,-12">
-                                <StackPanel x:Name="ControlSourcePanel"
-                                            Margin="0,0,0,4">
-                                    <StackPanel Orientation="Horizontal"
-                                                Spacing="8">
-                                        <TextBlock VerticalAlignment="Center"
-                                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                   Style="{StaticResource CaptionTextBlockStyle}"
-                                                   Text="Control source code" />
-                                        <Button Padding="6,5,6,6"
-                                                Style="{ThemeResource SubtleButtonStyle}"
-                                                ToolTipService.ToolTip="Source code of this control in the WinUI repository. For some controls only the XAML file is available">
-                                            <FontIcon VerticalAlignment="Center"
-                                                      FontSize="14"
-                                                      Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
-                                                      Glyph="&#xE946;" />
+                            <StackPanel x:Name="SourcePanel" Margin="0,-8,0,-12">
+                                <StackPanel x:Name="ControlSourcePanel" Margin="0,0,0,4">
+                                    <StackPanel Orientation="Horizontal" Spacing="8">
+                                        <TextBlock
+                                            VerticalAlignment="Center"
+                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="Control source code" />
+                                        <Button
+                                            Padding="6,5,6,6"
+                                            Style="{ThemeResource SubtleButtonStyle}"
+                                            ToolTipService.ToolTip="Source code of this control in the WinUI repository. For some controls only the XAML file is available">
+                                            <FontIcon
+                                                VerticalAlignment="Center"
+                                                FontSize="14"
+                                                Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                                Glyph="&#xE946;" />
                                         </Button>
                                     </StackPanel>
-                                    <HyperlinkButton x:Name="ControlSourceLink"
-                                                     HorizontalAlignment="Stretch"
-                                                     HorizontalContentAlignment="Left"
-                                                     Margin="-12,4,-12,0"
-                                                     ToolTipService.ToolTip="{x:Bind ControlSourceLink.NavigateUri, Mode=OneWay}">
+                                    <HyperlinkButton
+                                        x:Name="ControlSourceLink"
+                                        Margin="-12,4,-12,0"
+                                        HorizontalAlignment="Stretch"
+                                        HorizontalContentAlignment="Left"
+                                        ToolTipService.ToolTip="{x:Bind ControlSourceLink.NavigateUri, Mode=OneWay}">
                                         <TextBlock Text="{x:Bind Item.Title}" />
                                     </HyperlinkButton>
                                 </StackPanel>
 
                                 <MenuFlyoutSeparator Margin="-12" />
 
-                                <StackPanel Orientation="Horizontal"
-                                            Spacing="8"
-                                            Margin="0,8,0,0">
-                                    <TextBlock VerticalAlignment="Center"
-                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                               Style="{StaticResource CaptionTextBlockStyle}"
-                                               Text="Sample page source code" />
-                                    <Button Padding="6,5,6,6"
-                                            Style="{ThemeResource SubtleButtonStyle}"
-                                            ToolTipService.ToolTip="Source code of this sample page in the WinUI Gallery repository">
-                                        <FontIcon VerticalAlignment="Center"
-                                                  FontSize="14"
-                                                  Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
-                                                  Glyph="&#xE946;" />
+                                <StackPanel
+                                    Margin="0,8,0,0"
+                                    Orientation="Horizontal"
+                                    Spacing="8">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                        Style="{StaticResource CaptionTextBlockStyle}"
+                                        Text="Sample page source code" />
+                                    <Button
+                                        Padding="6,5,6,6"
+                                        Style="{ThemeResource SubtleButtonStyle}"
+                                        ToolTipService.ToolTip="Source code of this sample page in the WinUI Gallery repository">
+                                        <FontIcon
+                                            VerticalAlignment="Center"
+                                            FontSize="14"
+                                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                            Glyph="&#xE946;" />
                                     </Button>
 
                                 </StackPanel>
-                                <HyperlinkButton x:Name="PageMarkupGitHubLink"
-                                                 HorizontalAlignment="Stretch"
-                                                 HorizontalContentAlignment="Left"
-                                                 Margin="-12,4,-12,0"
-                                                 ToolTipService.ToolTip="{x:Bind PageMarkupGitHubLink.NavigateUri, Mode=OneWay}">
+                                <HyperlinkButton
+                                    x:Name="PageMarkupGitHubLink"
+                                    Margin="-12,4,-12,0"
+                                    HorizontalAlignment="Stretch"
+                                    HorizontalContentAlignment="Left"
+                                    ToolTipService.ToolTip="{x:Bind PageMarkupGitHubLink.NavigateUri, Mode=OneWay}">
                                     <TextBlock Text="XAML" />
                                 </HyperlinkButton>
-                                <HyperlinkButton x:Name="PageCodeGitHubLink"
-                                                 HorizontalAlignment="Stretch"
-                                                 HorizontalContentAlignment="Left"
-                                                 Margin="-12,4,-12,0"
-                                                 ToolTipService.ToolTip="{x:Bind PageCodeGitHubLink.NavigateUri, Mode=OneWay}">
+                                <HyperlinkButton
+                                    x:Name="PageCodeGitHubLink"
+                                    Margin="-12,4,-12,0"
+                                    HorizontalAlignment="Stretch"
+                                    HorizontalContentAlignment="Left"
+                                    ToolTipService.ToolTip="{x:Bind PageCodeGitHubLink.NavigateUri, Mode=OneWay}">
                                     <TextBlock Text="C#" />
                                 </HyperlinkButton>
                             </StackPanel>
diff --git a/WinUIGallery/Controls/PageHeader.xaml.cs b/WinUIGallery/Controls/PageHeader.xaml.cs
index 9543a56e0..b1d4478e2 100644
--- a/WinUIGallery/Controls/PageHeader.xaml.cs
+++ b/WinUIGallery/Controls/PageHeader.xaml.cs
@@ -91,5 +91,13 @@ public async void OnFeedBackButtonClick(object sender, RoutedEventArgs e)
         {
              await Windows.System.Launcher.LaunchUriAsync(new Uri("https://github.com/microsoft/WinUI-Gallery/issues/new/choose"));
         }
+
+        private void UserControl_Loaded(object sender, RoutedEventArgs e)
+        {
+            if (Item == null || (string.IsNullOrEmpty(Item.ApiNamespace) && Item.BaseClasses == null))
+            {
+                APIDetailsBtn.Visibility = Visibility.Collapsed;
+            }
+        }
     }
 }
diff --git a/WinUIGallery/ItemPage.xaml b/WinUIGallery/ItemPage.xaml
index f1bfc4f64..c172ab707 100644
--- a/WinUIGallery/ItemPage.xaml
+++ b/WinUIGallery/ItemPage.xaml
@@ -34,6 +34,32 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
+        <controls:PageHeader
+            x:Name="pageHeader"
+            Margin="36,24,36,0"
+            Item="{x:Bind Item}" />
+
+        <!--  Content Region  -->
+        <ScrollViewer
+            x:Name="svPanel"
+            Grid.Row="1"
+            VerticalScrollBarVisibility="Auto"
+            VerticalScrollMode="Auto">
+            <Grid x:Name="contentRoot" Padding="36,0,36,36">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="*" />
+                </Grid.RowDefinitions>
+                <TextBlock
+                    x:Name="descriptionText"
+                    Grid.ColumnSpan="2"
+                    Margin="0,4,24,0"
+                    Style="{ThemeResource BodyTextBlockStyle}"
+                    Text="{x:Bind Item.Description}"
+                    Visibility="{x:Bind Item.Description, Converter={StaticResource stringVisibilityConverter}}" />
+                <Frame x:Name="contentFrame" Grid.Row="2" />
+            </Grid>
+        </ScrollViewer>
 
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup>
@@ -62,64 +88,5 @@
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
-        <controls:PageHeader
-            x:Name="pageHeader"
-            Margin="36,24,36,0"
-            Item="{x:Bind Item}" />
-
-        <!--  Content Region  -->
-        <ScrollViewer
-            x:Name="svPanel"
-            Grid.Row="1"
-            VerticalScrollBarVisibility="Auto"
-            VerticalScrollMode="Auto">
-            <Grid x:Name="contentRoot" Padding="36,0,36,36">
-
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
-
-                <TextBlock
-                    x:Name="descriptionText"
-                    Grid.ColumnSpan="2"
-                    Margin="0,4,24,0"
-                    Style="{ThemeResource BodyTextBlockStyle}"
-                    Text="{x:Bind Item.Description}"
-                    Visibility="{x:Bind Item.Description, Converter={StaticResource stringVisibilityConverter}}" />
-
-                <Grid
-                    Grid.Row="1"
-                    ColumnSpacing="8"
-                    Margin="0,8,0,0"
-                    Visibility="{x:Bind Item.BaseClasses, Converter={StaticResource collectionConverter}}">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto" />
-                        <ColumnDefinition Width="*" />
-                    </Grid.ColumnDefinitions>
-                    <TextBlock
-                        Grid.Column="0"
-                        Style="{ThemeResource BodyStrongTextBlockStyle}"
-                        VerticalAlignment="Bottom"
-                        Text="Inheritance" />
-                    <BreadcrumbBar
-                        VerticalAlignment="Bottom"
-                        Grid.Column="1"
-                        IsHitTestVisible="False"
-                        ItemsSource="{x:Bind Item.BaseClasses}">
-                        <BreadcrumbBar.ItemTemplate>
-                            <DataTemplate x:DataType="x:String">
-                                <TextBlock
-                                    Style="{StaticResource CaptionTextBlockStyle}"
-                                    Text="{x:Bind}" />
-                            </DataTemplate>
-                        </BreadcrumbBar.ItemTemplate>
-                    </BreadcrumbBar>
-                </Grid>
-
-                <Frame x:Name="contentFrame" Grid.Row="2" />
-            </Grid>
-        </ScrollViewer>
     </Grid>
 </Page>