Skip to content

Commit

Permalink
Merge pull request #459 from CommunityToolkit/niels9001/titlebar-expe…
Browse files Browse the repository at this point in the history
…riment

[Experiment] TitleBar
  • Loading branch information
Arlodotexe authored May 18, 2024
2 parents 9aa7bd1 + aa780a5 commit 8d49097
Show file tree
Hide file tree
Showing 35 changed files with 2,038 additions and 0 deletions.
3 changes: 3 additions & 0 deletions components/TitleBar/OpenSolution.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@ECHO OFF

powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added components/TitleBar/samples/Assets/Avatar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added components/TitleBar/samples/Assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions components/TitleBar/samples/Dependencies.props
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!--
WinUI 2 under UWP uses TargetFramework uap10.0.*
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
For UWP / WinAppSDK / Uno packages, place the package references here.
-->
<Project>
<!-- WinUI 2 / UWP -->
<ItemGroup Condition="'$(IsUwp)' == 'true'">
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
</ItemGroup>

<!-- WinUI 2 / Uno -->
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
</ItemGroup>

<!-- WinUI 3 / WinAppSdk -->
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
</ItemGroup>

<!-- WinUI 3 / Uno -->
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
</ItemGroup>
</Project>
18 changes: 18 additions & 0 deletions components/TitleBar/samples/SamplePages/FirstPage.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<Page x:Class="TitleBarExperiment.Samples.FirstPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:TitleBarExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">

<Grid>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="48"
FontWeight="SemiBold"
Text="1" />
</Grid>
</Page>
15 changes: 15 additions & 0 deletions components/TitleBar/samples/SamplePages/FirstPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace TitleBarExperiment.Samples;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class FirstPage : Page
{
public FirstPage()
{
this.InitializeComponent();
}
}
18 changes: 18 additions & 0 deletions components/TitleBar/samples/SamplePages/SecondPage.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<Page x:Class="TitleBarExperiment.Samples.SecondPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:TitleBarExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">

