WPF: Stretching multiple paths relatively.

Question

Hi,

This should be simple, but I guess I'm missing something.

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

I would like to make this user control stretchable to any desired size, keeping the same relative position of the paths (the original work has 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>

Thanks for your help.

Answer 1

Changing LayoutRoot to a ViewBox will make the paths resize as the control resizes:

<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.

I tried it in Silverlight 3 and it worked with the following markup allowing the figures to rescale as the browser window size changes:

<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>

The user control is embedded in a page:

<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>