Having multiple controls in one WPF grid cell

Shawn picture Shawn · Apr 12, 2012 · Viewed 22.2k times · Source

New to WPF and learing through tutorials online and have a couple of questions:

(1) I am trying to have multiple buttons of different widths appear side by side in one WPF grid cell. However, they seem to always stack up on each other. What am I missing out on?

(2) Is it possible to control the absolute starting left position for each button within the grid cell?

Thanks.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<ScrollViewer>
    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          ShowGridLines ="True" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="60*" />
        </Grid.ColumnDefinitions>

        <Button Content="Button No. 1" Grid.Row="0" Grid.Column="0" />

        <GridSplitter HorizontalAlignment="Center" Width="6"
                      Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" />

        <Button Content="Button No. 4-2" Grid.Row="0" Grid.Column="2" Width="100" />
        <Button Content="Button No. 4-1" Grid.Row="0" Grid.Column="2" Width="50" />

    </Grid>
</ScrollViewer>
</Page>

Based on the answer from Salvador, this works:

        <Button VerticalAlignment="Top" HorizontalAlignment="Left" Content="Button No. 1" Grid.Row="0" Grid.Column="0" Height="100"/>

        <GridSplitter HorizontalAlignment="Center" Width="6"
                      Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" />

        <Button VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0" Content="Button No. 4-2" Grid.Row="0" Grid.Column="2" Height="100" Width="100" />
        <Button VerticalAlignment="Top" HorizontalAlignment="Left" Margin="400,0,0,0" Content="Button No. 4-1" Grid.Row="0" Grid.Column="2" Height="150" Width="50" />

Thanks!

Answer

Dan Rigby picture Dan Rigby · Apr 12, 2012

You may want to use one of the Container Controls (like a Canvas, DockPanel, StackPanel) in the grid position (Row # + Column #) and then place your controls into that.

This makes it much easier to layout more than one control in a single grid position.