Visual Studio 2010 XAML布局编辑器不是所见即所得

Question

当我在Visual Studio 2010中创建WPF布局时，我只是将控件从工具箱拖放到默认元素（通常是网格）上。当我这样做时，Visual Studio中显示的间距与运行时显示的间距不匹配。例如，以下是两种布局的可视化编辑器和运行时结果。 。 。

。 。 。和。 。 。

...注意间距被改变。
以下是为这两个示例生成的XAML。 。 。

<Button Content="ProjectPattern" Height="23" HorizontalAlignment="Left" Margin="12,296,0,0" Name="butProjPattern" VerticalAlignment="Top" Width="117" Click="butProjPattern_Click" /> 
    <TextBlock Height="22" HorizontalAlignment="Left" Margin="135,0,0,141" Name="ResultProjPattern" Text="(result)"  VerticalAlignment="Bottom" Width="41" /> 
    <TextBlock Height="23" HorizontalAlignment="Left" Margin="175,295,0,0" Name="TextBlockPattern" Text="  (pattern file)" Padding="4" VerticalAlignment="Top" Width="135" Background="#FFF1F3FF" /> 
    <Button Content="...browse" Height="23" HorizontalAlignment="Right" Margin="0,294,814,0" Name="buttonPatternBrowse" VerticalAlignment="Top" Width="54" Click="buttonPatternBrowse_Click" /> 

......还有......

<Button Content="Display Cross" Height="24" HorizontalAlignment="Left" Margin="622,108,0,0" Name="buttonCross" VerticalAlignment="Top" Width="117" Click="buttonCross_Click" /> 
<TextBlock Height="24" HorizontalAlignment="Right" Margin="0,107,344,0" Name="ResultCross" Text="(result)" VerticalAlignment="Top" Width="100" /> 
<Button Content="Display Diamond" Height="23" HorizontalAlignment="Left" Margin="622,138,0,0" Name="butDiamond" VerticalAlignment="Top" Width="117" Click="butDiamond_Click" /> 
<TextBlock Height="23" HorizontalAlignment="Right" Margin="0,138,344,0" Name="ResultDiamond" Text="(result)" VerticalAlignment="Top" Width="100" /> 
<Button Content="DisplayFullField" Height="24" HorizontalAlignment="Left" Margin="622,165,0,0" Name="butFullField" VerticalAlignment="Top" Width="117" /> 
<TextBlock Height="24" HorizontalAlignment="Right" Margin="0,164,344,0" Name="ResultFullField" Text="(result)" VerticalAlignment="Top" Width="100" /> 

我添加按钮处理，文字内容等，但布局是由Visual Studio的布局编辑器生成严格什么。我注意到的一件事是，即使它从工具箱拖放到网格上，Visual Studio对于它的Horizo​​ntalAlignment为不同的元素选择“Left”还是“Right”是不一致的。

容器元素只是默认窗口中的默认网格 - 它可以最小化但不能调整大小。 。 。

<Window x:Class="Caller1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="500" Width="1200" ResizeMode="CanMinimize"> 
    <Grid Height="460"> 

的结果是，我要浪费大量的时间编辑之间去运行我的应用程序“调整”我的布局。什么阻止“所见即所得”布局编辑器匹配运行时布局，以及如何让它们对应？

在此先感谢。

Answer 1

我看不到你的图像（哑工防火墙），但我可以告诉你的XAML你使用的是Grid错误。我明白，这可能是编辑的错，但严重的是，您不应该在所有元素上设置Width和Height属性。

如果您想为Grid的孩子设置固定尺寸，请设置一些RowDefinition s和ColumnDefinition s并设置这些尺寸。如果你这样做，你的布局更容易处理（并且可能会更精确的设计师）。所以，你的第一个Grid是这样的：

<Grid Margin="12,0,0,0"> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="117" /> 
    <ColumnDefinition Width="Auto" /> 
    <ColumnDefinition Width="138" /> <!-- This is your desired width + horizontal margins --> 
    <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <Button x:Name="butProjPattern" 
      Grid.Column="0" 
      Content="ProjectPattern" 
      VerticalAlignment="Center" 
      Click="butProjPattern_Click" /> 
    <TextBlock x:Name="ResultProjPattern" 
      Grid.Column="1" 
      Margin="6,0,0,0" 
      Text="(result)" 
      VerticalAlignment="Center" /> 
    <TextBlock x:Name="TextBlockPattern" 
      Grid.Column="2" 
      Margin="3,0,0,0" 
      Padding="4" 
      Text="  (pattern file)" 
      Background="#FFF1F3FF" /> 
    <Button x:Name="buttonPatternBrowse" 
      Grid.Column="3" 
      Content="...browse" 
      Margin="22,0,0,0" 
      VerticalAlignment="Center" 
      Padding="2,1" 
      Click="buttonPatternBrowse_Click" /> 
</Grid> 

我要注意的另一件事是，我把这个Kaxaml，这是非常适合你的XAML布局的快速原型后，我注意到，你应该只是使用StackPanel。第一格栅真的是这样简单得多的实现（你必须设置Width一对夫妇的项目相匹配的布局）：

<StackPanel Margin="12,0,0,0" Orientation="Horizontal"> 
    <Button x:Name="butProjPattern" 
      Content="ProjectPattern" 
      Width="117" 
      Click="butProjPattern_Click" /> 
    <TextBlock x:Name="ResultProjPattern" 
      Margin="6,0,0,0" 
      Text="(result)" 
      VerticalAlignment="Center" /> 
    <TextBlock x:Name="TextBlockPattern" 
      Margin="3,0,0,0" 
      Padding="4" 
      Width="135" 
      Text="  (pattern file)" 
      Background="#FFF1F3FF" /> 
    <Button x:Name="buttonPatternBrowse" 
      Content="...browse" 
      Margin="22,0,0,0" 
      VerticalAlignment="Center" 
      Padding="2,1" 
      Click="buttonPatternBrowse_Click" /> 
</StackPanel> 

Answer 2

这个回答是不是直接回答你的实际问题，而是一个建议，以避免你的问题。

当您对Margin属性使用精确控件定位时，您经常会遇到UI控件放置问题。这是一个很好的过程（特别是在WPF中）允许控件使用可用的各种Alignment选项来放置和/或空间自己。我一直设法使用这种方法获得所需的布局。

例如，如果您使用了Grid或StackPanel来安排控件，则不会遇到此问题。我知道许多WPF开发人员甚至不会在Visual Studio中使用设计器，因为您提到的问题......在拖放控件然后去到XAML以删除不需要的值之后，它通常会更快地工作只需自己输入XAML即可。

如果你真的想知道为什么Visual Studio的设计师......呃......无法正常工作，您可能有更多的运气询问Microsoft Developer Forum，您的问题可能实际上被微软员工看到。