[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,19 @@
+---
+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 custom drag regions.
+
+> [!Sample TitleBarConfigSample]
+
+> [!Sample TitleBarFullSample]