Question

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

editor

runtime

。。。和。。。

editor

runtime

...注意间距改变了这是为两个示例生成的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也不一致为它的HorizontalAlignment为不同的元素选择“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">

结果是我不得不在编辑器和运行我的应用程序之间浪费大量时间来“调整”我的布局。什么阻止“WYSIWYG”布局编辑器匹配运行时布局以及如何使它们对应？

提前致谢。

Answer 1

我无法看到您的图片（哑工作防火墙），但我可以通过您的XAML告诉您使用了Grid错误。我知道这可能是编辑的错，但严重的是，您不应该在所有元素上设置Width和Height属性。

如果您想为Grid的孩子设置固定尺寸，请设置一些RowDefinition和ColumnDefinition并设置这些尺寸。如果您这样做，您的布局将更容易使用（并且可能在设计器中更准确）。因此，您的第一个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，您提问的地方实际上可能会被Microsoft员工看到。

Visual Studio 2010 XAML布局编辑器不是WYSIWYG

2 个答案: