[Windows] Fix Flyout Page SetCollapseStyle doesn't have any change #29927

devanathan-vaithiyanathan · 2025-06-11T10:10:16Z

Note

Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!

Issue details

FlyoutPage on Windows did not update its layout when the CollapseStyle property changed at runtime.

Description of Change

This update enables dynamic support for the CollapseStyle property in FlyoutPage on Windows. It allows the flyout pane to update at runtime when the property changes,

Issues Fixed

Fixes #18200

Tested the behavior in the following platforms.

Windows

Before	After
Windows Without-Fix.mp4	Windows With-Fix.mp4

dotnet-policy-service · 2025-06-11T10:10:41Z

Hey there @@devanathan-vaithiyanathan! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

jsuarezruiz · 2025-06-11T10:33:12Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-06-11T10:33:25Z

Azure Pipelines successfully started running 1 pipeline(s).

jsuarezruiz · 2025-06-12T06:02:30Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue18200.cs

@@ -0,0 +1,29 @@
+# if TEST_FAILS_ON_ANDROID && TEST_FAILS_ON_CATALYST && TEST_FAILS_ON_IOS  // It's a Windows specific API issue, so restricting the other platforms


Because is a platform specific, here can use directly #if WINDOWS. Are not failing on other platforms, just have not sense.

@jsuarezruiz , Thanks for pointing out. I have modified the changes

github-actions · 2025-12-09T08:13:54Z

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/dotnet/maui/main/eng/scripts/get-maui-pr.sh | bash -s -- 29927

Or

Run remotely in PowerShell:

iex "& { $(irm https://raw.githubusercontent.com/dotnet/maui/main/eng/scripts/get-maui-pr.ps1) } 29927"

Copilot

Pull request overview

This PR fixes a Windows-specific issue where changing the CollapseStyle property on a FlyoutPage at runtime had no effect. The fix enables dynamic updates to the flyout pane's collapse behavior by adding a property changed callback and mapper implementation.

Key Changes

Added runtime support for CollapseStyle property changes in Windows FlyoutPage
Implemented property change notification system via OnCollapseStylePropertyChanged
Added Windows-specific mapper logic to translate CollapseStyle values to WinUI PaneDisplayMode

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
src/Controls/src/Core/PlatformConfiguration/WindowsSpecific/FlyoutPage.cs	Added `propertyChanged` callback to `CollapseStyleProperty` to trigger handler updates when value changes at runtime
src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs	Added Windows-specific mapper for `CollapseStyleProperty` that sets WinUI `NavigationView.PaneDisplayMode` based on `CollapseStyle` value
src/Controls/tests/TestCases.HostApp/Issues/Issue18200.cs	Created test page demonstrating dynamic `CollapseStyle` switching with button toggle functionality
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue18200.cs	Added UI test to verify flyout collapse behavior changes when `CollapseStyle` is toggled

Copilot · 2025-12-09T08:24:28Z

src/Controls/tests/TestCases.HostApp/Issues/Issue18200.cs

@@ -0,0 +1,79 @@
+using Microsoft.Maui.Controls.PlatformConfiguration;
+using  Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;


There's an extra space in the using statement that creates inconsistent formatting with other using statements in the file.

Suggested change

using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;

using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;

Copilot · 2025-12-09T08:24:29Z

src/Controls/tests/TestCases.HostApp/Issues/Issue18200.cs

+
+namespace Maui.Controls.Sample.Issues;
+
+[Issue(IssueTracker.Github, 18200, "Flyout Page SetCollapseStyle doesn't have any change", PlatformAffected.UWP)]


The PlatformAffected.UWP value is outdated. MAUI uses Windows (WinUI3) instead of UWP (Universal Windows Platform). This should be PlatformAffected.Windows or simply PlatformAffected.All if testing on all platforms is acceptable.

Suggested change

[Issue(IssueTracker.Github, 18200, "Flyout Page SetCollapseStyle doesn't have any change", PlatformAffected.UWP)]

[Issue(IssueTracker.Github, 18200, "Flyout Page SetCollapseStyle doesn't have any change", PlatformAffected.Windows)]

Copilot · 2025-12-09T08:24:29Z

src/Controls/tests/TestCases.HostApp/Issues/Issue18200.cs

