WPF Draw multiple path

Question

I try to draw with Blend(in example code a folder image), but I have some trouble to shape that.

Basically, I begin with Canvas control, but the picture's size can not be linked to parent's size.

With a grid, the picture can autosize, but all paths take all place. Finally, with some transformations, the final result is acceptable, but it need a lot of calcul to obtain a good transform.

<Window x:Class="FolderVSG.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" 
        Title="MainWindow">
    <Grid Width="300" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Path Data="M0,0L3,0 4,1 9,1 9,9 0,9z" Fill="#FF1878D8" Stretch="Fill" Stroke="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="0.89"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path Data="M1,0L9,0 8,9 0,9z" Fill="#FF185ED8" Stretch="Fill" Stroke="Black" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="1,1">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
    </Grid>
</Window>

Maybe the problem is my way to draw, maybe it has a layout like canvas but who resize from max X Y and min X Y point.

Answer 1

Is the problem that when scaling, the paths become separated and independent? That is how I read your question.

If that is the case, add your paths to a canvas and get them to look correct. Then place your canvas in a view box. The view box will scale the contents uniformly for you so you resize and move as much as you like. Bear in mind your canvas will need a fixed size to make this work.

<Viewbox>
  <Canvas Width="30" Height="20">
    <Path Data="..."/>
  </Canvas>
</Viewbox>

If this is not the answer, please provide some clarification in your question as to what your difficulty is.