WPF: растягивание нескольких путей относительно

Question

Это должно быть просто, но, думаю, я что-то упустил.

У меня есть простой пользовательский элемент управления, содержащий сетку и 2 пути.

Я бы хотел, чтобы этот пользовательский элемент управления растягивался до любого желаемого размера, сохраняя одинаковое относительное положение путей (в оригинальной работе гораздо больше путей с анимацией).

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

Спасибо за вашу помощь.

Answer 1

Изменение LayoutRoot на ViewBox приведет к изменению размера путей по мере изменения размера элемента управления:

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

Редактировать: ответить на комментарии.

Я попробовал это в 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>