[Shapes] Converting xaml graphics with multiple paths?

[MitchBomcanhao]

We've got a very large number of icons that we currently use via a custom font.

There are some scenarios where using the new shapes feature would be better suited, but I've hit a niggle.
The xaml variant of said icons mostly only has 1 Path node that directly translates to the Xamarin implementation, so we can just copy the relevant node and it'll work almost as is. I can probably create a powershell script that scrapes the nearly 2k xaml files and makes a resource dictionary with the required Path content.

<Viewbox>
  <Canvas >
	 <Path Data="STUFF" Fill="#000000"/>
  </Canvas>
</Viewbox>

translates to Xamarin xaml such as
<Path Fill="Black" Aspect="Uniform" Data="STUFF" />

Now for the niggle... Some icons have multiple path nodes. But what to do with stuff like this? How can I make multiple paths into a single resource that I can render correctly in Xamarin?

<Viewbox>
  <Canvas >
	 <Path Data="STUFF" Fill="#000000"/>
	 <Path Data="MORESTUFF" Fill="#000000"/>
  </Canvas>
</Viewbox>

I can't just put the paths into a container because individual paths will scale independently and will not create the expected shape in the end.

tagging @jsuarezruiz :)

[MitchBomcanhao]

this is the closest to a workaround I've found so far - appending the multiple paths onto a single path data property
This means we lose out on customisations like changing colors on different paths (which is a feature of the iconset I'm trying to use) but it does mean that we can display the entire icon correctly.

eg

renders like the image below

to fix this, we either need a new container type that applies the same scaling factor to all its children or a way of sharing the scaling factor across a group of paths (ie always using the smallest scale across all available paths).

[jsuarezruiz]

You can apply transformations to each Path, etc. However, I agree that in these cases having a Canvas would be the best option.

[bobbydharrell]

This is an old post, However, WPF had a ViewBox that handled this. I found this solution online somewhere a long time ago. I put all of my Shapes inside of a View box so I can scale them correctly

`[ContentProperty(nameof(Content))]
public class ViewBox : Layout
{
public static readonly BindableProperty ContentProperty = BindableProperty.Create(
propertyName: nameof(Content), returnType: typeof(View), declaringType: typeof(ViewBox), propertyChanged: OnContentChanged);

    public static void OnContentChanged(BindableObject bindable, object oldVal, object newVal)
    {
        ViewBox vb = (ViewBox)bindable;

        vb.Children.Clear();
        vb.Children.Add((View)newVal);
    }

    private SizeRequest? ContentMeasurementCache { get; set; }

    public View Content
    {
        get { return (View)GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }

    protected override void OnAdded(View view)
    {
        if(Children.Count > 1)
            throw new InvalidOperationException("ViewBox can only contain a single child. Use Content property.");
    }

    protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
    {
        var zero = new SizeRequest(Size.Zero);

        var content = Content;

        // if content is not set or constraints don't make sense, return zero
        if(content == null ||
            double.IsNaN(widthConstraint) || double.IsNegativeInfinity(widthConstraint) ||
            double.IsNaN(heightConstraint) || double.IsNegativeInfinity(heightConstraint))
            return zero;

        // measure the content without constraints and cache it for later
        ContentMeasurementCache = MeasureFull(content);

        var request = ContentMeasurementCache.Value.Request;

        var rw = request.Width;
        var rh = request.Height;

        // if we have infinite space, request content at full-scale
        if(double.IsPositiveInfinity(widthConstraint) && double.IsPositiveInfinity(heightConstraint))
            return new SizeRequest(request);

        // if we only have infinite width, request content scaled to fit heightConstraint (or zero, if impossible)
        if(double.IsPositiveInfinity(widthConstraint))
            return new SizeRequest(request * DivideOrZero(heightConstraint, rh));

        // if we only have infinite height, request content scaled to fit widthConstraint (or zero, if impossible)
        if(double.IsPositiveInfinity(heightConstraint))
            return new SizeRequest(request * DivideOrZero(widthConstraint, rw));

        // Otherwise, request content scaled to fit minimum constraint ratio (or zero, if impossible)
        return new SizeRequest(request * Math.Min(DivideOrZero(widthConstraint, rw), DivideOrZero(heightConstraint, rh)));
    }

    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        var content = Content;
        var requestCache = ContentMeasurementCache;

        if(content == null)
            return;

        if(requestCache == null)
            requestCache = ContentMeasurementCache = MeasureFull(content);

        var request = requestCache.Value.Request;

        var rw = request.Width;
        var rh = request.Height;

        // scale from center (we could add LayoutOptions detection so that we could have start/end/center scaling)
        content.AnchorX = content.AnchorY = 0.5;
        content.Scale = Math.Min(DivideOrZero(width, rw), DivideOrZero(height, rh));
        content.Layout(new Rectangle(x + ((width - rw) / 2), y + ((height - rh) / 2), rw, rh));
    }

    public enum ScaleModeEnum
    {
        ScaleToFitSize = 0,
        ScaleToReduce,
        ScaleToEnlarge
    }

    private SizeRequest MeasureFull(View view) => view.Measure(double.PositiveInfinity, double.PositiveInfinity, MeasureFlags.IncludeMargins);

    private double DivideOrZero(double top, double btm) => btm == 0 ? 0 : top / btm;

    public static readonly BindableProperty ScaleModeProperty = BindableProperty.Create(
            propertyName: nameof(ScaleMode), returnType: typeof(ScaleModeEnum), declaringType: typeof(ViewBox),
            defaultValue: ScaleModeEnum.ScaleToFitSize);

    public ScaleModeEnum ScaleMode
    {
        get { return (ScaleModeEnum)GetValue(ScaleModeProperty); }
        set { SetValue(ScaleModeProperty, value); }
    }


    private double CalculateScale(double value, double valueRequest)
    {
        double scale = 1;
        switch (ScaleMode)
        {
            case ScaleModeEnum.ScaleToFitSize:
                scale = value / valueRequest;
                break;
            case ScaleModeEnum.ScaleToReduce:
                scale = value / valueRequest;
                if(scale > 1) scale = 1;
                break;
            case ScaleModeEnum.ScaleToEnlarge:
                scale = value / valueRequest;
                if(scale < 1) scale = 1;
                break;
        }
        return scale;
    }
}`