Skip to content
12 changes: 12 additions & 0 deletions src/Controls/src/Core/Handlers/Shell/ShellHandler.Windows.cs
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ private void OnLoaded(object sender, UI.Xaml.RoutedEventArgs e)
{
UpdateValue(nameof(Shell.FlyoutIcon));
UpdateValue(nameof(Shell.FlyoutBackground));
UpdateValue(nameof(Shell.FlyoutBackgroundImage));
}

protected override void DisconnectHandler(ShellView platformView)
Expand Down Expand Up @@ -93,6 +94,7 @@ void OnPaneOpening(UI.Xaml.Controls.NavigationView sender, object args)
{
UpdateValue(nameof(Shell.FlyoutBackground));
UpdateValue(nameof(Shell.FlyoutVerticalScrollMode));
UpdateValue(nameof(Shell.FlyoutBackgroundImage));
PlatformView.UpdateFlyoutBackdrop();
PlatformView.UpdateFlyoutPosition();
VirtualView.FlyoutIsPresented = true;
Expand Down Expand Up @@ -127,6 +129,16 @@ public static void MapFlyoutBackground(ShellHandler handler, Shell view)
view.FlyoutBackgroundColor?.AsPaint());
}

//TODO: Make it public in .NET 10.
internal static void MapFlyoutBackgroundImage(ShellHandler handler, Shell view)
{
var provider = handler.GetRequiredService<IImageSourceServiceProvider>();
if (handler?.PlatformView is not null && provider is not null)
{
handler.PlatformView.UpdateBackgroundImageSourceAsync(view.FlyoutBackgroundImage, provider, view.FlyoutBackgroundImageAspect).FireAndForget();
}
}

public static void MapFlyoutIcon(ShellHandler handler, Shell view)
{
var flyoutIcon = view.FlyoutIcon;
Expand Down
2 changes: 2 additions & 0 deletions src/Controls/src/Core/Handlers/Shell/ShellHandler.cs
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ public partial class ShellHandler
[nameof(Shell.FlyoutIcon)] = MapFlyoutIcon,
[nameof(Shell.FlyoutContentTemplate)] = MapFlyout,
[nameof(Shell.FlowDirection)] = MapFlowDirection,
[nameof(Shell.FlyoutBackgroundImage)] = MapFlyoutBackgroundImage,
[nameof(Shell.FlyoutBackgroundImageAspect)] = MapFlyoutBackgroundImage,
#endif
};

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue21472.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
namespace Maui.Controls.Sample.Issues;

[Issue(IssueTracker.Github, 21472, "Shell FlyoutBackgroundImage doesn't shown", PlatformAffected.UWP)]
public class Issue21472 : TestShell
{
protected override void Init()
{
var page = new ContentPage();
this.BindingContext = this;

FlyoutBackgroundImage = "dotnet_bot.png";
AddFlyoutItem(page, "Flyout Item");

var button = new Button
{
Text = "RemoveFlyoutBackground",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
AutomationId = "button"
};

button.Clicked += (sender, e) =>
{
Shell.Current.FlyoutBackgroundImage = null;
};

page.Content = button;

FlyoutContentTemplate = new DataTemplate(() =>
{
var stackLayout = new StackLayout();

var closeButton = new Button
{
Text = "Close Flyout",
AutomationId = "CloseFlyoutButton",
Margin = new Thickness(20),
HorizontalOptions = LayoutOptions.Center
};

closeButton.Clicked += (sender, e) =>
{
Shell.Current.FlyoutIsPresented = false;
};

stackLayout.Add(closeButton);
return stackLayout;
});
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues;
public class Issue21472 : _IssuesUITest
{
public Issue21472(TestDevice testDevice) : base(testDevice)
{
}
public override string Issue => "Shell FlyoutBackgroundImage doesn't shown";

[Test, Order(1)]
[Category(UITestCategories.Shell)]
public void VerifyShellFlyoutBackgroundImage()
{
App.WaitForElement("button");
App.ShowFlyout();
App.WaitForElement("CloseFlyoutButton");
VerifyScreenshot();
App.Tap("CloseFlyoutButton");
}

[Test, Order(2)]
[Category(UITestCategories.Shell)]
public void VerifyShellFlyoutBackgroundImageSetNull()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pending snapshot on Mac and Windows. Available in the latest build.
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pending Snapshots were added.

{
App.WaitForElement("button");
App.Tap("button");
App.ShowFlyout();
VerifyScreenshot();
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions src/Core/src/Platform/Windows/NavigationViewExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,42 @@ public static void UpdateFlyoutWidth(this MauiNavigationView navigationView, IFl
//handler.PlatformView.OpenPaneLength = handler.PlatformView.TemplateSettings.OpenPaneWidth;
}

internal static async Task UpdateBackgroundImageSourceAsync(this MauiNavigationView navigationView, IImageSource? imageSource, IImageSourceServiceProvider? provider, Aspect aspect)
{
if (provider is null || imageSource is null)
{
return;
}
var paneContentGrid = navigationView.PaneContentGrid;
if (paneContentGrid is null)
{
return;
}

var service = provider.GetRequiredImageSourceService(imageSource);
var nativeImageSource = await service.GetImageSourceAsync(imageSource);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if nativeImageSource is null at this point, can directly set the pane background to null.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have updated the requested changes


if (nativeImageSource is null)
{
paneContentGrid.Background = null;
return;
}

var BackgroundImage = new ImageBrush
{
ImageSource = nativeImageSource?.Value,
Stretch = aspect switch
{
Aspect.AspectFit => Stretch.Uniform,
Aspect.AspectFill => Stretch.UniformToFill,
Aspect.Fill => Stretch.Fill,
_ => Stretch.None
}
};

paneContentGrid.Background = BackgroundImage;
}

public static async Task UpdateFlyoutIconAsync(this MauiNavigationView navigationView, IImageSource? imageSource, IImageSourceServiceProvider? provider)
{
var togglePaneButton = navigationView.TogglePaneButton;
Expand Down
Loading