Microsoft-ui-xaml: Add a bit of padding to NavigationViewItem to avoid occluding expand/collapse chevron

[ranjeshj]

Scrollbars should not occlude the expand collapse chevron.

[Felix-Dev]

I took a look at this and I'm having a question here. This is the current XAML code for the NaigationViewItem in left mode for content and chevron (only showing the relevant properties here):

<ContentPresenter x:Name="ContentPresenter"
    Grid.Column="1"
    Margin="0,0,16,0"/>

<Grid x:Name="ExpandCollapseChevron"
    Grid.Column="2"
    HorizontalAlignment="Right"
    Width="40"
    Margin="-16,0,0,0">
    <TextBlock
        Width="12" Height="12"
        Text="{StaticResource NavigationViewItemExpandedGlyph}">
    </TextBlock>
</Grid>

Why the width of 40 and the left margin of -16 for the expandCollapseChevron?

In my experimental code, I decided to use the same right margin for the chevron which is used for the content (16) and only set the width of the parent grid of the chevron to 12 and no left margin:

<ContentPresenter x:Name="ContentPresenter"
    Grid.Column="1"
    Margin="0,0,16,0"
    Background="Blue"/>

<Grid x:Name="ExpandCollapseChevron"
    Grid.Column="2"
    HorizontalAlignment="Right"
    Margin="0,0,16,0"                
    Background="Red">
    <TextBlock
        Width="12" Height="12">
    </TextBlock>
</Grid>

As you can see, both the ContentPresenter and the expandCollapseChevron grid now use the same right margin (16). This gives the following result (with background colored for better visibility):

and with scrollbar extended:

Is this a possible solution or do we have to work with the current XAML which uses a left margin of -16 and a width of 40 for the chevron grid?

[ranjeshj]

@ojhad for the negative margin question.

[ranjeshj]

The entire chevron and hit target associated with it should move so that it is offset from the expanded scrollbar by 4 pixels. Can you share a picture of that with and without the scrollbar. This looks like an issue everywhere because the ScrollBar always seems to occlude the content. The problem with moving the chevron is that when there is no scrollbar, the chevron is going to look too far from the right.

[Felix-Dev]

@ranjeshj Using a margin of 16 (scrollbar thickness) + 4 (padding) = 20 gives the following images (margin the same for the content presenter and the chevron):

As you said, it's also a problem for the compact mode with pane collapsed:

[widersky]

Scroll bars needs visual overhaul IMO to be less distracting at all. And, of course, rounded :)

[ranjeshj]

@widersky - I think that was already proposed here atleast the rounded part.

@Felix-Dev, can you also add a picture without the indicator (not scrollable at all). I think the sliver will just go away in that case.
@chigy do the pictures look reasonable to make this update ?

[Felix-Dev]

@ranjeshj

[chigy]

@ranjeshj

@Felix-Dev , could you show the entire list not just snapshot?

[Felix-Dev]

@chigy

Let me know if you need more images.

[chigy]

@Felix-Dev , is this update something we can run and try out? Hard to figure out the experience with image alone. If interaction prototype is not possible, can you share the entire app image, not just cropped to NavView?

[Felix-Dev]

@chigy I uploaded my current code in a branch of my WinUI fork here. You can try to compile that branch (or ask the team to do that) and see the current padding live. Unfortunately, I could not create an app package of the WinUI TestApp, which I've been showing in all the pictures above, and upload that on Github. The images are taken from the [NavigationView] page and the sub page [Hierarchical NavigationView Markup Test].

Below you see the entire page in action:

[chigy]

@Felix-Dev , thank you for that. Please go ahead with the value you have in the image.

[Felix-Dev]

Why the width of 40 and the left margin of -16 for the expandCollapseChevron?

That question has been resolved (just as an information).

[ojhad]

Why the width of 40 and the left margin of -16 for the expandCollapseChevron?

@Felix-Dev Apologies for the delayed response, missed the mention.

The chevron is considered a separate hit target. It is a way of expanding an item without having to select the item itself. This is why I gave it a width of 40, to allow for a larger uniform hit target.
I don't think we want to be reducing that hit target to only the size of the chevron. It might frustrate some users who will specifically only want to hit the chevron.

The negative margin was a way to visually move this hit target, otherwise there was too much space being displayed between the item content and the chevron.

[Felix-Dev]

@ojhad Agree. In my initial testing (using the MUXControlsTestApp) clicking everywhere on the NavigationViewItem expanded/collapsed the chevron which is why I was wondering about the separate hit target. However, there are scenarios where clicking the NavigationViewItem only selects the item and to expand the item, the chevron hit area has to be clicked. In this case, a hit target width of 40 makes a lot of sense.

I will work with the negative margin and the width of 40 when updating the resource values to prevent the chevron from being occluded by the extended scrollbar.

[Felix-Dev]

@chigy Sorry to bother you again but since I'm now working with the original settings (negative margin and hit test area of 40px) I would feel better if you could quickly look over the padding solution below to see if it still conforms with the desired design.
I'm adding a padding of 6px to the right for the chevron hit test area to get a 4px padding between the actual chevron and the extended scrollbar. This matches the visuals I showed in the previous posts. (Currently, there are 14px to the right of the actual chevron symbol so an extended scrollbar of 16px occludes 2px of it. In order to get the desired 4px padding between chevron symbol and extended scrollbar, I thus add a padding of 6px to the right of the chevron's hit area.) Sample images below:

The image below shows the hitbox area of the chevron in red (note the 2px padding between chevron hit area and shrunk scrollbar):

A WinUI Github fork with that change is here.

Question: Should the ContentPresenter of the NavigationViewItem also get a 4px padding to the right between it and the expanded scrollviewer? (In the images of my earlier posts, the ContentPresenter also had this padding added to make it's text "edge" align visually with the chevron smybol.) Currently, the ContentPresenter has a padding of 16 which is just enough to not be partially occluded by the extended scrollbar.

Below are images showcasing the increased padding by 4px for a total of 20px (16px + 4px) for the ContentPresenter (the padding between ContentPresenter and chevron is unchanged):

A WinUI Github fork with that change included is here.

[chigy]

@Felix-Dev , thank you for asking. Sorry but I am not quite sure exactly what you are asking. Are you asking if the chevron should be moved additional 4px to the left? Also, you are asking if the hit target should be shrunk by 4px so that it doesn't overlap the expanded scrollbar?

I am not too worried about hit target overlapping or not since the experience is likely not going to be impacted either way, however things I am curious about is if the chevron hit target is at least 40x40px and also if the hit target is overlapping of the space where mouse hover in that area makes the scrollbar to expand or not.

[Felix-Dev]

@chigy One question I had is if I should also add 4 additional pixel as padding to the NavigationViewItem's ContentPresenter to align it visually with the chevron. (That's the difference in the images above. In the first three images the chevron and the navviewitem content are not aligned visually to the right (text goes a bit more to the right until cut off). In the last two images, chevron and content is visually aligned.)

As for the hit test area of the chevron: Yes, it is still 40x40px wide.
It also does overlap with the space where mouse hover expands the scrollbar. See this gif:

Should this be changed? If yes, I will need to add some more padding to the chevron's hit area (and then the question is again if I should add that padding to the content presenter as well to visually align chevron and NavigationViewItem content.)

[chigy]

@Felix-Dev , yes, please visually align the chevron and the NavigationViewItem's _ContentPresenter_ as you suggest. Unfortunate about the hover overlapping but I don't think there is a feasible option without making the visual to be less optimal, so please keep it be.