Viewbox alternative for MAUI

[Symbai]

Viewbox on WPF auto scales all content to the size of the Viewbox. Does something similar on Maui exist yet? I'm facing the problem of drawing a menu bar using:

Image (svg)
ImageButtons (left and right side)

While I can make the Image (svg) to scale, the Image Buttons don't. The size is based on the SVG/image which is kinda fixed. And specifying a custom heigh/width would also be fixed. On WPF I could easily put everything into the Viewbox and I'm done.

[john-hollander]

Try this (change the namespace to something that works for you):

using Microsoft.Maui.Layouts;

namespace Example.MAUI.Controls;

#region StretchDirection

/// <summary>
/// StretchDirection - Enum which describes when scaling should be used on the content of a Viewbox. This
/// enum restricts the scaling factors along various axes.
/// </summary>
public enum StretchDirection
    {
        /// <summary>
        /// Only scales the content upwards when the content is smaller than the Viewbox.
        /// If the content is larger, no scaling downwards is done.
        /// </summary>
        UpOnly,

        /// <summary>
        /// Only scales the content downwards when the content is larger than the Viewbox.
        /// If the content is smaller, no scaling upwards is done.
        /// </summary>
        DownOnly,

        /// <summary>
        /// Always stretches to fit the Viewbox according to the stretch mode.
        /// </summary>
        Both
    }

#endregion

public class ViewBox : Layout
{
    #region Public Fields

    public static readonly BindableProperty StretchProperty =
            BindableProperty.Create(nameof(Stretch), typeof(Stretch), typeof(ViewBox),
                                    Stretch.Uniform, propertyChanged: HandlePropertyChanged);

    private static void HandlePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (!(bindable is ViewBox viewBox))
            return;

        viewBox.InvalidateMeasure();
    }

    public Stretch Stretch
    {
        get => (Stretch)GetValue(StretchProperty);
        set => SetValue(StretchProperty, value);
    }

    public static readonly BindableProperty StretchDirectionProperty =
        BindableProperty.Create(nameof(StretchDirection), typeof(StretchDirection), typeof(ViewBox), 
                                StretchDirection.Both, propertyChanged: HandlePropertyChanged);

    public StretchDirection StretchDirection
    {
        get => (StretchDirection)GetValue(StretchDirectionProperty);
        set => SetValue(StretchDirectionProperty, value);
    }
   
    #endregion

    public ViewBox() { }

    protected override void OnChildAdded(Element child) 
    {
        if (!(child is View view))
            throw new ArgumentException(nameof(child));

        view.PropertyChanged += ViewPropertyChanged;
        base.OnChildAdded(child);
    }

    protected override void OnChildRemoved(Element child, int oldLogicalIndex)
    {
        if (child is View view)
            view.PropertyChanged -= ViewPropertyChanged;

        base.OnChildRemoved(child, oldLogicalIndex);
    }

    private void ViewPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (!(sender is View view))
            return;

        if (e.PropertyName == "VerticalOptions" || e.PropertyName == "HorizontalOptions")
            InvalidateMeasure();
    }

    protected override ILayoutManager CreateLayoutManager()
    {
		return new ViewBoxLayoutManager(this);
    }
}

public class ViewBoxLayoutManager : ILayoutManager
{
    private ViewBox _viewBox;

    private View? InternalChild => _viewBox.Children.FirstOrDefault() as View;

    public ViewBoxLayoutManager(ViewBox viewBox)
    {
        _viewBox = viewBox;
    }

