Grid-Based Sliding Panel Content Misalignment When Visibility Changes Programmatically

[BrundhaVelusamy]

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

Video: Demo

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.

SlingPanel_Workaround.mp4

[Marnie-Majait]

This issue has been verified Visual Studio Code 1.96.4 (9.0.30 & 9.0.22 & 9.0.0). Can repro this issue on iOS and macOS platform.

[KarthikRajaKalaimani]

Hi @BrundhaVelusamy ,

The VerticalStackLayout requires an additional layout pass. As a workaround to ensure proper rendering, please call the InvalidateMeasure method of the VerticalStackLayout after the visibility of the DrawerContent changes from false to true.

private void UpdateDrawerPosition()
{
var drawerTranslation = _isDrawerOpen ? 0 : -250;
DrawerContent.TranslateTo(drawerTranslation, 0, 250, Easing.CubicOut);
if(DeviceInfo.Platform == DevicePlatform.MacCatalyst)
{
if(layout.IsVisible)
(layout as IView).InvalidateMeasure();
}
}