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.

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

WinUI TitleBar API Spec #10056

Merged
merged 17 commits into from
Dec 13, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
add height explanation
  • Loading branch information
karkarl committed Dec 12, 2024
commit 0b6d3a77f22f897e10444fd30824e08101417726
28 changes: 27 additions & 1 deletion specs/TitleBar/titlebar-functional-spec.md
karkarl marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -234,6 +234,8 @@ The content property of `Header` can only be set once. Elements are left aligned
If `IsBackButtonVisible` or `IsPaneToggleButtonVisisble` is true, custom content set in the `Header` property
will automatically be appended to the Header 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

@@ -294,6 +296,7 @@ This is typically used to populate controls such as `AutoSuggestBox`. The defaul
### 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.Footer property

@@ -311,6 +314,7 @@ This is typically used to populate controls such as `PersonPicture` and the "Mor
### Remarks
The content property of `Footer` 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

@@ -384,13 +388,14 @@ This event is raised when internal PaneToggleButton raises a Click event.
<!-- TODO -->

## TitleBarAutomationPeer Class
<!-- TODO -->

Exposes `TitleBar` types to Microsoft UI Automation.

Namespace: Microsoft.UI.Xaml.Automation.Peers

```cs
public class TitleBarAutomationPeer : Microsoft.UI.Xaml.Automation.Peers.ItemContainerAutomationPeer
public class TitleBarAutomationPeer : Microsoft.UI.Xaml.Automation.Peers...
```

TitleBarAutomationPeer implements ...
@@ -466,6 +471,27 @@ unsealed runtimeclass TitleBarAutomationPeer : Microsoft.UI.Xaml.Automation.Peer
}
```

# 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 `Header`, `Content`, and `Footer` 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)