How to equally divide the space of the StackPanel between the children

Question

How to equally divide the space of the StackPanel between the children

Navigation

#1 by (2 votes)

1

I have a Stack Panel with some buttons inside, I want the Stack's available space to be equally divided between the buttons.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="USUÁRIOS" Height="auto"/>
            <Button Content="IM" Height="auto" />
            <Button Content="COMPOSIÇÃO" Height="auto" />
            <Button Content="DEFEITOS" Height="auto" />
            <Button Content="PERDAS" Height="auto" />
            <Button Content="DIÁRIO" Height="auto" />
            <Button Content="GERENCIAR" Height="auto" />
            <Button Content="GED" Height="auto"/>
        </StackPanel>

The output is as follows:

I want the buttons to fill in all that white space with equal sizes.

grid wpf inline

asked by anonymous 15.07.2018 / 21:12

1 answer

Conversion of SESSION MySQL to SESSION in PDO How to put a gradient in front of two images that are background?

score 2 · Accepted Answer

The stackpanel would not be very usual in this case, I recommend you use a grid and set its columns by distributing the buttons on each of the columns.

<Grid Height="35">

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

    <Button Content="USUÁRIOS" Height="auto" Grid.Column="0"/>
    <Button Content="IM" Height="auto"  Grid.Column="1"/>
    <Button Content="COMPOSIÇÃO" Height="auto" Grid.Column="2"/>
    <Button Content="DEFEITOS" Height="auto" Grid.Column="3"/>
    <Button Content="PERDAS" Height="auto" Grid.Column="4"/>
    <Button Content="DIÁRIO" Height="auto" Grid.Column="5"/>
    <Button Content="GERENCIAR" Height="auto" Grid.Column="6"/>
    <Button Content="GED" Height="auto" Grid.Column="7"/>
</Grid>

Where "Grid.ColumnsDefinition" divides the grid by the amount of "ColumnDefinition" you enter. On the buttons you only define each one in its respective column. When you increase or decrease the screen at runtime, your buttons will continue to adjust evenly.