microsoft/microsoft-ui-xaml

Pane toggle button is clipped in NavigationView

Open

#5,854 opened on Sep 9, 2021

View on GitHub
 (5 comments) (1 reaction) (1 assignee)C# (5,815 stars) (659 forks)batch import
area-NavigationViewbughelp wantedteam-Controls

Description

Describe the bug Pane toggle button is initially clipped in NavigationView, MUX 2.6.2, default Win11-like styles

Steps to reproduce the bug

  1. VS2019, new blank C++/CX project, add MUX 2.6.2, in MainPage add such code
        <muxc:NavigationView/>
  1. Hover over pane toggle button - it has rounded corners, and it is definitely clipped.
  2. Close and reopen pane - button is not clipped anymore

Expected behavior Button should not be clipped

Screenshots image

Version Info

NuGet package version: [Microsoft.UI.Xaml 2.6.2]

Windows app type:

UWP Win32
Yes
Windows version Saw the problem?
Insider Build (xxxxx)
May 2021 Update (19043) Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)
Device form factor Saw the problem?
Desktop Yes
Xbox
Surface Hub
IoT

Additional context Initially in in NavigationView.xaml TogglePaneButton width == 40 is determined by MinWidth="{Binding ... Path=TemplateSettings.SmallerPaneToggleButtonWidth}" and not set Width property. After pane collapsing/expanding NavigationView::UpdatePaneToggleSize() recalculate it starting with GetTemplateSettings()->PaneToggleButtonWidth() and optionally adjusting it. Note, that PaneToggleButtonWidth == 48 is used here, not , SmallerPaneToggleButtonWidth == 40. Also note, that in NavigationView_v1.xaml MinWidth="{Binding ... Path=TemplateSettings.PaneToggleButtonWidth}" - not SmallerPaneToggleButtonWidth.

Contributor guide

Tech stack
cpp
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
XAML layoutWinUI NavigationViewC++ basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue is caused by a discrepancy between the initial MinWidth binding using *Smaller*PaneToggleButtonWidth (40) and the expanded state using PaneToggleButtonWidth (48) in NavigationView.xaml. The fix likely involves correcting the MinWidth binding to use PaneToggleButtonWidth or adjusting the UpdatePaneToggleSize method in NavigationView.cpp to handle the initial state. Check NavigationView.xaml for the TogglePaneButton template and NavigationView v1.xaml for any alternate bindings. Verify that the clipping is resolved when the button width is consistent.