-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
MaxWidthandTranslationof this to center, as MAUI applies margins and widths on this element itself
- Set the
TogglePaneButton- Same as
NavigationViewBackButton
- Same as
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 aMinWidthon this element.
- Since MAUI does not actually use WinUI3 footer items, but makes the entire layout a
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.