CODEWITHSUNDEEP
wpflayoutstackpanel
Mark
Mark

Reputation: 1894

Panel layout to uniformly squeeze items to fit

I'm looking for a WPF layout that works like a horizontal stack panel, such that items choose their own ideal width when there is enough space for them to fit, but additionally squashes items evenly when they don't fit in the available panel space.

I can get close to what I want with this:

    <Grid Width="400" Height="80">
        <UniformGrid Rows="1"  HorizontalAlignment="Left">
            <Button Content="Long Button" />
            <Button Content="Very Long Button" />
            <Button Content="Button" />
            <Button Content="Button" />
            <Button Content="Button" />
        </UniformGrid>
    </Grid>

The problem here being the UniformGrid keeps all of the buttons the same width.

If I replace the UniformGrid with a StackPanel, then the items size correctly, but when they extend beyond the maximum size the StackPanel can grow to (thanks to its fixed size parent), they are clipped out, instead of being forced into the smaller area.

So, is there a way I can get the behavior I want with the out-of-the box panels?

Upvotes: 0

Views: 1971

Answers (2)

brunnerh
brunnerh

Reputation: 184296

So, is there a way I can get the behavior I want with the out-of-the box panels?

No, if you look at all the existing panels you will see there is not one which fits the requirements, implement your own.

Upvotes: 1

Rui Gaspar
Rui Gaspar

Reputation: 154

If the size of buttons is static, you can use this:

<Grid Width="400" Height="80">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Content="Long Button" />
    <Button Grid.Column="1" Content="Very Long Button" />
    <Button Grid.Column="2" Content="Button" />
    <Button Grid.Column="3" Content="Button" />
    <Button Grid.Column="4" Content="Button" />
</Grid>

Upvotes: 0

Related Questions