WPF/Silverlight布局最佳实践

Question

如何最佳地布局以下项目？

有效的XHTML http://www.hughgrice.com/layout.gif.

我特别想知道我应该使用哪些控件以及如何定位删除图标始终出现在右侧，而工具图标始终出现在中间？

提前谢谢。

- Burt

---

我得出结论，混合使用 WPF 和 Silverlight 的问题常常是个坏主意。如果你在使用 WPF，DockPanel 显然是一个正确的答案。然而，在使用 Silverlight 的情况下，答案就不是那么明确了。 - AnthonyWJones

Answer 1

在这种情况下，我更喜欢使用 DockPanel 而不是 Grid：

<DockPanel>
    <Button>Add</Button>
    <Label>This is a label</Label>
    <Button DockPanel.Dock="Right">Del</Button>
    <Button HorizontalAlignment="Center">Setting</Button>
</DockPanel>

- Mart

---

DockPanel在Silverlight中不是开箱即用的，但它可以在工具包中获得。如果您有其他原因需要包含工具包控件，我同意DockPanel更好地描述了意图。 - AnthonyWJones

你对于Silverlight是正确的，但是由于我无法没有DockPanel，所以我从工具包中提取了它。这样我就避免了完全加载工具包。 - Mart

Answer 2

这个怎么样：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Image Source="Plusbutton" />
    <Label Text="This is a Label" Margin="3,0,3,0" Grid.Column="1" />
    <Image Source="Gear" HorizontalAlignment="Center" Grid.Column="2" />
    <Image Source="Minusbutton" Margin ="3,0,3,0" Grid.Column="3" />
</Grid>

- Ana Betts

---

不错，但我建议为了清晰起见添加Grid.Column="0"。 - Josh

为什么总是使用网格布局？与 DockPanel 相比，它过于冗长且没有任何优势。 - Mart

在Silverlight中，Grid不需要像这样丑陋的XAML命名空间前缀：<Toolkit:DockPanel ...>，<Image Toolkit:DockPanel.Dock="Left" ...>等。希望当它最终成为主要控件集的一部分时，这种丑陋的写法会消失。 - Josh

使用t:作为命名空间前缀而不是Toolkit:没有任何问题。 - Robert Rossney

@Mart 在这种情况下，你可以使用 DockPanel，但通常 Grid 可以让你组合那些需要重复嵌套 DockPanels 和 StackPanels 的元素，而 Grid 更容易实现。 - Ana Betts

我肯定同时使用Grid和DockPanel，但我静态地更多地使用DockPanel。当很明显它是一个“网格”时，我会使用它，否则像UniformGrid这样的面板就不常用了。再说，在Silverlight中你的选择就更少了。 - Mart

Answer 3

网格布局对此非常有用：-

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <StackPanel HorizontalAlignment="Left" Grid.Column="0">
     <!-- Your content here -->
   </StackPanel>
   <StackPanel HorizontalAlignment="Center" Grid.Column="1">
     <!-- Your content here -->
   </StackPanel>
   <StackPanel HorizontalAlignment="Right" Grid.Column="2">
     <!-- Your content here -->
   </StackPanel>
 </Grid>

这种方法将左、中、右内容的基本网格与内容本身分离。在您的示例中，左侧StackPanel将有两个项目。每个面板的内容只需关心其相对于面板中其他同级项的布局。

- AnthonyWJones

---

不错，但我建议添加 Grid.Column="0" 以增加清晰度。 - Josh

@Josh：为了让你感觉更舒适，我已经添加了。 ;) - AnthonyWJones

哈哈，当涉及到XAML时，我知道我很讨厌。 - Josh