+    {
+		this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(CollapseStyle.Partial);
+
+        // Set the flyout page properties
+        FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;
+
+        // Create the flyout content
+        var flyoutPage = new ContentPage
+        {
+            Title = "Master",
+            BackgroundColor = Colors.Blue
+        };
+
+        var page1Button = new Button
+        {
+            Text = "Page1",
+			AutomationId = "FlyoutItem",
+            HorizontalOptions = LayoutOptions.Start,
+            VerticalOptions = LayoutOptions.Center
+        };
+
+        flyoutPage.Content = new VerticalStackLayout
+        {
+            Children = { page1Button }
+        };
+
+        // Create the detail content
+        var detailPage = new ContentPage
+        {
+            Title = "Detail",
+            BackgroundColor = Colors.LightYellow
+        };
+
+        _button = new Button
+        {
+            Text = "Change Collapse Style",
+            AutomationId = "CollapseStyleButton",
+        };
+        _button.Clicked += OnCollapseStyleValueChanged;
+
+        detailPage.Content = new VerticalStackLayout
+        {
+            Children = {
+                new Microsoft.Maui.Controls.Label
+                {
+                    Text = "Welcome to .NET MAUI!",
+                    TextColor = Colors.Black,
+                    HorizontalOptions = LayoutOptions.Center,
+                    VerticalOptions = LayoutOptions.Center
+                },
+                _button
+            }
+        };
+
+        // Set the flyout and detail pages
+        Flyout = flyoutPage;
+        Detail = detailPage;
+    }
+
+    void OnCollapseStyleValueChanged(object sender, EventArgs e)
+    {
+		var currentCollapseStyle = this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().GetCollapseStyle();
+		var newCollapseStyle = currentCollapseStyle == CollapseStyle.Full 
+			? CollapseStyle.Partial 
+			: CollapseStyle.Full;
+
+		this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(newCollapseStyle);
+    }


[nitpick] According to the MAUI coding guidelines, file indentation should use tabs, but this file uses spaces for indentation (4 spaces). While this might be consistent within the immediate context, the repository standard is to use tabs. Consider running dotnet format to ensure consistent formatting.

Suggested change

{

this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(CollapseStyle.Partial);

// Set the flyout page properties

FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;

// Create the flyout content

var flyoutPage = new ContentPage

{

Title = "Master",

BackgroundColor = Colors.Blue

};

var page1Button = new Button

{

Text = "Page1",

AutomationId = "FlyoutItem",

HorizontalOptions = LayoutOptions.Start,

VerticalOptions = LayoutOptions.Center

};

flyoutPage.Content = new VerticalStackLayout

{

Children = { page1Button }

};

// Create the detail content

var detailPage = new ContentPage

{

Title = "Detail",

BackgroundColor = Colors.LightYellow

};

_button = new Button

{

Text = "Change Collapse Style",

AutomationId = "CollapseStyleButton",

};

_button.Clicked += OnCollapseStyleValueChanged;

detailPage.Content = new VerticalStackLayout

{

Children = {

new Microsoft.Maui.Controls.Label

{

Text = "Welcome to .NET MAUI!",

TextColor = Colors.Black,

HorizontalOptions = LayoutOptions.Center,

VerticalOptions = LayoutOptions.Center

},

_button

}

};

// Set the flyout and detail pages

Flyout = flyoutPage;

Detail = detailPage;

}

void OnCollapseStyleValueChanged(object sender, EventArgs e)

{

var currentCollapseStyle = this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().GetCollapseStyle();

var newCollapseStyle = currentCollapseStyle == CollapseStyle.Full

? CollapseStyle.Partial

: CollapseStyle.Full;

this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(newCollapseStyle);

}

