Skip to content

feat(controls): Add GridSplitter support to LeftNavigationViewTemplate - #1603

Open
Koichi-Kobayashi wants to merge 3 commits into
lepoco:mainfrom
Koichi-Kobayashi:NavigationView
Open

feat(controls): Add GridSplitter support to LeftNavigationViewTemplate#1603
Koichi-Kobayashi wants to merge 3 commits into
lepoco:mainfrom
Koichi-Kobayashi:NavigationView

Conversation

@Koichi-Kobayashi

@Koichi-Kobayashi Koichi-Kobayashi commented Dec 13, 2025

Copy link
Copy Markdown
Contributor

Pull request type

  • Update
  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes

What is the current behavior?

The width of the navigation panel can be specified using OpenPaneLength,
but it cannot be resized dynamically.

I came up with a better approach than my pull request #1519.

What is the new behavior?

The GridSplitter allows users to manually resize the navigation pane width,
and the navigation menu automatically adjusts its width accordingly while
staying left-aligned. The initial width is controlled by the OpenPaneLength property.

  • Add IsGridSplitterEnabled dependency property to enable/disable GridSplitter
  • Implement GridSplitter between navigation pane and content area
  • Ensure navigation pane width resizes with GridSplitter while maintaining left alignment
  • Manage PaneColumn width through code-behind using OpenPaneLength as initial width
  • Remove ColumnDefinition width animations from VisualStateManager to prevent exceptions
  • Add proper event handler cleanup and thread-safe updates using Dispatcher
  • Handle GridLength safely with IsAbsolute checks before accessing Value property
  • Default value is false to maintain backward compatibility

Other information

2025-12-14_01h06_52.mp4

@github-actions github-actions Bot added controls Changes to the appearance or logic of custom controls. styles Topic is related to styles PR Pull request navigation Changes to navigation related controls. gallery WPF UI Gallery dotnet release labels Dec 13, 2025
@Nuklon

Nuklon commented Jan 6, 2026

Copy link
Copy Markdown
Collaborator

This destroys the navigation animations and makes the search box collapse extremely ugly.

@pomianowski
pomianowski marked this pull request as draft January 10, 2026 14:05
@pomianowski pomianowski added the help_wanted Extra attention is needed label Jan 10, 2026
@Koichi-Kobayashi

Koichi-Kobayashi commented Jan 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@Nuklon

Sorry about that.
I previously posted the following, but the video was incorrect. I’ll double-check it. (It seems the existing Gallery was on the right.)

I recorded a video of the part where the navigation seems to be broken.

The version overlaid on the right is the one I modified, and I noticed the following two issues.
Could you please confirm whether my understanding is correct?

  • When clicking the hamburger menu to close the navigation, it shifts slightly upward.
  • The open/close animation of the navigation has become slower.
2026-01-12_22h25_59.mp4

@Koichi-Kobayashi
Add GridSplitter support to LeftNavigationViewTemplate
924a368 
- Add IsGridSplitterEnabled dependency property to enable/disable GridSplitter
- Implement GridSplitter between navigation pane and content area
- Ensure navigation pane width resizes with GridSplitter while maintaining left alignment
- Manage PaneColumn width through code-behind using OpenPaneLength as initial width
- Remove ColumnDefinition width animations from VisualStateManager to prevent exceptions
- Add proper event handler cleanup and thread-safe updates using Dispatcher
- Handle GridLength safely with IsAbsolute checks before accessing Value property
- Default value is false to maintain backward compatibility
@Koichi-Kobayashi
Fix NavigationToggleButton to properly update pane width when toggling
03f58d8 
- Add UpdatePaneColumnWidthForToggle method to handle pane open/close events
- Call UpdatePaneColumnWidthForToggle from OnPaneOpened and OnPaneClosed
- Ensure PaneColumn width updates correctly when toggle button is clicked
- Preserve manually resized width when toggling pane open/closed
- Fix issue where pane width was not updating when using GridSplitter
@Koichi-Kobayashi
Fix NavigationView animations while preserving pane resizing
2e958dc 
PR lepoco#1603 replaced the animated PaneGrid width with immediate column width
updates. This made pane transitions snap while the search box continued its
existing fade and visibility transitions, producing an uneven collapse.

Restore pane and search transition coordination:
- Restore PaneGrid.Width DoubleAnimations in the existing visual states,
  retaining the 160 ms duration and 0.4 acceleration ratio.
- Configure animation endpoints from the current width and the stored resize
  target so resized panes animate back to their selected width.
- Start interrupted width and opacity transitions from their current values
  to support rapid repeated opening and closing.
- Keep the existing search visibility transitions and compact pane margins.

Preserve GridSplitter behavior and binding safety:
- Track the resized pane width separately from OpenPaneLength and bind the
  pane's base width to a private dependency property.
- Let the splitter control column widths during a drag, then return the pane
  column to Auto sizing so visual states can animate PaneGrid.Width.
- Preserve resized widths across pane toggles, splitter enablement changes,
  and template replacement; honor explicit OpenPaneLength changes.
- Handle canceled drags and keyboard resizing, and disable resizing during
  pane transitions or unsupported display modes.
- Detach resize and storyboard handlers before template reapplication and
  clone storyboards before configuring instance-specific animation targets.
- Remove deferred width updates, property descriptors, and blanket exception
  suppression from the previous resize implementation.

Center the splitter interaction area on the visible content border:
- Translate the 4 DIP hit area to the center of the 1 DIP border, accounting
  for FrameMargin.Left without changing the resize columns or pane layout.
- Place the splitter above the content border so both sides of the centered
  hit area receive mouse input.

Add regression coverage for pane/search transitions, interrupted toggles,
width restoration, binding preservation, template replacement, other display
modes, canceled drags, keyboard resizing, and centered hit testing at multiple
pane widths and frame margins. Add Gallery integration coverage using actual
mouse drags to expand and shrink the pane and verify width restoration after
closing and reopening it.

Validation:
- Debug solution build passed with existing dependency/analyzer warnings.
- All 21 unit tests passed.
- Both Gallery mouse-drag integration cases passed.
- git diff --check passed.

Visual animation smoothness, manual interaction feel, and additional DPI,
theme, and window-resize combinations still require manual verification.
@Koichi-Kobayashi

Koichi-Kobayashi commented Oct 11, 2026

Copy link
Copy Markdown
Contributor Author

@Nuklon
Thanks for pointing this out. I have updated the implementation to restore the navigation animations while keeping GridSplitter resizing.

The previous implementation changed the pane column width immediately while the search box continued its fade and visibility transitions. The updated implementation restores PaneGrid.Width animations through the existing VisualStateManager, retaining the original 160 ms duration and acceleration ratio.

The resized width is stored separately from OpenPaneLength, so closing and reopening the pane restores the user's selected width without replacing the OpenPaneLength binding. Interrupted width and opacity transitions start from their current values to support rapid toggling.

I also centered the splitter's hit area on the visible content border and ensured that both sides receive mouse input.

Validation:

  • Debug solution build passed.
  • All 21 unit tests passed.
  • Both Gallery integration tests passed using actual mouse drags to expand and shrink the pane, followed by closing and reopening it.
  • Mouse interaction was also manually verified in the Gallery with both light and dark themes and different DPI settings.

The automated tests cover animation configuration, width restoration, binding preservation, template replacement, keyboard resizing, and hit testing.

The branch has also been rebased onto upstream/main.

@Koichi-Kobayashi
Koichi-Kobayashi marked this pull request as ready for review October 11, 2026 07:55
@Koichi-Kobayashi Koichi-Kobayashi mentioned this pull request Oct 23, 2026
Open
1 of 7 tasks

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pomianowski pomianowski Awaiting requested review from pomianowski pomianowski is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@Nuklon Nuklon

Labels

controls Changes to the appearance or logic of custom controls. dotnet gallery WPF UI Gallery help_wanted Extra attention is needed navigation Changes to navigation related controls. PR Pull request release styles Topic is related to styles

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Koichi-Kobayashi @Nuklon @pomianowski