Using stack panel - vertical + horizontal

Can a stack panel grow vertically as well as horizontally ?

For eg,

If there are 3 stack panel items, then,

Item1

Item2

Item3

If there are 5 stack panel items then,

Item1 Item4

Item2 Item5

Item3

(At most in a row, there can be a maximum of n items. If it exceeds, a new row is started)

One more thing: I am creating the stack panel items at run-time (code-behind)!

this.itemsPanel.Children.Add(item1);
this.itemsPanel.Children.Add(item2);
this.itemsPanel.Children.Add(item3);
this.itemsPanel.Children.Add(item5);

Upvotes: 3

Views: 2641

Answers (1)

patrick
patrick

Reputation: 16949

You want a ListBox with a WrapPanel, but you prob want your objects to be the same size, width and height, which will be equal to your widest and tallest object, that's why we use a grid with IsSharedSizeScope with a WrapPanel.

<ListBox Name="ButtonList" 
                 HorizontalContentAlignment="Stretch" 
                 BorderThickness="0" 
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                 Padding="0"  
                 Background="Transparent" 
                 Margin="0"
                 Grid.IsSharedSizeScope="True"
                 >


            <ListBox.ItemsPanel>
                <ItemsPanelTemplate >
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <!-- you need the grid, otherwise buttons are different heights depending on the control -->
                        <Grid.RowDefinitions>
                            <RowDefinition SharedSizeGroup="row1"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="col1"/>
                        </Grid.ColumnDefinitions>
<!-- put some control here --> 

  </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Upvotes: 3

Related Questions