    public Size Measure(double widthConstraint, double heightConstraint)
    {
        Size constraint = new(widthConstraint, heightConstraint);
        View? child = InternalChild;
        Size parentSize = new();

        try
        {
            if (child is not null)
            {
                // Initialize child constraint to infinity.  We need to get a "natural" size for the child
                // in absence of constraint.
                // Note that an author *can* impose a constraint on a child by using Height/Width, &c... properties 
                child.Measure(double.PositiveInfinity, double.PositiveInfinity);
                Size childSize = child.DesiredSize;

                Size scalefac = ComputeScaleFactor(constraint, childSize, 
                                                   _viewBox.Stretch, _viewBox.StretchDirection);

                parentSize.Width = scalefac.Width * childSize.Width;
                parentSize.Height = scalefac.Height * childSize.Height;
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.Print(ex.Message);
        }

        return parentSize;
    }

    public Size ArrangeChildren(Rect bounds)
    {
        Size arrangeSize = bounds.Size;
        View? child = InternalChild;
        double xOffset;
        double yOffset;

        try
        {
            if (child is not null)
            {
                Size childSize = child.DesiredSize;

                // Compute scaling factors from arrange size and the measured child content size
                Size scalefac = ComputeScaleFactor(arrangeSize, childSize, 
                                                   _viewBox.Stretch, _viewBox.StretchDirection);

                //return the size oocupied by scaled child
                arrangeSize.Width = scalefac.Width * childSize.Width;
                arrangeSize.Height = scalefac.Height * childSize.Height;

                child.AnchorX = 0;
                child.AnchorY = 0;
                child.ScaleX = scalefac.Width;
                child.ScaleY = scalefac.Height;

                yOffset = child.VerticalOptions.Alignment switch
                {
                    LayoutAlignment.Start => 0,
                    LayoutAlignment.End => bounds.Height - arrangeSize.Height,
                    _ => (bounds.Height - arrangeSize.Height) / 2.0,
                };
                xOffset = child.HorizontalOptions.Alignment switch
                {
                    LayoutAlignment.Start => 0,
                    LayoutAlignment.End => bounds.Width - arrangeSize.Width,
                    _ => (bounds.Width - arrangeSize.Width) / 2.0,
                };

                // Arrange the child to the desired size 
                ((IView)child).Arrange(new Rect(new Point(xOffset, yOffset), child.DesiredSize));
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.Print(ex.Message);
        }

        return arrangeSize;
    }

    /// <summary>
    /// This is a helper function that computes scale factors depending on a target size and a content size
    /// </summary>
    /// <param name="availableSize">Size into which the content is being fitted.</param>
    /// <param name="contentSize">Size of the content, measured natively (unconstrained).</param>
    /// <param name="stretch">Value of the Stretch property on the element.</param>
    /// <param name="stretchDirection">Value of the StretchDirection property on the element.</param>
    internal static Size ComputeScaleFactor(Size availableSize, Size contentSize,
                                            Stretch stretch, StretchDirection stretchDirection)
    {
        // Compute scaling factors to use for axes
        double scaleX = 1.0;
        double scaleY = 1.0;

        try
        {
            bool isConstrainedWidth = !double.IsPositiveInfinity(availableSize.Width);
            bool isConstrainedHeight = !double.IsPositiveInfinity(availableSize.Height);

            if ((stretch == Stretch.Uniform || stretch == Stretch.UniformToFill || stretch == Stretch.Fill)
                 && (isConstrainedWidth || isConstrainedHeight))
            {
                // Compute scaling factors for both axes
                scaleX = (IsZero(contentSize.Width)) ? 0.0 : availableSize.Width / contentSize.Width;
                scaleY = (IsZero(contentSize.Height)) ? 0.0 : availableSize.Height / contentSize.Height;

                if (!isConstrainedWidth) scaleX = scaleY;
                else if (!isConstrainedHeight) scaleY = scaleX;
                else
                {
                    // If not preserving aspect ratio, then just apply transform to fit
                    switch (stretch)
                    {
                        case Stretch.Uniform:       //Find minimum scale that we use for both axes
                            double minscale = scaleX < scaleY ? scaleX : scaleY;
                            scaleX = scaleY = minscale;
                            break;

                        case Stretch.UniformToFill: //Find maximum scale that we use for both axes
                            double maxscale = scaleX > scaleY ? scaleX : scaleY;
                            scaleX = scaleY = maxscale;
                            break;

                        case Stretch.Fill:          //We already computed the fill scale factors above, so just use them
                            break;
                    }
                }

                //Apply stretch direction by bounding scales.
                //In the uniform case, scaleX=scaleY, so this sort of clamping will maintain aspect ratio
                //In the uniform fill case, we have the same result too.
                //In the fill case, note that we change aspect ratio, but that is okay
                switch (stretchDirection)
                {
                    case StretchDirection.UpOnly:
                        if (scaleX < 1.0) scaleX = 1.0;
                        if (scaleY < 1.0) scaleY = 1.0;
                        break;

                    case StretchDirection.DownOnly:
                        if (scaleX > 1.0) scaleX = 1.0;
                        if (scaleY > 1.0) scaleY = 1.0;
                        break;

                    case StretchDirection.Both:
                        break;

                    default:
                        break;
                }
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.Print(ex.Message);
        }

        //Return this as a size now
        return new Size(scaleX, scaleY);
    }

    /// <summary>
    /// IsZero - Returns whether or not the double is "close" to 0.  Same as AreClose(double, 0),
    /// but this is faster.
    /// </summary>
    /// <returns>
    /// bool - the result of the AreClose comparision.
    /// </returns>
    /// <param name="value"> The double to compare to 0. </param>
    public static bool IsZero(double value) =>  Math.Abs(value) < 10.0 * double.Epsilon;
}

I wrote it for my own use, using the code from previous iterations. Let me know how it works for you, and if you have any suggestions.

John

[Realinspirer]

Your ViewBox works super well in Android, but it kinda bugs out in Windows. I think that's some internal problem rather than from your side.

Well, there are various things that can be done on Windows, so a bunch of workaround is there. I think one can also use the WinUI inbuild ViewBox.
Thanks for your help!

[nextcodelab]

We hope this will be added to stackoverlflow for future reference.

[Realinspirer]

ViewBox is a common thing, so maybe it'll get added eventually. Well, this has also been implemented by someone in Xamarin. https://social.msdn.microsoft.com/Forums/en-US/2fedf636-b6f9-401b-b901-41f2827ac3be/viewbox-implementation-for-xamarin-forms?forum=xamarinforms
Someone need to add a feature request on https://github.com/CommunityToolkit/Maui for ViewBox. Mention this thread. Well, I am gonna do it anyways, but I am busy rn.

[john-hollander]

here is various things that can be done on Windows, so a bunch of workaround is there. I think one can also use the WinUI inbuild ViewBox.
Thanks for your help!

Would you happen to have any example XAML to reproduce so I could take a look at the behavior? I haven't had issues with it in WinUI myself so far, but perhaps I haven't had the right use-cases to find the failures.

Thanks,

John

[Realinspirer]

here is various things that can be done on Windows, so a bunch of workaround is there. I think one can also use the WinUI inbuild ViewBox.
Thanks for your help!

Would you happen to have any example XAML to reproduce so I could take a look at the behavior? I haven't had issues with it in WinUI myself so far, but perhaps I haven't had the right use-cases to find the failures.

Thanks,

John

I will try to do that, but that's a bit of work to do. I cannot do that right now. But I can try to explain my situation to you.
So, actually I want to use the ViewBox to display a bill. Why ViewBox? Because I am constraining the width of the bill so that every print/copy of the bill on every window size will be similar, and ViewBox would help to scale it to the window (Or else it would just have fixed size everywhere.) And I am generating the bill in C#.
Now that I think about it - I actually debug/test my app on WSA (Windows Subsystem for Android™️), and I don't know why, but WSA somehow 'suppress' many bugs (most of them are in .NET Maui Preview right now), and when I run my app on a physical device, it shows some unexpected results. Well, it doesn't shows complete different things, but just few things. So, when I checked my app on a physical device, the bill had some unexpected behavior. Because it can have many CollectionView, so that means many ScrollView (inside each collectionview). So it creats a glitch effect due to the scrollviews. I also noticed one thing - the ViewBox got cut off a bit in the same direction as it cuts off in Windows (but in Android it was just a few pixels, whereas in Windows it can be large).
But since I was more concentrated on the glitchy thing, I made a workaround, I covered the bill with a Button, so that the button gets all the events and the ScrollViews doesn't get any of that, and surprisingly that worked. And you know what's interesting? ViewBox also got fixed in Android. I didn't check on Windows. And now I just cannot, as my app now has became more of an Android app. So, I have to make a new project to check that. I will try to give that.
So, I think that the Button gave something like a shape to the ViewBox.
Well, it can be a me thing after all, but well, I will try to reproduce this with a simpler example soon.

[AbdalaMask]

plasss fix code ViewBox in win

[AbdalaMask]

The code works well on Android but does not work on Windows

Please help