Visual Studio 2010 XAML布局编辑器不提供“所见即所得”的功能

Question

When I'm creating WPF layouts in Visual Studio 2010 I just drag and drop controls from the Toolbox onto the default element, typically a Grid. When I do this the spacing shown in Visual studio does not match what's displayed at runtime. For example, here are the visual editor and runtime results, respectively, for two layouts . . .

. . . and . . .

... notice the spacing is altered.
Here's the XAML that was generated for the two examples . . .

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

...and...

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

I added button handlers, text content, etc, but the layout is strictly what was generated by the Visual Studio layout editor. One thing I noticed is that even though it's drag-and-drop from the Toolbox onto the Grid, Visual Studio is inconsistent about whether it chooses "Left" or "Right" for its HorizontalAlignment for different elements.

The container element is just a default Grid in a default Window - it can minimize but not resize . . .

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

The result is that I have to waste lots of time going between the editor and running my app to "tweak" my layout. What prevents the "WYSIWYG" layout editor from matching the runtime layout and how can I get them to correspond?

Thanks in advance.

Answer 1

I can't see your images (dumb work firewall), but I can tell by your XAML that you are using the Grid wrong. I understand that this may be the fault of the editor, but seriously, you shouldn't be setting the Width and Height properties on all your elements.

If you want a fixed size for the Grid 's children, set up some RowDefinition s and ColumnDefinition s and set those sizes. Your layout is much easier to work with (and will probably be more accurate in the designer) if you do this. So, your first Grid would look like this:

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

The other thing I want to note is that after I put this in Kaxaml , which is great for rapid prototyping of your XAML layouts, I noticed that you should really just be using a StackPanel . The first grid could really be this much simpler implementation (you will have to set the Width on a couple of your items to match the layout):

<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

This answer is not directly an answer to your actual question, but instead a suggestion to avoid your problem.

You will often get UI control placement problems when you use exact control positioning with the Margin property. It is a good procedure (and in WPF especially) to allow controls to place and/or space themselves using the various Alignment options available. I have always managed to get the desired layout using this method.

For example, had you used a Grid or StackPanel to arrange your controls, you would not have come across this problem. Many WPF developers that I know don't even bother using the designer in Visual Studio because of the problems that you mentioned... after dragging and dropping a control and then going to the XAML to remove unwanted values, it often works out quicker to simply type the XAML myself.

If you really want to know why the Visual Studio designer... well, er... doesn't work properly, you may have more luck asking on the Microsoft Developer Forum , where you question might actually get seen by a Microsoft employee.