Skip to content

Proposal: lightweight styling for NavigationView top button spacing #1961

@Sergio0694

Description

@Sergio0694

Proposal: lightweight styling for NavigationView top button spacing

This issue is a follow up from a conversation we've had with some WinUI engineers and other developers over at the UWP Community discord server, specifically the thread starting with this message.

Summary

Allow developers to customize the spacing of the buttons in the NavigationView in top navigation mode through lightweight styling (by overriding a specific resource that's used in the template), instead of forcing them to use explicit code that interacts with the visual tree directly.
This results in an easier experience for developers, which is also more portable and less error prone (and with the additional benefit of requiring no code behind trickery).

Additional info

I'm trying to create the following look for buttons in the NavigationView, with a 2px spacing:

image

This is different from the default look, which uses no spacing at all, which I personally don't like for stacked buttons with the reveal highlight effect:

image

The template for the NavigationView is here, and I've linked the area reserved to the top buttons. As you can see, the ItemsRepeater is not using any resource to set the Spacing property, making it impossible to use lightweight styling for this. Furthermore, the "More" button doesn't have spacing either, forcing users to also manually set some left margin there to keep the look consistent with the buttons. Here's the code I'm using right now, under a Loaded handler for the NavigationView:

NavigationView navigationView = (NavigationView)sender;

if ((navigationView.FindDescendantByName("TopNavMenuItemsHost") as ItemsRepeater)?.Layout is StackLayout panel)
{
    panel.Spacing = 2;
}

if (navigationView.FindDescendantByName("TopNavOverflowButton") is Button button)
{
    button.Margin = new Thickness(2, 0, 0, 0);
}

This is not really ideal, for obvious reasons. It'd be nice to be able to set the spacing for both buttons with a simple resource that can be overridden with some lightweight styling.

Rationale

  • Allow users to easily customize the buttons spacing
  • Discourage the use of weird tricks with code behind (see solution above)

Scope

Capability Priority
Use a resource to control the buttons spacing Must
Use a resource for the margin of the "More" button Must
Use the same resource to control both the points above Should

Open Questions

Not really related, but...
Why is the "More" button lacking the reveal highlight completely?
See here:

image

I think it should use the same exact visual style as the other top navigation buttons.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions