dotnet / dotnet/maui

Grid-Based Sliding Panel Content Misalignment When Visibility Changes Programmatically

Open
#27,434 5 comments 1 reaction 0 assignees View on GitHub
area-layout has-workaround p/2 partner/syncfusion platform/ios platform/macos s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 14h
Merged PRs (30d)
296

Description

### Description

When implementing a custom NavigationDrawer using a Grid in .NET MAUI, the content of the drawer layout visibility is set to false initially, and then programmatically changed to true, causing content misalignment issues. Specifically:

- The controls inside the DrawerContent do not render properly or remain invisible.
- On runtime, updating the width, height, or any other properties of the affected controls after setting visibility to true makes them visible.

This behavior suggests a potential layout invalidation issue when toggling visibility programmatically.

Sample: [DrawerCustomSample.zip](https://github.com/user-attachments/files/18559752/DrawerCustomSample.zip)

Video: [Demo](https://github.com/user-attachments/assets/562256c1-0f2b-4aee-857d-d07521b4bd73)

### Steps to Reproduce

1. Run the sample mentioned in the description.
2. Click the 'ToggleDrawer' button. The drawer will open with no content, as the visibility of the content is set as false initially.
3. Again click the 'ToggleDrawer' button. The drawer will close.
4. Click the "ChangeVisibility" button to programmatically set the DrawerContent visibility to true.
5. Again click the 'ToggleDrawer' button. The drawer will open.
6. Observe that the controls inside the sliding panel are either misaligned or not visible.
7. Manually update any layout property (e.g., WidthRequest or HeightRequest) to force a refresh, which makes the controls render correctly.

### Link to public reproduction project repository

_No response_

### Version with bug

9.0.30 SR3

### Is this a regression from previous behavior?

Not sure, did not test other versions

### Last version that worked well

_No response_

### Affected platforms

iOS, macOS

### Affected platform versions

_No response_

### Did you find any workaround?

If the DrawerContent's visibility is set to true while the drawer is open, the controls align and render correctly.

[Reference Demo](https://github.com/user-attachments/assets/8f879e43-0f56-4b86-9f88-d21854dc5164)

Contributor guide

Open the contributing guide

Research direction

Start by running DrawerCustomSample.zip and following the ToggleDrawer and ChangeVisibility steps on iOS or macOS. Trace the DrawerContent visibility change and layout refresh behavior; done means the sliding panel controls render visibly and remain aligned after visibility is changed programmatically.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.