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選擇“左”還是“右”也不一致。

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

<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選項自行放置和/或Alignment 。 我一直設法使用這種方法來獲得所需的布局。

例如，如果使用Grid或StackPanel布置控件，則不會遇到此問題。 我所知道的許多WPF開發人員甚至都不用在Visual Studio中使用設計器，因為您提到的問題...在拖放控件然后轉到XAML刪除不需要的值后，它通常可以更快地解決只需自己輸入XAML。

如果您真的想知道為什么Visual Studio設計器...好吧，呃...不能正常工作，那么您可能會在Microsoft Developer Forum上遇到更多的運氣，您在哪里實際上可能會被Microsoft員工看到。