[Experiment] TitleBar

components/TitleBar/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/TitleBar/samples/Dependencies.props

@@ -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>

components/TitleBar/samples/SamplePages/FirstPage.xaml

@@ -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>

components/TitleBar/samples/SamplePages/FirstPage.xaml.cs

@@ -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();
+    }
+}

components/TitleBar/samples/SamplePages/SecondPage.xaml

@@ -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>

components/TitleBar/samples/SamplePages/SecondPage.xaml.cs

@@ -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();
+    }
+}

components/TitleBar/samples/SamplePages/ShellPage.xaml

@@ -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>

components/TitleBar/samples/SamplePages/ShellPage.xaml.cs

@@ -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;
+    }
+}

components/TitleBar/samples/TitleBar.Samples.csproj

@@ -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>

components/TitleBar/samples/TitleBar.md

@@ -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;
+`
+