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

当我在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"> 

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

提前致谢。


我看不到你的图像(傻瓜工作防火墙),但我可以告诉你的XAML你使用的Grid错误。 我知道这可能是编辑器的错,但严重的是,您不应该在所有元素上设置WidthHeight属性。

如果你想为Grid的孩子设置一个固定大小,建立一些RowDefinitionColumnDefinition并设置这些大小。 如果你这样做,你的布局更容易处理(并且可能会更精确的设计师)。 所以,你的第一个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>

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

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

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

如果你真的想知道为什么Visual Studio设计者......呃......不能正常工作,那么你可能会在微软开发者论坛上有更多的运气问,你的问题可能会被微软员工看到。

链接地址: http://www.djcxy.com/p/60147.html

上一篇: Visual Studio 2010 XAML layout editor not WYSIWYG

下一篇: XAML Editor Extraordinarily Slow