Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
24 changes: 24 additions & 0 deletions src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ public partial class FlyoutPage
#if IOS
FlyoutViewHandler.Mapper.ReplaceMapping<IFlyoutView, IFlyoutViewHandler>(nameof(PlatformConfiguration.iOSSpecific.Page.PrefersHomeIndicatorAutoHiddenProperty), MapPrefersHomeIndicatorAutoHiddenProperty);
FlyoutViewHandler.Mapper.ReplaceMapping<IFlyoutView, IFlyoutViewHandler>(nameof(PlatformConfiguration.iOSSpecific.Page.PrefersStatusBarHiddenProperty), MapPrefersPrefersStatusBarHiddenProperty);
#endif
#if WINDOWS
FlyoutViewHandler.Mapper.ReplaceMapping<IFlyoutView, IFlyoutViewHandler>(nameof(PlatformConfiguration.WindowsSpecific.FlyoutPage.CollapseStyleProperty), MapCollapseStyle);
#endif
}

Expand All @@ -31,5 +34,26 @@ internal static void MapPrefersPrefersStatusBarHiddenProperty(IFlyoutViewHandler
handler.UpdateValue(nameof(PlatformConfiguration.iOSSpecific.Page.PrefersStatusBarHiddenProperty));
}
#endif

#if WINDOWS
internal static void MapCollapseStyle(IFlyoutViewHandler handler, IFlyoutView view)
{
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;
}
}
}
#endif
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,15 @@ public static class FlyoutPage
/// <summary>Bindable property for <see cref="CollapseStyle"/>.</summary>
public static readonly BindableProperty CollapseStyleProperty =
BindableProperty.CreateAttached("CollapseStyle", typeof(CollapseStyle),
typeof(FlyoutPage), CollapseStyle.Full);
typeof(FlyoutPage), CollapseStyle.Full, propertyChanged: OnCollapseStylePropertyChanged);

static void OnCollapseStylePropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
if (bindable is Microsoft.Maui.Controls.FlyoutPage flyoutPage && flyoutPage.Handler is not null)
{
flyoutPage.Handler.UpdateValue(nameof(CollapseStyleProperty));
}
}

/// <include file="../../../../docs/Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific/FlyoutPage.xml" path="//Member[@MemberName='GetCollapseStyle'][1]/Docs/*" />
public static CollapseStyle GetCollapseStyle(BindableObject element)
Expand Down
79 changes: 79 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue18200.cs
Original file line number Diff line number Diff line change
@@ -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)]
public class Issue18200 : TestFlyoutPage
{
Button _button;
protected override void Init()
{
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);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# if WINDOWS // It's a Windows specific API issue, so restricting the other platforms
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues;

public class Issue18200 : _IssuesUITest
{
public Issue18200(TestDevice device)
: base(device)
{ }

public override string Issue => "Flyout Page SetCollapseStyle doesn't have any change";

[Test]
[Category(UITestCategories.FlyoutPage)]
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");
}
}
#endif