c# wpf how i set top element to fill and bottom fixed Height?-CodePudding

ok, is pathetic but i am at this more than 4 hour and cant figure out with this don't work, i tried stackpanel, grid, dockpanel, and everything comes to the same result

what i need is simple, the bottom element that will have buttons will have fixed height and another panel/section at the top filling all the remaining space, but the top one never works or it overlaps the bottom one or it keep at minimal Height at the top.

overlaps:

 <Grid>
    <Grid VerticalAlignment="Stretch" ></Grid>
    <Grid VerticalAlignment="Bottom" Height="100"></Grid>
</Grid>

one the top one become Height = 0

<Grid>
    <Grid VerticalAlignment="Top" ></Grid>
    <Grid VerticalAlignment="Bottom" Height="100"></Grid>
</Grid>

how i make the top one fill all the space?

CodePudding user response：

You should create rows in your grid like this:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
            <Grid Grid.Row="0"> 
                <!--Top Grid is always going to fill all remaining space not used by bottom grid-->
            </Grid>
            <Grid Height="100" Grid.Row="1"> 
                <!--Bottom Grid will only take 100 px-->                    
            </Grid>
    </Grid>

Its fine we all start somewhere and layout containers in WPF might be confusing at times

CodePudding user response：

Define your Grid like so:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" Background="green"/>
    <Grid Grid.Row="1">
        <Button Content="MyButton"/>
    </Grid>
</Grid>

Defining RowDefinitions should do the trick.

CodePudding user response：

I'm posting this purely to show how dockpanel works. I rarely use it myself but for completeness:

I would be inclined to have a fixed height bottom row in a grid myself.

As suggested in another answer.

Auto is also valid if I had some standard styling set button height and width.

Here's how dockpanel could work.

<DockPanel LastChildFill = "True">
    <StackPanel Orientation="Horizontal"
                DockPanel.Dock = "Bottom">
        <Button Content="Button One"/>
        <Button Content="Button Two"/>
    </StackPanel>
    <Grid DockPanel.Dock="Top"
          Background="Yellow"/>
</DockPanel>

You need some other panels for the two areas.

But you may want them anyway.

The yellow grid will fill by default but I have explicitly set LastChildFill. Whatever you put in that dockpanel last will fill remaining space.