diff --git a/src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs b/src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs index a013be611fbf..af998ecf8746 100644 --- a/src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs +++ b/src/Controls/src/Core/FlyoutPage/FlyoutPage.Mapper.cs @@ -12,6 +12,9 @@ public partial class FlyoutPage #if IOS FlyoutViewHandler.Mapper.ReplaceMapping(nameof(PlatformConfiguration.iOSSpecific.Page.PrefersHomeIndicatorAutoHiddenProperty), MapPrefersHomeIndicatorAutoHiddenProperty); FlyoutViewHandler.Mapper.ReplaceMapping(nameof(PlatformConfiguration.iOSSpecific.Page.PrefersStatusBarHiddenProperty), MapPrefersPrefersStatusBarHiddenProperty); +#endif +#if WINDOWS + FlyoutViewHandler.Mapper.ReplaceMapping(nameof(PlatformConfiguration.WindowsSpecific.FlyoutPage.CollapsedPaneWidthProperty), MapCollapsedPaneWidth); #endif } @@ -31,5 +34,16 @@ internal static void MapPrefersPrefersStatusBarHiddenProperty(IFlyoutViewHandler handler.UpdateValue(nameof(PlatformConfiguration.iOSSpecific.Page.PrefersStatusBarHiddenProperty)); } #endif + +#if WINDOWS + internal static void MapCollapsedPaneWidth(IFlyoutViewHandler handler, IFlyoutView view) + { + if (view is BindableObject bindable && handler.PlatformView is Microsoft.Maui.Platform.RootNavigationView navigationView) + { + var collapsedPaneWidth = PlatformConfiguration.WindowsSpecific.FlyoutPage.GetCollapsedPaneWidth(bindable); + navigationView.CompactPaneLength = collapsedPaneWidth; + } + } +#endif } -} +} \ No newline at end of file diff --git a/src/Controls/src/Core/PlatformConfiguration/WindowsSpecific/FlyoutPage.cs b/src/Controls/src/Core/PlatformConfiguration/WindowsSpecific/FlyoutPage.cs index a54a3c3ab53f..9bf29c194701 100644 --- a/src/Controls/src/Core/PlatformConfiguration/WindowsSpecific/FlyoutPage.cs +++ b/src/Controls/src/Core/PlatformConfiguration/WindowsSpecific/FlyoutPage.cs @@ -67,7 +67,7 @@ public static IPlatformElementConfiguration UsePartialCol /// Bindable property for attached property CollapsedPaneWidth. public static readonly BindableProperty CollapsedPaneWidthProperty = BindableProperty.CreateAttached("CollapsedPaneWidth", typeof(double), - typeof(FlyoutPage), 48d, validateValue: (bindable, value) => (double)value >= 0); + typeof(FlyoutPage), 48d, validateValue: (bindable, value) => (double)value >= 0, propertyChanged : OnCollapsedPaneWidthChanged); /// Gets the width of the collapsed flyout pane on Windows. /// The element to get the collapsed pane width from. @@ -77,6 +77,14 @@ public static double GetCollapsedPaneWidth(BindableObject element) return (double)element.GetValue(CollapsedPaneWidthProperty); } + static void OnCollapsedPaneWidthChanged(BindableObject bindable, object oldValue, object newValue) + { + if (bindable is Microsoft.Maui.Controls.FlyoutPage flyoutPage && flyoutPage.Handler is not null) + { + flyoutPage.Handler.UpdateValue(nameof(CollapsedPaneWidthProperty)); + } + } + /// Sets the width of the collapsed flyout pane on Windows. /// The element to set the collapsed pane width on. /// The collapsed pane width in device-independent units. diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue33785.cs b/src/Controls/tests/TestCases.HostApp/Issues/Issue33785.cs new file mode 100644 index 000000000000..de63c2ad835d --- /dev/null +++ b/src/Controls/tests/TestCases.HostApp/Issues/Issue33785.cs @@ -0,0 +1,76 @@ +using Microsoft.Maui.Controls.PlatformConfiguration; +using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific; + +namespace Maui.Controls.Sample.Issues; + +[Issue(IssueTracker.Github, 33785, "[Windows] FlyoutPage CollapsedPaneWidth Not Working", PlatformAffected.UWP)] +public class Issue33785 : TestFlyoutPage +{ + Microsoft.Maui.Controls.Label _label; + protected override void Init() + { + this.On().SetCollapseStyle(CollapseStyle.Partial); + this.On().CollapsedPaneWidth(50); + + // 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 = "Change", + AutomationId = "FlyoutItem", + HorizontalOptions = LayoutOptions.Start, + VerticalOptions = LayoutOptions.Center + }; + page1Button.Clicked += (s, e) => + { + this.On().CollapsedPaneWidth(100); + _label.Text = "CollapsedPaneWidth set to 100"; + }; + + flyoutPage.Content = new VerticalStackLayout + { + Children = { page1Button } + }; + + // Create the detail content + var detailPage = new ContentPage + { + Title = "Detail", + BackgroundColor = Colors.LightYellow + }; + + _label = new Microsoft.Maui.Controls.Label + { + Text = "Test for CollapsedPaneWidth", + AutomationId = "CollapsedPaneLabel", + HorizontalOptions = LayoutOptions.Center, + HorizontalTextAlignment = TextAlignment.Center, + }; + + detailPage.Content = new VerticalStackLayout + { + Children = { + new Microsoft.Maui.Controls.Label + { + Text = "Welcome to .NET MAUI!", + TextColor = Colors.Black, + HorizontalOptions = LayoutOptions.Center, + VerticalOptions = LayoutOptions.Center + }, + _label + } + }; + + // Set the flyout and detail pages + Flyout = flyoutPage; + Detail = detailPage; + } +} diff --git a/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue33785.cs b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue33785.cs new file mode 100644 index 000000000000..21694baecd46 --- /dev/null +++ b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue33785.cs @@ -0,0 +1,23 @@ +#if WINDOWS //CollapsedPaneWidth is Windows Specific API +using NUnit.Framework; +using UITest.Appium; +using UITest.Core; + +namespace Microsoft.Maui.TestCases.Tests.Issues; +public class Issue33785 : _IssuesUITest +{ + public Issue33785(TestDevice device) : base(device) { } + + public override string Issue => "[Windows] FlyoutPage CollapsedPaneWidth Not Working"; + [Test] + [Category(UITestCategories.FlyoutPage)] + public void VerifyFlyoutPageCollapsedPaneWidth() + { + App.WaitForElement("CollapsedPaneLabel"); + App.TapFlyoutPageIcon(); + App.Tap("FlyoutItem"); + App.TapFlyoutPageIcon(); + VerifyScreenshot(); + } +} +#endif \ No newline at end of file