Divide first row in the grid to four equal parts WPF

Question

I used to draw something like tabcontrol in WizardPage control of extended WPF toolkit.

Relevant xaml code:

<xctk:WizardPage x:Name="Page1" PageType="Blank" Width="540"
             BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="200"/>
            </Grid.RowDefinitions>

            <DockPanel Grid.Row="0">
                <TextBox Width="135" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
                <TextBox Width="135" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
                <TextBox Width="135" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
                <TextBox Width="135" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
            </DockPanel>
            <Grid Grid.Row="1">

                <GroupBox Header="Group 1" FontSize="16" Height="80" Margin="0,0,0,90" >
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="270"/>
                            <ColumnDefinition Width="270"/>
                        </Grid.ColumnDefinitions>
                        <RadioButton x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Left" Margin="30,30,0,0"/>
                        <RadioButton x:Name="RadioButUpdate" Content="Update" Grid.Column="1" FontSize="13.333" Focusable="False" HorizontalAlignment="Left" Margin="30,30,0,0"/>
                    </Grid>
                </GroupBox>

            </Grid>

But text boxes inside grid aren't at the same width though I set each of them to same width which is the total WizardPage width/4 (since I have four text boxes).

Any solution please?

Thanks!

Bruno Garnier · Accepted Answer · 2016-02-28T21:12:31.033

To equally divide in 4 columns , you should use a grid, instead of a DockPanel. Although it is unnecessary to precide the Width. Just indicate that you have 4 columns :

<Grid>    
    <Grid.RowDefinitions>
        <RowDefinition Height="60"/>
        <RowDefinition Height="200"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBox  Grid.Column="0" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
        <TextBox  Grid.Column="1" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
        <TextBox  Grid.Column="2"  Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
        <TextBox   Grid.Column="3"  Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
    </Grid>
        <Grid Grid.Row="1">

            <GroupBox Header="Group 1" FontSize="16" Height="80" Margin="0,0,0,90" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="270"/>
                        <ColumnDefinition Width="270"/>
                    </Grid.ColumnDefinitions>
                    <RadioButton x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Left" Margin="30,30,0,0"/>
                    <RadioButton x:Name="RadioButUpdate" Content="Update" Grid.Column="1" FontSize="13.333" Focusable="False" HorizontalAlignment="Left" Margin="30,30,0,0"/>
                </Grid>
            </GroupBox>

        </Grid>
    </Grid>

you can also simplify you xaml by using only 1 grid. Grid.ColumnSpan is handy is such a case :

<Grid>    
    <Grid.RowDefinitions>
        <RowDefinition Height="60"/>
        <RowDefinition Height="80"/>
        <RowDefinition Height="200"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

        <TextBox   Grid.Row="0" Grid.Column="0" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
        <TextBox  Grid.Row="0"  Grid.Column="1" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
        <TextBox  Grid.Row="0"  Grid.Column="2"  Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
        <TextBox   Grid.Row="0"  Grid.Column="3"  Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
        <GroupBox Header="Group 1"  Grid.Row="2" Grid.Column="0"  Grid.ColumnSpan="4" FontSize="16"  Margin="0,0,0,90" />
        <RadioButton  Grid.Row="2" Grid.Column="0"  Grid.ColumnSpan="2" x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Center" Margin="30,30,0,0"/>
        <RadioButton  Grid.Row="2" Grid.Column="2"  Grid.ColumnSpan="2"  x:Name="RadioButUpdate"  Content="Update"  FontSize="13.333" Focusable="False" HorizontalAlignment="Center" Margin="30,30,0,0"/>
</Grid>

Divide first row in the grid to four equal parts WPF

1 Answers1