ansaurus

Question

Answer 1

+3 A:

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>

Paul Betts 2010-02-21 19:06:51

Good but I would suggest adding the Grid.Column="0" for clarity.

Josh Einstein 2010-02-21 19:13:59

Why always use a Grid for layout? It is too verbose for no benefit compared to a DockPanel.

Mart 2010-02-21 19:18:32

In Silverlight anyway, Grid doesn't require a hideous XAML namespace prefix like: <Toolkit:DockPanel ...>, <Image Toolkit:DockPanel.Dock="Left" ...> etc. When it finally becomes part of the main control set hopefully this ugliness will go away.

Josh Einstein 2010-02-21 19:37:56

There's nothing wrong with using `t:` as a namespace prefix instead of `Toolkit:`.

Robert Rossney 2010-02-21 20:49:56

@Mart In this case, you could get away with a DockPanel, but often Grid lets you compose things that you would have to nest DockPanels and StackPanels repeatedly that Grid can do easier.

Paul Betts 2010-02-22 05:06:51

I certainly use both Grid and DockPanel, but I statically use more DockPanel. When it clearly is a "grid" I use it, otherwise there are underused panels like UniformGrid. Again you have less choice with Silverlight.

Mart 2010-02-22 10:15:49

Answer 2

+3 A:

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.

AnthonyWJones 2010-02-21 19:08:01

Good but I would suggest adding the Grid.Column="0" for clarity.

Josh Einstein 2010-02-21 19:14:23

@Josh: Added to ease your sense of aesthetics. ;)

AnthonyWJones 2010-02-21 19:16:46

LOL I know I am such a pain in the ass when it comes to XAML.

Josh Einstein 2010-02-21 19:36:08

Answer 3

+5 A:

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>

Mart 2010-02-21 19:12:36

DockPanel doesn't exist out of the box in Silverlight, its available in the toolkit though. If you had other reasons to include toolkit controls I would agree DockPanel describes the intent much better.

AnthonyWJones 2010-02-21 19:20:17

You're right for Silverlight, but as I can't live without the DockPanel I extracted it from the toolkit. This way I avoid loading the toolkit entirely.

Mart 2010-02-21 19:26:13

ansaurus

tags:

views:

answers:

WPF/Silverlight layout best practice

related questions