dotnet / dotnet/maui

Investigate making public styles or public properties for MauiNavigationView

Open
#30,179 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

area-controls-shell proposal/open
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 14h
Merged PRs (30d)
296

Description

Description

I recently faced a challenge of wanting to implement some custom styling of Shell to fit more common WinUI3 idioms. Using the Community Toolkit WinUI rework as a reference, I implemented some UI such that

  • Toggle button and back button are always visible and are stacked on top of each other (this is default WinUI3 NavigationView behavior)
  • Toggling between Left (expanded) and LeftCompact (minimal) is sticky between navigations

During this exercise, I noticed that WinUI3 forcibly makes the TogglePaneGrid a fixed width of 78px, probably assuming that the layout is fixed. This property is not public and I found no XAML way to define the templates to override these defaults.

As such, I had to resort to reflection to access and modify the following properties

  • PaneToggleButtonGrid
    • Set the container width to 50px so it fits what WinUI3 expects (I think WinUI3 actually expects 48, but I digress)
  • NavigationViewBackButton
    • Set the MaxWidth and Translation of this to center, as MAUI applies margins and widths on this element itself
  • TogglePaneButton
    • Same as NavigationViewBackButton
  • PaneContentGrid
    • Since MAUI does not actually use WinUI3 footer items, but makes the entire layout a CustomContent, this means that WinUI3 default behavior of hiding the "expanded" items and showing just the "icons" does not work. This results in strange behavior where the layout would "disappear" because the width was being set to 48px. I worked around this by setting a MinWidth on this element.
Public API Changes

Providing a documented XAML way of customizing Shell navigation to fit more flexible idoms (use WinUI3 documentation as a reference) or at least opening up the underlying content properties.

Intended Use-Case

Being able to customize the Shell navigation a bit further.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating MauiNavigationView and reviewing the listed internal properties: PaneToggleButtonGrid, NavigationViewBackButton, TogglePaneButton, and PaneContentGrid. Compare their current behavior with the requested WinUI3-style navigation customization, then define and document a XAML-accessible public API; done means Shell navigation can be customized without reflection.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.