<Grid>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="48"
FontWeight="SemiBold"
Text="2" />
</Grid>
</Page>
15 changes: 15 additions & 0 deletions components/TitleBar/samples/SamplePages/SecondPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace TitleBarExperiment.Samples;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SecondPage : Page
{
public SecondPage()
{
this.InitializeComponent();
}
}
88 changes: 88 additions & 0 deletions components/TitleBar/samples/SamplePages/ShellPage.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<Page x:Class="TitleBarExperiment.Samples.ShellPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:TitleBarExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<controls:TitleBar x:Name="appTitleBar"
Title="Contoso"
AutoConfigureCustomTitleBar="True"
BackButtonClick="appTitleBar_BackButtonClick"
DisplayMode="Tall"
IsBackButtonVisible="True"
IsPaneButtonVisible="True"
PaneButtonClick="appTitleBar_PaneButtonClick"
Subtitle="Preview">
<controls:TitleBar.Icon>
<BitmapIcon ShowAsMonochrome="False"
UriSource="ms-appx:///Assets/AppTitleBarIcon.png" />
</controls:TitleBar.Icon>
<controls:TitleBar.Content>
<AutoSuggestBox PlaceholderText="Search.." />
</controls:TitleBar.Content>
<controls:TitleBar.Footer>
<Button Width="32"
Height="32"
Padding="0"
BorderBrush="{ThemeResource CircleElevationBorderBrush}"
CornerRadius="16">
<Button.Content>
<muxc:PersonPicture Width="32"
Height="32"
Initials="AB"
ProfilePicture="ms-appx:///Assets/Avatar.png" />
</Button.Content>
<Button.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Manage account">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE77B;" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Settings">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE713;" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</MenuFlyout>
</Button.Flyout>
</Button>
</controls:TitleBar.Footer>
</controls:TitleBar>
<muxc:NavigationView x:Name="NavView"
Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
Loaded="NavView_Loaded"
SelectionChanged="NavView_SelectionChanged">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Content="First item"
Tag="1">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE787;" />
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
<muxc:NavigationViewItem Content="Second item"
Tag="2">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE7C5;" />
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
</muxc:NavigationView.MenuItems>
<Frame x:Name="NavFrame"
Navigated="NavFrame_Navigated" />
</muxc:NavigationView>
</Grid>
</Page>
56 changes: 56 additions & 0 deletions components/TitleBar/samples/SamplePages/ShellPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace TitleBarExperiment.Samples;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class ShellPage : Page
{
#if WINAPPSDK
public ShellPage(Window window)
{
this.InitializeComponent();
appTitleBar.Window = window;
}
#else
public ShellPage()
{
this.InitializeComponent();
Microsoft.UI.Xaml.Controls.BackdropMaterial.SetApplyToRootOrPageBackground(this, true);
}
#endif
private void appTitleBar_BackButtonClick(object sender, RoutedEventArgs e)
{
if (NavFrame.CanGoBack)
{
NavFrame.GoBack();
}
}

private void appTitleBar_PaneButtonClick(object sender, RoutedEventArgs e)
{
NavView.IsPaneOpen = !NavView.IsPaneOpen;
}

private void NavView_SelectionChanged(MUXC.NavigationView sender, MUXC.NavigationViewSelectionChangedEventArgs args)
{
switch ((string)((MUXC.NavigationViewItem)NavView.SelectedItem).Tag)
{
case "1": NavFrame.Navigate(typeof(FirstPage)); break;
case "2": NavFrame.Navigate(typeof(SecondPage)); break;
}

}

private void NavView_Loaded(object sender, RoutedEventArgs e)
{
NavView.SelectedItem = NavView.MenuItems[0];
}

private void NavFrame_Navigated(object sender, NavigationEventArgs e)
{
appTitleBar.IsBackButtonVisible = NavFrame.CanGoBack;
}
}
25 changes: 25 additions & 0 deletions components/TitleBar/samples/TitleBar.Samples.csproj
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
<PropertyGroup>
<ToolkitComponentName>TitleBar</ToolkitComponentName>
</PropertyGroup>

<!-- Sets this up as a toolkit component's sample project -->
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
<ItemGroup>
<None Remove="Assets\AppTitleBarIcon.png" />
<None Remove="Assets\Avatar.png" />
<None Remove="Assets\icon.png" />
</ItemGroup>
<ItemGroup>
<Content Include="Assets\AppTitleBarIcon.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="Assets\Avatar.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="Assets\icon.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>

</Project>
28 changes: 28 additions & 0 deletions components/TitleBar/samples/TitleBar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: TitleBar
author: niels9001
description: A control that provides a modern TitleBar
keywords: TitleBar, Control, Layout
dev_langs:
- csharp
category: Controls
subcategory: Layout
discussion-id: 0
issue-id: 0
icon: assets/icon.png
---

The `TitleBar` provides an easy way to display a modern titlebar experience. The control handles all the required APIs to extend content into the titlebar area and set custom drag regions. The control is set up in a way that it handles the correct design guidelines while being flexible in what content to show.

> [!Sample TitleBarConfigSample]
> [!Sample TitleBarFullSample]
## Using TitleBar in WASDK apps
If `AutoConfigureCustomTitleBar` is enabled, the `TitleBar` will make the required code-behind changes to make your content extend into the titlebar area and setting the correct caption background brushes. However, launching the app might briefly show the standard titlebar. To overcome this, make sure you set the following code in the `OnLaunched` method (in `App.xaml.cs`) or wherever you create your window:

```CS
currentWindow.AppWindow.TitleBar.ExtendsContentIntoTitleBar = true;
currentWindow.AppWindow.TitleBar.ButtonBackgroundColor = Microsoft.UI.Colors.Transparent;
`

Loading

0 comments on commit 8d49097

Please sign in to comment.