Skip to content
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

Wrap Image with a container on Windows so that it is centered with AspectFill #17665

Merged
merged 10 commits into from
Aug 21, 2024
24 changes: 24 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue10645.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
using Microsoft.Maui.Controls;

namespace Maui.Controls.Sample.Issues
{
[Issue(IssueTracker.Github, 10645, "Image is not centered in AspectFill mode", PlatformAffected.UWP)]
public class Issue10645 : TestContentPage
{
protected override void Init()
{
Content =
new Grid()
{
new Image()
{
AutomationId = "AspectFillImage",
Aspect = Microsoft.Maui.Aspect.AspectFill,
WidthRequest = 100,
HeightRequest = 200,
Source = "dotnet_bot.png",
}
};
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
#if WINDOWS
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues
{
public class Issue10645 : _IssuesUITest
{
public Issue10645(TestDevice device) : base(device)
{
}

public override string Issue => "Image is not centered in AspectFill mode";

[Test]
[Category(UITestCategories.ActionSheet)]
public void Issue10645Test()
{
App.WaitForElement("AspectFillImage", timeout: TimeSpan.FromSeconds(4));

VerifyScreenshot();
}
}
}
#endif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 93 additions & 2 deletions src/Core/src/Handlers/Image/ImageHandler.Windows.cs
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,18 @@ namespace Microsoft.Maui.Handlers
{
public partial class ImageHandler : ViewHandler<IImage, WImage>
{
/// <inheritdoc/>
protected override WImage CreatePlatformView() => new WImage();

/// <inheritdoc/>
protected override void ConnectHandler(WImage platformView)
{
platformView.ImageOpened += OnImageOpened;

base.ConnectHandler(platformView);
}

/// <inheritdoc/>
protected override void DisconnectHandler(WImage platformView)
{
platformView.ImageOpened -= OnImageOpened;
Expand All @@ -25,25 +28,113 @@ protected override void DisconnectHandler(WImage platformView)
SourceLoader.Reset();
}

/// <inheritdoc/>
public override bool NeedsContainer =>
VirtualView?.Background != null ||
VirtualView?.Aspect == Aspect.AspectFill ||
base.NeedsContainer;

/// <inheritdoc/>
protected override void SetupContainer()
{
base.SetupContainer();

// VerticalAlignment only works when the child's Height is Auto
PlatformView.Height = Primitives.Dimension.Unset;

UpdateValue(nameof(IView.Height));
UpdateValue(nameof(IView.Width));
}

/// <inheritdoc/>
protected override void RemoveContainer()
{
base.RemoveContainer();

UpdateValue(nameof(IView.Height));
UpdateValue(nameof(IView.Width));
}

/// <summary>
/// Maps the abstract <see cref="IView.Height"/> property to the platform-specific implementations.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="view">The associated <see cref="Image"/> instance.</param>
public static void MapHeight(IImageHandler handler, IImage view)
{
// VerticalAlignment only works when the container's Height is set and the child's Height is Auto. The child's Height
// is set to Auto when the container is introduced.
if (handler.ContainerView is FrameworkElement container)
{
container.Height = view.Height;
handler.PlatformView.Height = Primitives.Dimension.Unset;
}
else
{
ViewHandler.MapHeight(handler, view);
jsuarezruiz marked this conversation as resolved.
Show resolved Hide resolved
}
}

/// <summary>
/// Maps the abstract <see cref="IView.Width"/> property to the platform-specific implementations.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="view">The associated <see cref="Image"/> instance.</param>
public static void MapWidth(IImageHandler handler, IImage view)
{
if (handler.ContainerView is FrameworkElement container)
{
container.Width = view.Width;
}
else
{
ViewHandler.MapWidth(handler, view);
}
}

/// <summary>
/// Maps the abstract <see cref="IView.Background"/> property to the platform-specific implementations.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="image">The associated <see cref="Image"/> instance.</param>
public static void MapBackground(IImageHandler handler, IImage image)
{
handler.UpdateValue(nameof(IViewHandler.ContainerView));
handler.ToPlatform().UpdateBackground(image);
}

public static void MapAspect(IImageHandler handler, IImage image) =>
/// <summary>
/// Maps the abstract <see cref="IImage.Aspect"/> property to the platform-specific implementations.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="image">The associated <see cref="Image"/> instance.</param>
public static void MapAspect(IImageHandler handler, IImage image)
{
handler.UpdateValue(nameof(IViewHandler.ContainerView));
handler.PlatformView?.UpdateAspect(image);
}

/// <summary>
/// Maps the abstract <see cref="IImageSourcePart.IsAnimationPlaying"/> property to the platform-specific implementations.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="image">The associated <see cref="Image"/> instance.</param>
public static void MapIsAnimationPlaying(IImageHandler handler, IImage image) =>
handler.PlatformView?.UpdateIsAnimationPlaying(image);

/// <summary>
/// Maps the abstract <see cref="IImageSourcePart.Source"/> property to the platform-specific implementations.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="image">The associated <see cref="Image"/> instance.</param>
public static void MapSource(IImageHandler handler, IImage image) =>
MapSourceAsync(handler, image).FireAndForget(handler);

/// <summary>
/// Maps the abstract <see cref="IImageSourcePart.Source"/> property to the platform-specific implementations as an asynchronous operation.
/// </summary>
/// <param name="handler">The associated handler.</param>
/// <param name="image">The associated <see cref="Image"/> instance.</param>
public static Task MapSourceAsync(IImageHandler handler, IImage image) =>
handler.SourceLoader.UpdateImageSourceAsync();

Expand All @@ -66,4 +157,4 @@ public override void SetImageSource(ImageSource? platformImage)
}
}
}
}
}
4 changes: 4 additions & 0 deletions src/Core/src/Handlers/Image/ImageHandler.cs
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ public partial class ImageHandler : IImageHandler
{
#if __ANDROID__ || WINDOWS || TIZEN
[nameof(IImage.Background)] = MapBackground,
#endif
#if WINDOWS
[nameof(IImage.Height)] = MapHeight,
[nameof(IImage.Width)] = MapWidth,
#endif
[nameof(IImage.Aspect)] = MapAspect,
[nameof(IImage.IsAnimationPlaying)] = MapIsAnimationPlaying,
Expand Down
7 changes: 7 additions & 0 deletions src/Core/src/Platform/Windows/ImageViewExtensions.cs
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
#nullable enable
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media.Imaging;
using WImage = Microsoft.UI.Xaml.Controls.Image;

Expand All @@ -14,6 +15,12 @@ public static void Clear(this WImage imageView)
public static void UpdateAspect(this WImage imageView, IImage image)
{
imageView.Stretch = image.Aspect.ToStretch();

if (image.Aspect == Aspect.AspectFill)
{
imageView.VerticalAlignment = VerticalAlignment.Center;
imageView.HorizontalAlignment = HorizontalAlignment.Center;
}
}

public static void UpdateIsAnimationPlaying(this WImage imageView, IImageSourcePart image)
Expand Down
4 changes: 4 additions & 0 deletions src/Core/src/PublicAPI/net-windows/PublicAPI.Unshipped.txt
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ Microsoft.Maui.SizeRequest.Equals(Microsoft.Maui.SizeRequest other) -> bool
Microsoft.Maui.SoftInputExtensions
override Microsoft.Maui.Handlers.ContentViewHandler.DisconnectHandler(Microsoft.Maui.Platform.ContentPanel! platformView) -> void
override Microsoft.Maui.Handlers.ImageHandler.ConnectHandler(Microsoft.UI.Xaml.Controls.Image! platformView) -> void
override Microsoft.Maui.Handlers.ImageHandler.RemoveContainer() -> void
override Microsoft.Maui.Handlers.ImageHandler.SetupContainer() -> void
override Microsoft.Maui.Handlers.MenuFlyoutHandler.DisconnectHandler(Microsoft.UI.Xaml.Controls.MenuFlyout! platformView) -> void
override Microsoft.Maui.Layouts.FlexBasis.Equals(object? obj) -> bool
override Microsoft.Maui.Layouts.FlexBasis.GetHashCode() -> int
Expand All @@ -64,6 +66,8 @@ static Microsoft.Maui.GridLength.operator ==(Microsoft.Maui.GridLength left, Mic
static Microsoft.Maui.Handlers.EditorHandler.MapIsSpellCheckEnabled(Microsoft.Maui.Handlers.IEditorHandler! handler, Microsoft.Maui.IEditor! editor) -> void
static Microsoft.Maui.Handlers.EntryHandler.MapIsSpellCheckEnabled(Microsoft.Maui.Handlers.IEntryHandler! handler, Microsoft.Maui.IEntry! entry) -> void
static Microsoft.Maui.Handlers.LayoutHandler.MapInputTransparent(Microsoft.Maui.ILayoutHandler! handler, Microsoft.Maui.ILayout! layout) -> void
static Microsoft.Maui.Handlers.ImageHandler.MapHeight(Microsoft.Maui.Handlers.IImageHandler! handler, Microsoft.Maui.IImage! view) -> void
static Microsoft.Maui.Handlers.ImageHandler.MapWidth(Microsoft.Maui.Handlers.IImageHandler! handler, Microsoft.Maui.IImage! view) -> void
static Microsoft.Maui.Handlers.SearchBarHandler.MapIsSpellCheckEnabled(Microsoft.Maui.Handlers.ISearchBarHandler! handler, Microsoft.Maui.ISearchBar! searchBar) -> void
static Microsoft.Maui.Handlers.SwipeItemMenuItemHandler.MapSourceAsync(Microsoft.Maui.Handlers.ISwipeItemMenuItemHandler! handler, Microsoft.Maui.ISwipeItemMenuItem! image) -> System.Threading.Tasks.Task!
static Microsoft.Maui.Hosting.MauiHandlersCollectionExtensions.AddHandler<TType>(this Microsoft.Maui.Hosting.IMauiHandlersCollection! handlersCollection, System.Func<System.IServiceProvider!, Microsoft.Maui.IElementHandler!>! handlerImplementationFactory) -> Microsoft.Maui.Hosting.IMauiHandlersCollection!
Expand Down
Loading