How can I render Paths together in Xamarin Forms Shapes?

Question

I'm trying to render a vector logo made up of two different colours. The parts are contained within GeometryGroups which scale and position all the elements together when rendered, but the elements cannot be coloured, so I need one GeometryGroup for each colour, which I'm rendering in a coloured Path.

However I try to group these Paths, I cannot seem to get the scaling right. Either they are scaled to the size of the container independently which messes up the layout (because the bounding boxes are differently shaped) or they aren't scaled at all (which makes them huge).

For example:

<AbsoluteLayout> <!-- Sized to dimensions of path data, whether or not this is desired -->
    <Path
        Fill="White" 
        Data="{StaticResource logo_a}"
        Aspect="Uniform"
    />
    <Path
        Fill="DarkBlue"
        Data="{StaticResource logo_b}"
        Aspect="Uniform"
    />
</AbsoluteLayout>

Essentially I need to use something like AbsoluteLayout because I need the coordinates within the Data elements to be treated consistently, but then scale the result to the size of its container.

What is the canonical way to achieve what I'm doing?

Answer 1

I have worked around this problem by creating a mask in Inkscape which can be placed behind the other part of the logo, which is transparent in the right places to view the second colour below.

This works because the two parts are now the same size and shape, so can simply be placed in a grid cell together and everything is rendered in the right place.

I'm still interested in an answer to this question which will work in the general case when two (or more) parts of a vector drawing need to be placed and scaled together, when different brushes are needed for the different parts and they are of arbitrary shape and size.