{

this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(CollapseStyle.Partial);

// Set the flyout page properties

FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;

// Create the flyout content

var flyoutPage = new ContentPage

{

Title = "Master",

BackgroundColor = Colors.Blue

};

var page1Button = new Button

{

Text = "Page1",

AutomationId = "FlyoutItem",

HorizontalOptions = LayoutOptions.Start,

VerticalOptions = LayoutOptions.Center

};

flyoutPage.Content = new VerticalStackLayout

{

Children = { page1Button }

};

// Create the detail content

var detailPage = new ContentPage

{

Title = "Detail",

BackgroundColor = Colors.LightYellow

};

_button = new Button

{

Text = "Change Collapse Style",

AutomationId = "CollapseStyleButton",

};

_button.Clicked += OnCollapseStyleValueChanged;

detailPage.Content = new VerticalStackLayout

{

Children = {

new Microsoft.Maui.Controls.Label

{

Text = "Welcome to .NET MAUI!",

TextColor = Colors.Black,

HorizontalOptions = LayoutOptions.Center,

VerticalOptions = LayoutOptions.Center

},

_button

}

};

// Set the flyout and detail pages

Flyout = flyoutPage;

Detail = detailPage;

}

void OnCollapseStyleValueChanged(object sender, EventArgs e)

{

var currentCollapseStyle = this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().GetCollapseStyle();

var newCollapseStyle = currentCollapseStyle == CollapseStyle.Full

? CollapseStyle.Partial

: CollapseStyle.Full;

this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(newCollapseStyle);

}

Copilot · 2025-12-09T08:24:30Z

src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs

+			var flyoutLayoutBehavior = (view as FlyoutPage)?.FlyoutLayoutBehavior;
+			if (view is BindableObject bindable && handler.PlatformView is Microsoft.Maui.Platform.RootNavigationView navigationView && flyoutLayoutBehavior is FlyoutLayoutBehavior.Popover)
+			{
+				var collapseStyle = PlatformConfiguration.WindowsSpecific.FlyoutPage.GetCollapseStyle(bindable);
+				switch (collapseStyle)
+				{
+					case PlatformConfiguration.WindowsSpecific.CollapseStyle.Partial:
+						navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftCompact;
+						break;
+					case PlatformConfiguration.WindowsSpecific.CollapseStyle.Full:
+					default:
+						navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftMinimal;
+						break;
+				}
+			}


The pattern used here differs from the iOS platform-specific properties. Looking at the iOS PrefersHomeIndicatorAutoHiddenProperty and PrefersStatusBarHiddenProperty implementations in FlyoutPage.Mapper.cs, those mappers simply call handler.UpdateValue() to trigger the handler's mapper logic.

However, this implementation directly manipulates the PaneDisplayMode property inside MapCollapseStyle. While this works, it bypasses the normal mapper flow and could lead to inconsistencies if UpdatePaneDisplayModeFromFlyoutBehavior is called elsewhere (e.g., when FlyoutBehavior changes), which would reset PaneDisplayMode to LeftMinimal regardless of the CollapseStyle setting.

Consider integrating the CollapseStyle logic into UpdatePaneDisplayModeFromFlyoutBehavior in MauiNavigationView.cs so that it considers both FlyoutBehavior and CollapseStyle when determining the correct PaneDisplayMode. This would ensure the CollapseStyle is respected even when FlyoutBehavior changes at runtime.

Suggested change

var flyoutLayoutBehavior = (view as FlyoutPage)?.FlyoutLayoutBehavior;

if (view is BindableObject bindable && handler.PlatformView is Microsoft.Maui.Platform.RootNavigationView navigationView && flyoutLayoutBehavior is FlyoutLayoutBehavior.Popover)

{

var collapseStyle = PlatformConfiguration.WindowsSpecific.FlyoutPage.GetCollapseStyle(bindable);

switch (collapseStyle)

{

case PlatformConfiguration.WindowsSpecific.CollapseStyle.Partial:

navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftCompact;

break;

case PlatformConfiguration.WindowsSpecific.CollapseStyle.Full:

default:

navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.LeftMinimal;

break;

}

}

handler.UpdateValue(nameof(IFlyoutView.FlyoutBehavior));

Copilot · 2025-12-09T08:24:30Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue18200.cs

@@ -0,0 +1,29 @@
+# if WINDOWS  // It's a Windows specific API issue, so restricting the other platforms


According to the UI Testing Guidelines, platform-specific tests using #if directives should only be used when there's a specific technical limitation. The comment indicates this is a "Windows specific API issue", but CollapseStyle is designed to only affect Windows. Consider whether the test should still run on other platforms (where it would simply not test the CollapseStyle behavior) to ensure the FlyoutPage doesn't break on other platforms when the API is called. If this is truly Windows-only due to the API being Windows-specific by design (not a bug), the current approach is acceptable, but the comment should clarify this is by design, not a limitation.

