Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lewis-marshall/winui3navigationexample
An example of a WinUI 3 navigation view using Windows 11 fluent styles.
https://github.com/lewis-marshall/winui3navigationexample
windows-11 windows-11-apps windowsappsdk winui3
Last synced: about 9 hours ago
JSON representation
An example of a WinUI 3 navigation view using Windows 11 fluent styles.
- Host: GitHub
- URL: https://github.com/lewis-marshall/winui3navigationexample
- Owner: Lewis-Marshall
- Created: 2021-11-11T13:38:21.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-01T15:23:55.000Z (3 months ago)
- Last Synced: 2024-09-24T22:50:34.794Z (about 14 hours ago)
- Topics: windows-11, windows-11-apps, windowsappsdk, winui3
- Language: C#
- Homepage:
- Size: 37.1 KB
- Stars: 45
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WinUI 3 Navigation Example
## Introduction
Example of a WinUI 3 NavigationView application using the Windows 11 styles.
On Windows 11 this should look identical to a comparable WinUI 2 UWP app.
Updated to WindowsAppSDK 1.3 where Mica style and a custom TitleBar are now very easy to use.
If you need to use an older version check the WindowsAppSDK-1.1 branch
## How It Works
> [!IMPORTANT]
> Updated to WindowsAppSDK 1.3 where Mica style and a custom TitleBar are now very easy to use.
> If you need to use an older version check the WindowsAppSDK-1.1 branch
### Style
As of WindowsAppSDK 1.3 Mica styles are much easier. We can now use SystemBackdrop to enable Mica.
The SetTitleBar method has also been fixed so that we no longer need to use WinRT Interop for our custom title bar.
#### Mica
[Mica Documentation](https://learn.microsoft.com/en-us/windows/apps/design/style/mica#how-to-use-mica)
Mica can be enabled by using SystemBackdrop in either the c# or xaml of the MainWindow. Both have been used in this example.
In MainWindow.xaml.cs
```c#
public MainWindow()
{
...
SystemBackdrop = new MicaBackdrop()
{ Kind = MicaKind.Base };
```
Or in MainWindow.xaml
```xaml
```
#### Custom TitleBar
[Custom TitleBar Documentation](https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3)
```c#
public MainWindow()
{
...
ExtendsContentIntoTitleBar = true;
SetTitleBar(AppTitleBar);
}
```
We can then create space for a title bar in App.xaml
```xaml
0,48,0,0
```
And make the title bar transparent
```xaml
Transparent
Transparent
```
### Navigation
A simple navigation example is provided in the MainWindow files. This is based on the documentation but simplified somewhat by including the full addess of each page in the NavigationViewItem's Tag.
```xaml
```