Grid-Based Sliding Panel Content Misalignment When Visibility Changes Programmatically
- 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
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