WPF / Silverlight布局最佳实践

时间:2010-02-21 18:55:16

标签: .net wpf silverlight xaml

列出以下项目的最佳做法是什么?

Valid XHTML http://www.hughgrice.com/layout.gif

我特别感兴趣的是我应该使用哪些控件以及如何将删除图标放在右侧,并且工具图标始终显示在中间?

提前致谢。

3 个答案:

答案 0 :(得分:5)

本案例的首选面板是DockPanel而不是Grid:

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

答案 1 :(得分:3)

这个怎么样:

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

答案 2 :(得分:3)

Grid对此有好处: -

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

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