WPF: stretching multiple paths relatively

Question

It should be simple, but I think I missed something.

I have a simple user control containing a grid and 2 paths.

I would like to make this custom element extensible for any desired size, while maintaining the same relative position of the paths (in the original work there are much more paths with animation).

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="test.MainPage">
    <Grid x:Name="LayoutRoot" Background="White" Width="400" Height="400">
        <Path Fill="White" Stretch="Fill" Stroke="Black" Height="101"
              Margin="49.5,49.5,199.5,0" VerticalAlignment="Top"
              Data="M50,50 L100,50 L150,50 L200,50 L200,100 L150,100 L150,150 L100,150 L100,100 L50,100 z"/>
        <Path Fill="White" Stretch="Fill" Stroke="Black"
              Margin="0,150.5,48.5,148.5"
              Data="M50,50 L100,50 L150,50 L200,50 L200,100 L150,100 L150,150 L100,150 L100,100 L50,100 z"
              HorizontalAlignment="Right" Width="151"/>
    </Grid>
</UserControl>

Thank you for your help.

Answer 1

Changing the LayoutRoot in the ViewBox will resize the path when resizing the control:

<Viewbox x:Name="LayoutRoot" Stretch="Fill">
    <Grid Width="400" Height="400">
        <Path Fill="White" Stretch="Fill" Stroke="Black" Height="101" 
            Margin="49.5,49.5,199.5,0" VerticalAlignment="Top" 
            Data="M50,50 L100,50 L150,50 L200,50 L200,100 L150,100 L150,150 L100,150 L100,100 L50,100 z"/>
        <Path Fill="White" Stretch="Fill" Stroke="Black" 
            Margin="0,150.5,48.5,148.5" 
            Data="M50,50 L100,50 L150,50 L200,50 L200,100 L150,100 L150,150 L100,150 L100,100 L50,100 z" 
            HorizontalAlignment="Right" Width="151"/>
    </Grid>
</Viewbox>

Edit: Reply to comments.

Silverlight 3, , :

<UserControl
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"
xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
x:Class="SLViewbox.UserControl1"
>

<Grid x:Name="LayoutRoot">
    <controlsToolkit:Viewbox>
        <Grid Width="400" Height="400"> 
        <Path Fill="White" Stretch="Fill" Stroke="Black" Height="101"  
            Margin="49.5,49.5,199.5,0" VerticalAlignment="Top"  
            Data="M50,50 L100,50 L150,50 L200,50 L200,100 L150,100 L150,150 L100,150 L100,100 L50,100 z"/> 
        <Path Fill="White" Stretch="Fill" Stroke="Black"  
            Margin="0,150.5,48.5,148.5"  
            Data="M50,50 L100,50 L150,50 L200,50 L200,100 L150,100 L150,150 L100,150 L100,100 L50,100 z"  
            HorizontalAlignment="Right" Width="151"/> 
        </Grid>
    </controlsToolkit:Viewbox>
</Grid>
</UserControl>

:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SLViewbox" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="SLViewbox.MainPage"
mc:Ignorable="d">

<Grid x:Name="LayoutRoot" Background="White">
    <local:UserControl1 />
</Grid>
</UserControl>