diff --git a/specs/TitleBar/images/1p-edge-titlebar.png b/specs/TitleBar/images/1p-edge-titlebar.png
new file mode 100644
index 0000000000..e35c63ced7
Binary files /dev/null and b/specs/TitleBar/images/1p-edge-titlebar.png differ
diff --git a/specs/TitleBar/images/1p-notepad-titlebar.png b/specs/TitleBar/images/1p-notepad-titlebar.png
new file mode 100644
index 0000000000..86753bd839
Binary files /dev/null and b/specs/TitleBar/images/1p-notepad-titlebar.png differ
diff --git a/specs/TitleBar/images/1p-store-titlebar-minimal.png b/specs/TitleBar/images/1p-store-titlebar-minimal.png
new file mode 100644
index 0000000000..ee37377d52
Binary files /dev/null and b/specs/TitleBar/images/1p-store-titlebar-minimal.png differ
diff --git a/specs/TitleBar/images/1p-store-titlebar.png b/specs/TitleBar/images/1p-store-titlebar.png
new file mode 100644
index 0000000000..86540f9fee
Binary files /dev/null and b/specs/TitleBar/images/1p-store-titlebar.png differ
diff --git a/specs/TitleBar/images/1p-teams-titlebar.png b/specs/TitleBar/images/1p-teams-titlebar.png
new file mode 100644
index 0000000000..ce919dfd2a
Binary files /dev/null and b/specs/TitleBar/images/1p-teams-titlebar.png differ
diff --git a/specs/TitleBar/images/1p-terminal-titlebar.png b/specs/TitleBar/images/1p-terminal-titlebar.png
new file mode 100644
index 0000000000..4943bdef27
Binary files /dev/null and b/specs/TitleBar/images/1p-terminal-titlebar.png differ
diff --git a/specs/TitleBar/images/1p-vscode-titlebar.png b/specs/TitleBar/images/1p-vscode-titlebar.png
new file mode 100644
index 0000000000..20cdd9a2b5
Binary files /dev/null and b/specs/TitleBar/images/1p-vscode-titlebar.png differ
diff --git a/specs/TitleBar/images/1p-winuigallery-titlebar-minimal.png b/specs/TitleBar/images/1p-winuigallery-titlebar-minimal.png
new file mode 100644
index 0000000000..cf884a69b2
Binary files /dev/null and b/specs/TitleBar/images/1p-winuigallery-titlebar-minimal.png differ
diff --git a/specs/TitleBar/images/1p-winuigallery-titlebar.png b/specs/TitleBar/images/1p-winuigallery-titlebar.png
new file mode 100644
index 0000000000..ef0672f820
Binary files /dev/null and b/specs/TitleBar/images/1p-winuigallery-titlebar.png differ
diff --git a/specs/TitleBar/images/controls-titlebar.png b/specs/TitleBar/images/controls-titlebar.png
new file mode 100644
index 0000000000..5c9eec8b44
Binary files /dev/null and b/specs/TitleBar/images/controls-titlebar.png differ
diff --git a/specs/TitleBar/images/default-titlebar.png b/specs/TitleBar/images/default-titlebar.png
new file mode 100644
index 0000000000..2537df8670
Binary files /dev/null and b/specs/TitleBar/images/default-titlebar.png differ
diff --git a/specs/TitleBar/images/titlebar-backbutton.png b/specs/TitleBar/images/titlebar-backbutton.png
new file mode 100644
index 0000000000..eb85fe32c1
Binary files /dev/null and b/specs/TitleBar/images/titlebar-backbutton.png differ
diff --git a/specs/TitleBar/images/titlebar-basic.png b/specs/TitleBar/images/titlebar-basic.png
new file mode 100644
index 0000000000..3d41c4557f
Binary files /dev/null and b/specs/TitleBar/images/titlebar-basic.png differ
diff --git a/specs/TitleBar/images/titlebar-header-icongroup.png b/specs/TitleBar/images/titlebar-header-icongroup.png
new file mode 100644
index 0000000000..268a59d549
Binary files /dev/null and b/specs/TitleBar/images/titlebar-header-icongroup.png differ
diff --git a/specs/TitleBar/images/titlebar-icon.png b/specs/TitleBar/images/titlebar-icon.png
new file mode 100644
index 0000000000..4b39218b66
Binary files /dev/null and b/specs/TitleBar/images/titlebar-icon.png differ
diff --git a/specs/TitleBar/images/titlebar-navview-minimal.png b/specs/TitleBar/images/titlebar-navview-minimal.png
new file mode 100644
index 0000000000..82e481030a
Binary files /dev/null and b/specs/TitleBar/images/titlebar-navview-minimal.png differ
diff --git a/specs/TitleBar/images/titlebar-navview.png b/specs/TitleBar/images/titlebar-navview.png
new file mode 100644
index 0000000000..13ddde4d79
Binary files /dev/null and b/specs/TitleBar/images/titlebar-navview.png differ
diff --git a/specs/TitleBar/images/titlebar-personpicture.png b/specs/TitleBar/images/titlebar-personpicture.png
new file mode 100644
index 0000000000..854f05fd34
Binary files /dev/null and b/specs/TitleBar/images/titlebar-personpicture.png differ
diff --git a/specs/TitleBar/images/titlebar-search.png b/specs/TitleBar/images/titlebar-search.png
new file mode 100644
index 0000000000..55e5f93587
Binary files /dev/null and b/specs/TitleBar/images/titlebar-search.png differ
diff --git a/specs/TitleBar/images/titlebar-sizevariant.png b/specs/TitleBar/images/titlebar-sizevariant.png
new file mode 100644
index 0000000000..fb54abe472
Binary files /dev/null and b/specs/TitleBar/images/titlebar-sizevariant.png differ
diff --git a/specs/TitleBar/images/titlebar-subtitle.png b/specs/TitleBar/images/titlebar-subtitle.png
new file mode 100644
index 0000000000..528b865274
Binary files /dev/null and b/specs/TitleBar/images/titlebar-subtitle.png differ
diff --git a/specs/TitleBar/images/titlebar-title.png b/specs/TitleBar/images/titlebar-title.png
new file mode 100644
index 0000000000..ffc1bad4e1
Binary files /dev/null and b/specs/TitleBar/images/titlebar-title.png differ
diff --git a/specs/TitleBar/titleBar-dev-spec.md b/specs/TitleBar/titleBar-dev-spec.md
new file mode 100644
index 0000000000..f7714cdf02
--- /dev/null
+++ b/specs/TitleBar/titleBar-dev-spec.md
@@ -0,0 +1,216 @@
+
+
+
+
+# Description
+
+
+The WinUI TitleBar is a title bar control that allows easy additions of WinUI components such as AutoSuggestBox, PersonPicture, and Mica theming.
+It is to be used in lieu of the Shell title bar for when developers want more than the basic shell title bar functionalities.
+
+Current implementations of a custom titlebar involves the developer to fully create a user component from scratch. A notable painpoint in this process is
+to manually calculate drag regions for when there are interactive elements in the title bar (ie. AutoSuggestBox - refer to WinUI-Gallery sample). WinUI titleBar is meant
+to encapsulate the most common design scenarios and streamline this process.
+
+# Design considerations
+
+## AppWindow TitleBar versus WinUI TitleBar
+
+
+
+### AppWindow.TitleBar
+The AppWindow TitleBar is the default title bar, and downlevels to Win32.
+
+AppWindow drawn title bar covers the basic functionalities:
+- AppWindow.SetIcon
+- AppWindow.Title
+- Show Max/Min/Close caption buttons
+- Respects theme
+
+
+
+### WinUI TitleBar
+Developers will 'opt-in' to the WinUI TitleBar for updated styling and extended functionalities.
+
+**Functionalities:**
+- HeaderArea (ie. BackButton, PaneToggleButton)
+
+
+- Icon
+
+
+- Title
+
+
+- Subtitle
+
+
+- ContentArea (ie. AutoSuggestBox)
+
+
+- FooterArea (ie. PersonPicture)
+
+
+- Transparency for Mica
+- Custom Height - 32px as default / 48px if content != null
+
+
+## Considerations
+
+- Punch hole through Header / Content / Footer for drag regions. Calculations needs to be updated on SizeChanged.
+ - Regions with hole punched through are non-draggable.
+
+- Currently TitleBar treats all custom content as interactable and punches a hole through the drag region.
+How can we allow such customizations?
+ - If we add an `IsInteractive` attached property, that means TitleBar will have to walk through the
+ entire visual tree to calculate the rects every time.
+ - Can we call it `InteractiveContent` instead? But this limits the customizability of the control.
+ - Reference Teams forward / backward button. It is draggable when disabled.
+
+- Interactive content in TitleBar must also be capable of keyboard navigation.
+They should be treated as normal elements in the app's visual tree.
+
+- TitleBar should meet [Windows app design guidelines](https://learn.microsoft.com/en-us/windows/apps/design/basics/titlebar-design#icon):
+ - A single-click/tap on the icon should show system window menu.
+ - A double-click/tap should close the window.
+
+- CoreApplicationViewTitleBar.LayoutMetricsChanged and IsVisibleChanged events from the UWP world is
+missing in WinUI3:
+ - LayoutMetricsChanged: Update Left and Right Inset for on DPI changes.
+ Right Inset is used to give placeholder space for the caption buttons in WinUI TitleBar.
+ - IsVisibleChanged: This is used for when a Window is in full screen mode,
+ and WinUI TitleBar needs to know when to collapse itself.
+ - Needs exposed events or dependency property so values can be updated dynamically.
+
+- Minimum drag region for accessibility (ie. Gap between PersonPicture and CaptionButton for Store)
+
+- TitleBar behaviour with smoke layer with ContentDialog. Should TitleBar still be draggable
+when content dialog is visible? If so, a disable drag bool API is needed.
+https://github.com/microsoft/microsoft-ui-xaml/issues/6534 for reference.
+
+- Flyout needs to be aware of TitleBar dimensions so it can calculate whether it should expand up / down.
+
+
+
+
+
+
+
+- AutoSuggestBox to collapse as an icon when in minimal mode.
+ - Argument for having search as part of titleBar
+- MinSize for the apps itself:
+ - Store has set a MinSize which negates the need to fully collapse its AutoSuggestBox
+ - Design does give window sizing guidance, but should test for worst case scenario
+- Which elements collapses on re-size
+ - Store collapses Title and Subtitle in minimal mode
+
+
+
+
+
+- Handling of BackButton and PaneToggleButton for NavView
+ - Collapsing and moving pane toggle button to titlebar in Minimal Mode
+
+
+
+
+- Ability to add non standard elements such as "<", ">" in content, and other buttons in footer
+
+
+
+
+- Ability to toggle Header content before or after TitleBar icon?
+- _Currently not implemented_
+
+# Implementation Details
+
+## Hole-punching through Non-Client Area
+Once TitleBar control is set as the Window titlebar in developer codebehind, the entire region's input is marked as non-client
+and becomes non-interactable. We need to punch out a "hole" for each interactable region in TitleBar.
+Eg. Header, body, and footer content areas.
+
+`m_interactableElementsList`
+- A list of interactable elements is tracked in the lifetime of the TitleBar.
+- The list is updated every time the specified elements' visibility changes.
+ - eg. `BackButton`, `PaneToggleButton`, `Header`, `Content`, `Footer`.
+
+`UpdateDragRegion()`
+- Called every time `SizeChanged` and `LayoutUpdated` events are fired.
+- Checks if `m_interactableElementsList` has children, and if so gets the rects of each element.
+- Accesses the `InputNonClientPointerSource` at the IXP layer and set rects as pass through regions.
+
+_Note: a custom "LayoutUpdated" event needs to be written._
+_The Default LayoutUpdated event fires for every little (non-relevant) events._
+
+
+# Functional spec link
+
+[Functional Spec](titleBar-functional-spec.md)
+
+# Architectural overview
+
+## Key public components
+
+TitleBar class
+
+## Key internal components
+
+TitleBar TemplateSettings
+ - Calculate DragRegions
+
+TitleBarAutomationPeer
+
+## Gesture recognizer handling
+
+TitleBar must handle mouse, touch, and keyboard scenarios.
+
+# Appendix
+
+## Header, Content, Footer API Naming
+Alternate naming considerations for `Header`, `Content`, `Footer`:
+- Header and Footer aligns with TabView.TabStripHeader and TabView.TabStripFooter
+- Start and End (e.g. [Windows.UI.Xaml.TextAlignment](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml?view=winrt-26100))
+- Before and After (e.g. CSS, [Fluent Web UI](https://react.fluentui.dev/?path=/docs/components-input--docs#content-before-after))
+- Leading and Trailing (e.g. [Apple SwiftUI Toolbar](https://developer.apple.com/documentation/swiftui/toolbaritemplacement/topbarleading))
+
+## Out of Scope
+
+### Tabbed TitleBar Scenarios
+TitleBar is not needed for TabView scenarios - it may be considered as a separate `TabbedTitleBar` control.
+
+Below scenarios demonstrate that when Tabview occupies the entire width when extending into title bar.
+Header icons, buttons, and drag regions can be handled with TabView Header, and FooterArea.
+
+
+
+
+- No backbutton, no other elements, just tabView
+- TabView extends into titlebar takes up the whole window
+- TabView needs a property to make space for icon or other elements
+- TabView also needs to make space for drag region on right.
+ - FileExplorer currently has their own implement by setting a drag region and CaptionControl placeholder in TabView.FooterArea
+
+### AppWindow.TitleBar
+Improvements to Window class to allow below syntax. This will greatly cut down the amount of code needed to
+configure WinUI TitleBar.
+
+```xml
+
+
+
+
+
+```
+Ideally, this should also expose TitleBar to below properties and methods:
+- Window.Title and AppWindow.Title
+- AppWindow.SetIcon()
+
+This is out of scope for WinUI TitleBar hence will not be included in this spec.
+
diff --git a/specs/TitleBar/titlebar-functional-spec.md b/specs/TitleBar/titlebar-functional-spec.md
new file mode 100644
index 0000000000..03908ec21f
--- /dev/null
+++ b/specs/TitleBar/titlebar-functional-spec.md
@@ -0,0 +1,502 @@
+
+
+
+
+TitleBar Functional Spec
+===
+_Control category: Basic Input_
+
+# Background
+Motivations for the TitleBar control include:
+
+- Achieve parity with Fluent Windows Visual Design Library.
+- Bridge the gap between Shell / Win32 title bar and a fully custom Xaml titlebar.
+- Simplify the developer experience for implementing the modern title bar.
+
+# Description
+
+The title bar is a fundamental component of a Windows app’s user interface. Here are its key features and functionalities:
+
+1. Display Information:
+ - The title bar prominently displays the name of the app or document currently open. Users can quickly identify which app they are interacting with.
+ - Additionally, the title bar may include other relevant information, such as the document title or the current state (e.g., “Editing,” “Viewing,” etc.).
+2. Window Controls:
+ - Minimize Button: Clicking the minimize button (usually represented by an underscore icon) reduces the app window to the taskbar or system tray.
+ - Maximize Button: Clicking the maximize button (usually represented by a square icon) expands the app window to fill the screen.
+ - Close Button: Clicking the close button (usually represented by an “X” icon) closes the app window.
+3. Drag and Move:
+ - Users can click and drag the title bar to move the app window around the screen. This allows them to position the window wherever they prefer.
+4. Theming and Integration:
+ - The title bar can be customized to match the app’s visual style using Mica theming.
+ - It also integrates with other WinUI controls, such as NavigationView, AutoSuggestBox, and PersonPicture, providing a cohesive user experience.
+
+
+# Is this the right control?
+
+A title bar is a core component of a Windows app, and the shell version of the title bar is shipped with the basic WinUI app template by default.
+
+Use the WinUI TitleBar when you want further customizations such as subtitles, Mica theming, and integrations with WinUI Controls.
+
+_Note: WinUI TitleBar does not handle Caption Buttons - it simply allocates space where the caption buttons appear, depending on RTL or LTR settings.
+Caption Buttons and its customizations are handled by the AppWindow TitleBar._
+
+# Sample scenarios
+
+## Scenario: Default TitleBar
+
+
+**XAML**
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**C#**
+```cs
+public MainWindow()
+{
+ this.InitializeComponent();
+
+ // C# code to set AppTitleBar UIElement as Titlebar
+ Window window = this;
+ window.ExtendsContentIntoTitleBar = true; // Hides the default system titlebar.
+ window.SetTitleBar(this.DefaultTitleBar); // Replace system titlebar with the WinUI Titlebar.
+
+ // Note: If not title bar is specified, the default system titlebar will be rendered, regardles of the ExtendsContentIntoTitleBar property.
+}
+```
+
+_Note: TitleBar currently needs to be set explicitly in the grid.row and referenced_
+_by Window in codebehind as shown above._
+_Improvements to Window are being considered to avoid this extra grid layout and codebehind._
+_Please see Appendix of [Functional Spec](titleBar-functional-spec.md)._
+
+## Scenario: TitleBar with WinUI Controls Integration
+TitleBar with common WinUI Controls: `AutoSuggestBox`, `PersonPicture`, `AppBarButton`.
+
+
+
+**XAML**
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Scenario: TitleBar with NavigationView L-Pattern Integration
+
+
+Titlebar and NavigationView in an L-Pattern.
+
+
+TitleBar and NavigationView is in Minimal DisplayMode.
+Note that TitleBar IconSource is collapsed in minimal mode.
+
+
+**XAML**
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1,1,0,0
+
+ 8,0,0,0
+
+
+
+
+
+ ...
+
+
+
+```
+
+_Note: Should the NavView resources be the default to avoid needing the extra code?_
+_This will be a question of what pattern will be shipped in WinUI Templates by default._
+
+**C#**
+```cs
+public MainWindow()
+{
+ this.InitializeComponent();
+
+ Window window = this;
+ window.ExtendsContentIntoTitleBar = true;
+ window.SetTitleBar(this.DefaultTitleBar);
+}
+
+private void NavViewTitleBar_BackRequested(TitleBar sender, object args)
+{
+ if (NavFrame.CanGoBack)
+ {
+ NavFrame.GoBack();
+ }
+}
+
+private void NavViewTitleBar_PaneToggleRequested(TitleBar sender, object args)
+{
+ NavView.IsPaneOpen = !NavView.IsPaneOpen;
+}
+```
+
+_Note: How can we avoid this extra code-behind?_
+
+# API Pages
+
+## TitleBar class
+
+Represents a control that provides the title and system buttons for a window or application. It typically appears at the top of the window and
+includes core functionalities such as drag, minimize, maximize, and close buttons.
+
+Namespace: Microsoft.UI.Xaml.Controls
+
+```cs
+public class TitleBar : Control
+```
+
+## TitleBar.ContentBefore property
+
+Gets and sets elements within the TitleBar's ContentBefore column.
+
+```cs
+public UIElement ContentBefore { get; set; }
+```
+
+### Property Value
+Represents the ContentBefore content property of the `TitleBar` control which can be populated in both XAML markup and code. The default is `null`.
+
+### Remarks
+The content property of `ContentBefore` can only be set once. Elements are left aligned by default.
+
+If `IsBackButtonVisible` or `IsPaneToggleButtonVisisble` is true, custom content set in the `ContentBefore` property
+will automatically be appended to the ContentBefore column in TitleBar layout.
+
+If the property is not `null`, TitleBar automatically configures its height to `TitleBarExpandedHeight` in codebehind. See ThemeResources section for further details.
+
+
+## TitleBar.Title property
+
+Gets or sets the Title text to be displayed on the TitleBar.
+
+```cs
+public String Title { get; set; }
+```
+
+### Property Value
+Represents the title string to be displayed on the `TitleBar`. The default is `null`.
+
+### Remarks
+If TitleBar is in minimal display mode, Title textbox will automatically be collapsed.
+If Title string is empty, Title textbox will be collapsed.
+
+## TitleBar.Subtitle property
+
+Gets or sets the Subtitle text to be displayed on the TitleBar. This is generally used for versioning, such as "Preview", "Beta", etc.
+
+```cs
+public String Subtitle { get; set; }
+```
+
+### Property Value
+Represents the subtitle string to be displayed on the `TitleBar`. The default is `null`.
+
+### Remarks
+If TitleBar is in minimal display mode, `Subtitle` textbox will automatically be collapsed.
+If `Subtitle` string is empty, `Subtitle` textbox will be collapsed.
+
+
+## TitleBar.IconSource property
+
+Gets or sets the TitleBar's icon.
+
+```cs
+public IconSource IconSource { get; set; }
+```
+
+### Property Value
+Represents the icon associated with the `TitleBar`. The default is `null`.
+
+
+## TitleBar.Content property
+
+Gets and sets elements within the TitleBar's Content column.
+
+```cs
+public UIElement Content { get; set; }
+```
+
+### Property Value
+Represents the Content property of the `TitleBar` control which can be populated in both XAML markup and code.
+
+This is typically used to populate controls such as `AutoSuggestBox`. The default is `null`.
+
+### Remarks
+The content property of `Content` can only be set once. Elements are center aligned by default.
+
+If the property is not `null`, TitleBar automatically configures its height to `TitleBarExpandedHeight` in codebehind. See ThemeResources section for further details.
+
+## TitleBar.ContentAfter property
+
+Gets and sets elements within the TitleBar's ContentAfter column.
+
+```cs
+public UIElement ContentAfter { get; set; }
+```
+
+### Property Value
+Represents the ContentAfter property of the `TitleBar` control which can be populated in both XAML markup and code.
+
+This is typically used to populate controls such as `PersonPicture` and the "More" `AppBarButton`. The default is `null`.
+
+### Remarks
+The content property of `ContentAfter` can only be set once. Elements are right aligned by default.
+
+If the property is not `null`, TitleBar automatically configures its height to `TitleBarExpandedHeight` in codebehind. See ThemeResources section for further details.
+
+## TitleBar.IsBackButtonVisible property
+
+Gets and sets TitleBar's BackButton visiblity.
+
+```cs
+public Boolean IsBackButtonVisible { get; set; }
+```
+
+### Property Value
+Represents the visiblity of TitleBar's BackButton. The default is `false`.
+
+
+## TitleBar.IsBackButtonEnabled property
+
+Gets and sets BackButton's IsEnabled property.
+
+```cs
+public Boolean IsBackButtonEnabled { get; set; }
+```
+
+### Property Value
+Represents the IsEnabled property of TitleBar's BackButton. The default is `true`.
+
+### Remarks
+This property is typically bound to an accompanying NavFrame's `CanGoBack` property:
+`IsBackButtonEnabled="{x:Bind NavFrame.CanGoBack}"`
+
+## TitleBar.IsPaneToggleButtonVisible property
+
+Gets and sets TitleBar's PaneToggleButton visiblity.
+
+```cs
+public Boolean IsPaneToggleButtonVisible { get; set; }
+```
+
+### Property Value
+Represents the visiblity of TitleBar's PaneToggleButton. The default is `false`.
+
+### Remarks
+TitleBar's PaneToggleButton is only used with NavigationView and when NavigationView is in `Minimal` DisplayMode.
+In other display mode scenarios, the PaneToggleButton is owned and handled by NavigationView.
+
+
+## TitleBar.BackRequested event
+
+Occurs whenever BackButton is clicked.
+
+C#
+```cs
+public event TypedEventHandler BackRequested;
+```
+
+### Remark
+This event is raised when internal BackButton raises a Click event.
+
+
+## TitleBar.PaneToggleRequested event
+
+Occurs whenever PaneToggleButton is clicked.
+
+C#
+```cs
+public event TypedEventHandler PaneToggleRequested;
+```
+
+### Remark
+This event is raised when internal PaneToggleButton raises a Click event.
+
+## TitleBarTemplateSettings Class
+
+
+## TitleBarAutomationPeer Class
+
+
+Exposes `TitleBar` types to Microsoft UI Automation.
+
+Namespace: Microsoft.UI.Xaml.Automation.Peers
+
+```cs
+public class TitleBarAutomationPeer : Microsoft.UI.Xaml.Automation.Peers...
+```
+
+TitleBarAutomationPeer implements ...
+
+# API Details
+
+```cs (but really MIDL3)
+[MUX_EXPERIMENTAL]
+[webhosthidden]
+unsealed runtimeclass TitleBar : Microsoft.UI.Xaml.Controls.Control
+{
+ TitleBar();
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ UIElement ContentBefore{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ String Title{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ String Subtitle{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ Microsoft.UI.Xaml.Controls.IconSource IconSource{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ UIElement Content{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ UIElement ContentAfter{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ Boolean IsBackButtonVisible{ get; set; };
+
+ Boolean IsBackButtonEnabled{ get; set; };
+
+ [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+ Boolean IsPaneToggleButtonVisible{ get; set; };
+
+ TitleBarTemplateSettings TemplateSettings{ get; };
+
+ event Windows.Foundation.TypedEventHandler BackRequested;
+ event Windows.Foundation.TypedEventHandler PaneToggleRequested;
+
+ static Microsoft.UI.Xaml.DependencyProperty ContentBeforeProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty TitleProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty SubtitleProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty IconSourceProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty ContentProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty ContentAfterProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty IsBackButtonVisibleProperty{ get; };
+ static Microsoft.UI.Xaml.DependencyProperty IsBackButtonEnabledProperty{ get; };
+
+ static Microsoft.UI.Xaml.DependencyProperty TemplateSettingsProperty{ get; };
+}
+
+[MUX_EXPERIMENTAL]
+[webhosthidden]
+unsealed runtimeclass TitleBarTemplateSettings : Microsoft.UI.Xaml.DependencyObject
+{
+ TitleBarTemplateSettings();
+
+ Microsoft.UI.Xaml.Controls.IconElement IconElement;
+
+ static Microsoft.UI.Xaml.DependencyProperty IconElementProperty{ get; };
+}
+
+[MUX_EXPERIMENTAL]
+[webhosthidden]
+unsealed runtimeclass TitleBarAutomationPeer : Microsoft.UI.Xaml.Automation.Peers.FrameworkElementAutomationPeer
+{
+ TitleBarAutomationPeer(MEU_XC_NAMESPACE.TitleBar owner);
+}
+```
+
+# ThemeResources
+This section does not list all of the ThemeResources associated with TitleBar. Only ThemeResources of note that require highlight or further explanation.
+
+| Resource | Type | Value | Description |
+|--|--|--|--|
+| `TitleBarCaptionButton`* | Color | - | Defines color resources for the AppWindow caption buttons. |
+
+TitleBar currently overwrites the resources on theme changes in codebehind. This can be removed once the theme change feature is shipped for AppWindow.
+
+| Resource | Type | Value | Description |
+|--|--|--|--|
+| `TitleBarCompactHeight` | Double | 32px | Defines the compact / default height for TitleBar. |
+| `TitleBarExpandedHeight` | Double | 48px | Defines the expanded height for TitleBar. |
+
+There is no TitleBar.Height property. The height for TitleBar is configured in codebehind depending on whether there
+is content present in the `ContentBefore`, `Content`, and `ContentAfter` content areas. TitleBar's height is set to `TitleBarCompactHeight` if no elements are present in the mentioned content areas, and `TitleBarExpandedHeight` if
+elements are present. As the content areas are empty by default, the default height for TitleBar is
+`TitleBarCompactHeight`.
+
+# Figma link
+
+[Figma link](https://www.figma.com/file/sxPR9uvUNg6XQKSKOmlbK8/Fluent-Windows-Visual-Library?type=design&node-id=30201-110568&mode=design&t=ke7CzN5LvKzNA8LR-4)
+
+# Appendix
+
+Reference:
+- Tammy's TitleBar [WIP](https://dev.azure.com/microsoft/WinUI/_git/microsoft-ui-xaml-lift/?path=%2Fcontrols%2Fdev%2FTitleBar%2FTitleBar.idl&version=GBmain&_a=contents)
+- Niels Laute's TitleBar in CommunityToolkit: [PR](https://github.com/CommunityToolkit/Labs-Windows/pull/459/files), [Spec](https://github.com/CommunityToolkit/Labs-Windows/discussions/454)