Copilot · 2025-12-09T08:24:30Z

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue18200.cs

+	public void VerifyFlyoutCollapseStyleBehaviorChanges()
+	{
+		App.WaitForElement("CollapseStyleButton");
+		App.Tap("CollapseStyleButton");
+		App.TapFlyoutPageIcon();
+		App.TapFlyoutPageIcon(); // Close the flyout
+		App.WaitForNoElement("FlyoutItem");
+		App.Tap("CollapseStyleButton");
+		App.WaitForElement("FlyoutItem");
+	}


The test logic has a potential issue: Line 24 waits for "FlyoutItem" to not be present after setting CollapseStyle to Full and tapping twice (open/close). However, in Full collapse mode with a Popover layout, the flyout should be minimally collapsed and still closeable. The test then expects "FlyoutItem" to be visible again after switching back to Partial at line 26, but this seems to test visibility rather than the collapse style behavior.

Consider enhancing the test to verify the actual visual behavior difference between Full and Partial collapse styles, not just whether items are visible after opening/closing. The current test might pass even if CollapseStyle changes aren't working correctly, as long as the flyout opens and closes.

dotnet-policy-service bot added the community ✨ Community Contribution label Jun 11, 2025

dotnet-policy-service bot added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Jun 11, 2025

jsuarezruiz added platform/windows area-controls-flyoutpage FlyoutPage labels Jun 11, 2025

jsuarezruiz suggested changes Jun 12, 2025

View reviewed changes

devanathan-vaithiyanathan marked this pull request as ready for review June 13, 2025 06:55

devanathan-vaithiyanathan requested a review from a team as a code owner June 13, 2025 06:55

devanathan-vaithiyanathan requested review from StephaneDelcroix and tj-devel709 June 13, 2025 06:55

devanathan-vaithiyanathan added 11 commits December 9, 2025 13:43

fix added

05936f1

modified the fix

0358458

propertychanges code added

3c668da

test case added

4689a05

script changes added

bfb844a

test case changes added

5cf5d7d

mapper changes added

875aa05

comments removed

25037e7

access specifier removed

85354d0

test case changes added

e2e9e2f

condition compilation removed

a1ad2f8

devanathan-vaithiyanathan force-pushed the fix-18200 branch from a39ee9a to a1ad2f8 Compare December 9, 2025 08:13

Copilot AI review requested due to automatic review settings December 9, 2025 08:13

Copilot started reviewing on behalf of devanathan-vaithiyanathan December 9, 2025 08:14 View session

Copilot AI reviewed Dec 9, 2025

View reviewed changes

devanathan-vaithiyanathan mentioned this pull request Jan 30, 2026

[Windows] Fix FlyoutPage CollapsedPaneWidth is not working #33786

Open

4 tasks

		@@ -0,0 +1,29 @@
		# if TEST_FAILS_ON_ANDROID && TEST_FAILS_ON_CATALYST && TEST_FAILS_ON_IOS // It's a Windows specific API issue, so restricting the other platforms

		@@ -0,0 +1,79 @@
		using Microsoft.Maui.Controls.PlatformConfiguration;
		using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;


		namespace Maui.Controls.Sample.Issues;

		[Issue(IssueTracker.Github, 18200, "Flyout Page SetCollapseStyle doesn't have any change", PlatformAffected.UWP)]

		@@ -0,0 +1,29 @@
		# if WINDOWS // It's a Windows specific API issue, so restricting the other platforms

[Windows] Fix Flyout Page SetCollapseStyle doesn't have any change #29927

Are you sure you want to change the base?

[Windows] Fix Flyout Page SetCollapseStyle doesn't have any change #29927

Uh oh!

Conversation

devanathan-vaithiyanathan commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue details

Description of Change

Issues Fixed

Uh oh!

dotnet-policy-service bot commented Jun 11, 2025

Uh oh!

jsuarezruiz commented Jun 11, 2025

Uh oh!

azure-pipelines bot commented Jun 11, 2025

Uh oh!

jsuarezruiz Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

devanathan-vaithiyanathan Jun 12, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

devanathan-vaithiyanathan commented Jun 11, 2025 •

edited

Loading