开发者

WPF/Silverlight layout best practice

开发者 https://www.devze.com 2022-12-21 06:36 出处:网络
What would the best practice be for laying out the following item? Valid XHTML http://www.hughgrice.com/layout.gif.

What would the best practice be for laying out the following item?

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

I am particularly interested in what controls I should use and how I position the delete icon to appear on the right-ha开发者_Go百科nd side and the tools icon to appear in the middle always?

Thanks in advance.


My preferred panel for this case is the DockPanel rather than a Grid:

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


How about this:

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


The Grid is good for this:-

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

This approach decouples the basic Grid of Left, Center and Right content from the content itself. In your example the Left StackPanel will have two items in it. The content of each panel need only be concerned about its layout relative to other sibling items in the panel.

0

精彩评论

暂无评论...
验证码 换一张
取 消