0

当我在 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 对于不同元素的水平对齐选择“左”还是“右”也不一致。

容器元素只是默认 Window 中的默认 Grid - 它可以最小化但不能调整大小。. .

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

结果是我不得不在编辑器和运行我的应用程序之间浪费大量时间来“调整”我的布局。是什么阻止“所见即所得”布局编辑器匹配运行时布局，我怎样才能让它们对应？

提前致谢。

4

2 回答 2

4

我看不到您的图像（愚蠢的工作防火墙），但我可以通过您的 XAML 判断您使用Grid错误。我知道这可能是编辑器的错，但说真的，您不应该在所有元素上设置WidthandHeight属性。

如果您想要 s 的孩子的固定尺寸Grid，请设置一些RowDefinitions 和ColumnDefinitions 并设置这些尺寸。如果您这样做，您的布局会更容易使用（并且在设计器中可能会更准确）。所以，你的第一个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>
于 2013-08-28T14:52:47.107 回答
1

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

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

例如，如果您使用Grid或StackPanel来安排您的控件，您就不会遇到这个问题。由于您提到的问题，我认识的许多 WPF 开发人员甚至都懒得在 Visual Studio 中使用设计器......只需自己键入 XAML。

如果您真的想知道为什么 Visual Studio 设计器...嗯，呃...不能正常工作，您可能会更幸运地在Microsoft 开发人员论坛上提问，您的问题实际上可能会被 Microsoft 员工看到。

于 2013-08-28T14:47:09.857 回答