Skip to content

Latest commit

 

History

History
81 lines (59 loc) · 3.61 KB

README.md

File metadata and controls

81 lines (59 loc) · 3.61 KB
Raw

MauiNavigationView

WinUI3 bits of .NET MAUI NavigationView extracted out to a WinUI 3 only project. .NET MAUI not required to run this project.

dotnet/maui#5811

Why do you register to some many DP's? That seems weird

There doesn't appear to be many places where you can customize the size/margin of things on the NavigationView. So, I just wait for the source code to make a change that doesn't work for me and then I change it back

https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/NavigationView/NavigationView.cpp#L90-L96 https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/NavigationView/NavigationView.cpp#L4574

Why aren't you using a your own Style ControlTemplate?

We'd like to just keep the NavigationView using as much of the default ControlTemplate as possible. When we update WinUI the NavigationView will just use the new ControlTemplate. We have tests in place to check that things all still measure/layout correctly if we need to adjust.

TODO

  • Switch Implementation from Window.SetTitleBar to AppWindow APIs so that we can do draggable areas and styling
  • Figure out a Windows 10 solution

Description of Change

Previously we were just using 48 for the app bar title height. This PR makes it so the NavigationView will auto resize/pad/margin based on the height of the app titlebar. You can also now replace the AppTitleBar by specifying your own DataTemplate inside the WinUI resource file.

All of the logic here has been extracted out to https://github.com/PureWeen/MauiNavigationView

To make playing around with this all easier

Examples

Default height based on Caption

image

Replacing with your own AppTitleBar

    <Application.Resources>
        <ResourceDictionary>
           <DataTemplate x:Key="MauiAppTitleBarTemplate">
                <TextBlock Height="300">RABBITS</TextBlock>
            </DataTemplate>
        </ResourceDictionary>
    </Application.Resources>

image

Replacing with your own AppTitleBar Container if you want interactive content on the edges.

    <maui:MauiWinUIApplication.Resources>
        <DataTemplate x:Key="MauiAppTitleBarContainerTemplate">
            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Content="Click Me"></Button>
                <Button Grid.Column="1" Content="Click Me"></Button>
                <Button Grid.Column="2" Content="Click Me"></Button>
                <Button Grid.Column="3" Content="Click Me"></Button>
                <ContentControl
                    Grid.Column="4"
                    IsTabStop="False"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    x:Name="AppTitleBarContentControl">
                </ContentControl>
            </Grid>
        </DataTemplate>
    </maui:MauiWinUIApplication.Resources>

image