CODEWITHSUNDEEP
wpflayoutgridcontainers
MickeySixx
MickeySixx

Reputation: 195

WPF Container/grid layout

I need to create a WPF container that can display a collection of 3 different controls types. Each control's height and width is based off the others. Ex, if controlA is 200X200, controlB will be 100X200 and controlC will be 50X50. I need to find out how I can reate a container smart enough to arrange these controls by finding the best layout based on available space and the quantity of each control type.

Take the case below where we have 1 instance of controlA, 1 instance of controlB and 2 instances of controlC. Notice how this elegantly positioned giving it a compact look as opposed to a list of sequential controls.

container http://onlinegolfpool.com/images/grid.png

Any ideas on how to tackle? Should I use a grid and calculate this on my own?

Thanks in advance

Upvotes: 2

Views: 2445

Answers (2)

dreamerkumar
dreamerkumar

Reputation: 1550

My suggestion is to use a stackpanel instead of gridpanel. Then give hardcoded width to any control you want and rest of the area will adjust itself.

<StackPanel Orientation=Horizontal>
    <leftcontrol/>
    <StackPanel Orientation=Vertical>
        <firstcontrol/>
        <StackPanel Orientation=Horizontal>
            <bottomLeftControl/>
            <bottomRightControl/>
        </StackPanel> 
    </StackPanel>
</StackPanel>

Upvotes: 0

Sergei B.
Sergei B.

Reputation: 3227

You definitely should use Grid, but don't even think of calculating this on your own :) Use asterisk(*) to define relative sizes for each cell. WPF will do the rest for you.

Example:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Rectangle Fill="Pink" Stroke="Black" Grid.RowSpan="2"/>
    <Rectangle Fill="Blue" Stroke="Black" Grid.Column="1" Grid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Stroke="Black" Grid.Row="1" Grid.Column="1"/>
    <Rectangle Fill="Yellow" Stroke="Black" Grid.Row="1" Grid.Column="2"/>
</Grid>

Asterisk is very powerful, and many people don't even know about it :) Enjoy!

Upvotes: 2

Related Questions