Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UX] Pageheader improvements #1679

Merged
merged 9 commits into from
Dec 12, 2024
Merged

[UX] Pageheader improvements #1679

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1c8e88f
Add button
niels9001 Dec 6, 2024
eab093a
Update PageHeader.xaml
niels9001 Dec 6, 2024
ecbe1a7
Alignment fix
niels9001 Dec 6, 2024
fb46811
Hide button when there's no data
niels9001 Dec 6, 2024
9f4d103
Address feedback
niels9001 Dec 6, 2024
f31a21f
Update WinUIGallery/Controls/PageHeader.xaml
niels9001 Dec 7, 2024
8532ade
Margin tweak
niels9001 Dec 8, 2024
eb5d0cd
Update PageHeader.xaml
niels9001 Dec 12, 2024
216814f
Update PageHeader.xaml
niels9001 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 140 additions & 79 deletions WinUIGallery/Controls/PageHeader.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,90 @@
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>
<converters:CollectionVisibilityConverter
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
Grid.Row="0"
AutomationProperties.AutomationId="PageHeader"
Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Bind Item.Title}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<Button
x:Name="APIDetailsBtn"
Margin="0,0,0,1"
Padding="4"
VerticalAlignment="Bottom"
AutomationProperties.Name="API details"
Style="{StaticResource SubtleButtonStyle}"
ToolTipService.ToolTip="Details of the API like inheritance and namespace">
<FontIcon FontSize="14" Glyph="&#xE946;" />
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
<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,0,-12,0" />
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
<StackPanel
x:Name="InheritanceSourcePanel"
Margin="0,0,0,4"
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
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"
Expand All @@ -67,9 +119,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>
Expand All @@ -78,85 +132,92 @@
</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" />
</StackPanel>
</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>
Expand Down
8 changes: 8 additions & 0 deletions WinUIGallery/Controls/PageHeader.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
Loading