Luke Le
Luke Le

Reputation: 778

Creating a grid with three equal columns stretched horizontally

I want to define a grid with three columns and same witdh (that mean each column has with is 1/3 of the total width of grid). And Grid must stretch horizontally.

<Border Grid.IsSharedSizeScope="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition  Width="*" SharedSizeGroup="A"/>
                <ColumnDefinition  Width="*" SharedSizeGroup="A"/>
                <ColumnDefinition  Width="*" SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="A"/>
            <TextBlock Grid.Column="1" Text="B"/>
            <TextBlock Grid.Column="2" Text="C"/>
    </Border>

Above code xaml, three column has same width but the grid is not stretch horizontally. Thanks for helping me :>

Upvotes: 2

Views: 2901

Answers (2)

Luke Le
Luke Le

Reputation: 778

A simple solution that is use UniformGrid :

<UniformGrid Columns="3" >
    <TextBlock Text="A"/>
    <TextBlock Text="B"/>
    <TextBlock Text="C"/>
</UniformGrid>

Upvotes: 2

AndrewJE
AndrewJE

Reputation: 868

Here you go.

Add HorizontalAlignment="Stretch" to the grid component.

<Border>
    <Grid HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="*" SharedSizeGroup="A"/>
            <ColumnDefinition  Width="*" SharedSizeGroup="A"/>
            <ColumnDefinition  Width="*" SharedSizeGroup="A"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="A"/>
        <TextBlock Grid.Column="1" Text="B"/>
        <TextBlock Grid.Column="2" Text="C"/>
    </Grid>
</Border>

Upvotes: 3

Related Questions