Wpf/Xaml：多个路径对象不按预期调整大小的问题

Question

我在设计一款游戏。有一个游戏板将占据整个窗口，我希望它可以调整大小。我已经使用Expression Design 4创建了一个原型，并将其导出为Xaml文件，然后将它转换为Visual Studio 2015 Blend中的Usercontrol。它看起来没问题（当然有一些调整），但不会在运行时调整大小。

我注意到结果Xaml代码散布着Canvas对象，我知道它不会调整包含对象的大小。当通过运行下面的代码生成的示例窗口的大小变小时，路径就会从屏幕上消失。

<Grid> 
    <Canvas x:Name="Layer_1" Width="1024" Height="768" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,-8,-31"> 
     <Viewbox Canvas.Left="42" Canvas.Top="226.007"> 
      <Path x:Name="Path" Width="680.466" Height="72.9967" Canvas.Left="173.267" Canvas.Top="429.008" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 176.767,262.506L 218.765,232.508L 265.262,264.006L 313.26,237.007L 377.757,276.005L 434.754,247.507L 493.251,280.505L 539.749,250.507L 584.746,295.505L 634.244,259.506L 683.741,297.004L 730.239,246.007L 769.237,292.505L 821.734,247.507L 850.233,298.504"/> 
     </Viewbox> 
    <Path x:Name="Path_0" Width="144.993" Height="333.984" Canvas.Left="248.263" Canvas.Top="304.004" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 302.76,307.504L 346.258,397.499L 284.761,404.999L 284.761,469.496L 329.759,500.994L 389.756,542.992L 344.758,575.99L 266.762,602.989L 251.763,634.488"/> 
</Canvas> 

我到处找，但找不到任何明显的答案。我相信我错过了一些最佳做法。

我设计表达式设计4图形由九百项，看起来在导出的XAML文件是这样的所有路径： -

<Viewbox x:Name="_AreaC_" Width="296.125" Height="159.938" Canvas.Left="171.208" Canvas.Top="143.469"> 
       <Canvas Width="296.125" Height="159.938"> 
        <Path x:Name="Path_35" Width="268.375" Height="159.208" Canvas.Left="27.75" Canvas.Top="0.729187" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 28.9583,3.1875L 34.9167,2.60413L 41.375,2.02087L 47.6666,1.60419L 54.25,1.35419L 64.4583,1.22919L 72.625,1.39587L 81.4166,1.89587L 90,2.47919L 99.75,3.39587L 109.75,4.6875L 116.375,5.6875L 122.833,6.72919L 129.625,8.27087L 136.125,9.77087L 143.917,11.6459L 150.958,13.4375L 160.917,16.5625L 170.292,19.7709L 175.875,21.9792L 182.917,24.7292L 188.375,27.1042L 194.542,29.7292L 201.125,33.0209L 205.375,35.0209L 212.083,38.6459L 220.375,43.0625L 226.208,46.6042L 233.375,50.9792L 238.708,54.3542L 245.125,58.7709L 251.667,63.5625L 258.5,68.7709L 263.875,73.1042L 268.792,77.2708L 273.083,81.0208L 277.208,84.7292L 282.667,89.9375L 288.292,95.5625L 293.167,100.563L 295.625,103.104L 292.542,106.521L 287.458,111.521L 283.708,115.229L 277.583,120.604L 268.208,127.771L 257.583,134.604L 252.75,137.688L 242.208,143.146L 231.583,147.604L 223.5,150.604L 214.292,153.271L 203.625,155.979L 192.833,157.813L 181.917,159.021L 171.542,159.438L 161.792,159.396L 151.5,158.646L 143.875,157.771L 133.792,155.813L 124.292,153.438L 114.417,150.479L 104.25,146.896L 93.625,142.021L 84.5833,137.229L 76.5833,132.271L 69.875,127.563L 66.2083,124.729L 68.9583,120.063L 72.1666,116.146L 75.6666,112.729L 78.9166,110.313L 82.25,108.479L 85.5416,107.146L 88.6666,109.271L 93.875,112.938L 99.1666,115.854L 105.542,119.396L 110.792,121.729L 118.625,124.979L 124.667,127.146L 132.375,129.188L 139.417,131.021L 145.542,132.271L 152.333,133.104L 156.792,133.521L 163.417,133.979L 169.375,134.188L 176.375,133.771L 183.875,133.271L 189.792,132.479L 195.625,131.563L 202.708,130.104L 207.875,128.896L 216.292,126.271L 223.833,123.438L 230.625,120.521L 236.667,117.396L 243.375,113.688L 250.167,109.229L 255.75,105.354L 258.875,102.896L 253.417,97.8542L 245.375,91.2708L 239,86.1875L 232.417,81.4375L 224.708,76.0208L 218.25,71.8125L 211,67.2709L 203.292,63.1459L 196.75,59.5625L 189,55.8542L 182.083,52.4792L 175.5,49.4792L 169,46.9375L 162.792,44.6042L 156.542,42.3125L 149.833,40.1459L 143.167,38.1459L 136.583,36.3542L 131.833,35.3125L 123.125,33.0625L 115.083,31.5625L 107.208,30.1459L 101.583,29.3125L 95.9583,28.7292L 92,28.4792L 82.25,27.6042L 74.3333,27.2709L 66.9166,26.9375L 59.6666,27.0209L 53.125,27.1875L 48.2083,27.5209L 42.0417,27.9792L 36.125,28.3959L 33.4167,28.5209L 31.7917,25.6875L 30.375,22.1042L 29.5,19.4375L 28.5417,14.5209L 28.25,10.3125L 28.375,6.9375L 28.9583,3.1875 Z "/> 
        <Path x:Name="Line_36" Width="13.875" Height="22.875" Canvas.Left="82.8229" Canvas.Top="113.812" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 96.1979,114.312L 83.3229,136.187"/> 
        <Path x:Name="Line_37" Width="11" Height="24.6667" Canvas.Left="103.406" Canvas.Top="122.521" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 113.906,123.021L 103.906,146.687"/> 
        <Path x:Name="Line_38" Width="4.20834" Height="26.5" Canvas.Left="147.365" Canvas.Top="132.229" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 151.073,132.729L 147.865,158.229"/> 
        <Path x:Name="Line_39" Width="1.58334" Height="26.2917" Canvas.Left="169.156" Canvas.Top="133.479" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 169.656,133.979L 170.24,159.271"/> 
        <Path x:Name="Line_40" Width="4.58331" Height="26.3333" Canvas.Left="188.948" Canvas.Top="131.979" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 189.448,132.479L 193.031,157.812"/> 
        <Path x:Name="Line_41" Width="8.04169" Height="25.4583" Canvas.Left="207.781" Canvas.Top="128.062" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 208.281,128.562L 215.323,153.021"/> 
        <Path x:Name="Line_42" Width="11.0833" Height="24.2917" Canvas.Left="226.115" Canvas.Top="121.604" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 226.615,122.104L 236.698,145.396"/> 
        <Path x:Name="Path_43" Width="35.8333" Height="50.625" Canvas.Left="242.906" Canvas.Top="85.1875" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 243.406,113.479L 256.406,135.312L 277.448,120.896L 259.24,102.813L 278.24,85.6875"/> 
        <Path x:Name="Line_44" Width="16.9166" Height="21.4167" Canvas.Left="243.156" Canvas.Top="69.0208" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 243.656,89.9375L 259.573,69.5208"/> 
        <Path x:Name="Line_45" Width="15.75" Height="22.1667" Canvas.Left="226.031" Canvas.Top="55.6875" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 226.531,77.3542L 241.281,56.1875"/> 
        <Path x:Name="Line_46" Width="12.4167" Height="24.2083" Canvas.Left="189.615" Canvas.Top="32.6875" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 190.115,56.3958L 201.531,33.1875"/> 
        <Path x:Name="Line_47" Width="10.6667" Height="24.9583" Canvas.Left="171.781" Canvas.Top="23.8125" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 172.281,48.2708L 181.948,24.3125"/> 
        <Path x:Name="Line_48" Width="9.16666" Height="25.625" Canvas.Left="153.323" Canvas.Top="16.3958" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 153.823,41.5208L 161.99,16.8958"/> 
        <Path x:Name="Line_49" Width="7.20834" Height="26.3333" Canvas.Left="133.615" Canvas.Top="10.1458" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 134.115,35.9791L 140.323,10.6458"/> 
        <Path x:Name="Line_50" Width="3.75" Height="26.75" Canvas.Left="92.1979" Canvas.Top="2.3125" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 92.6979,28.5625L 95.4479,2.8125"/> 
        <Path x:Name="Line_51" Width="2.33334" Height="26.7083" Canvas.Left="70.7813" Canvas.Top="0.8125" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 71.2813,27.0208L 72.6146,1.3125"/> 
        <Path x:Name="Line_52" Width="2" Height="27" Canvas.Left="48.3646" Canvas.Top="0.895813" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 49.8646,27.3958L 48.8646,1.39581"/> 
        <Path x:Name="Line_53" Width="13.625" Height="23.4583" Canvas.Left="208.031" Canvas.Top="43.0625" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 221.156,43.5625L 208.531,66.0208"/> 
        <Path x:Name="Line_54" Width="26.2083" Height="3.16663" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 0.5,2.66663L 25.7083,0.5"/> 
       </Canvas> 
      </Viewbox> 

我的想法是：“当我在表达我设计和我选择所有的对象，并调整它们作为一个连贯的整体，以形成完全相同的图像，就像它是一个位图。当然，WPF项目中有一个控件（或其他方式）具有相同的当运行窗口被用户调整大小时，会在运行时发生？“。

谢谢， 保罗。

Answer 1

不知道你到底想要达到什么目的。

但是用固定大小制作可调整大小的东西从来都不是一个好主意。

我了解你想你的路，所以要调整大小，和我有固定的代码一点点给你的，你怎么能走的更远的想法：

XAML：

<Window x:Class="test.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:test="clr-namespace:test" 
    Title="MainWindow" > 
<Window.Resources> 
    <test:HalfSizeConverter x:Key="HalvSizeConverter"/> 
</Window.Resources> 

<Grid> 
    <Path x:Name="Path" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={StaticResource HalvSizeConverter}}" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 176.767,262.506L 218.765,232.508L 265.262,264.006L 313.26,237.007L 377.757,276.005L 434.754,247.507L 493.251,280.505L 539.749,250.507L 584.746,295.505L 634.244,259.506L 683.741,297.004L 730.239,246.007L 769.237,292.505L 821.734,247.507L 850.233,298.504"/> 
    <Path x:Name="Path_0" VerticalAlignment="Stretch" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight, Converter={StaticResource HalvSizeConverter}}" HorizontalAlignment="Left" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 302.76,307.504L 346.258,397.499L 284.761,404.999L 284.761,469.496L 329.759,500.994L 389.756,542.992L 344.758,575.99L 266.762,602.989L 251.763,634.488"/> 
</Grid> 

代码：

public class HalfSizeConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     var size = (double) value; 
     return size/2; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

使用HalfSizeConverter，您可以定义路径的比例。

享受