CODEWITHSUNDEEP
xamlwindows-store-appswindows-8.1
aherrick
aherrick

Reputation: 20171

Windows 8.1 XAML Wrap Stackpanel Children

I have a bunch of listviews inside a Stackpanel with a horizontal orientation. I want the lists to wrap once the reach the end of the Stackpanel.

This seems easy to me but I cannot seem to figure out how.

enter image description here

Upvotes: 1

Views: 704

Answers (3)

Zaki Choudhury
Zaki Choudhury

Reputation: 1537

You can try it with an ItemsControl and use WrapGrid as its ItemsPanel template. Here is the code i am using:

<ItemsControl Width="Auto" Height="Auto" IsHitTestVisible="False" ItemsSource="{Binding AnnotationTypesShown}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Height="50" Width="Auto" Margin="0,0,5,0">
                        <Image Source="{Binding IconImage}" Stretch="UniformToFill" Margin="0,0,0,0" Width="25" Height="25"/>
                        <TextBlock Text="{Binding TypeName}" Width="Auto" Margin="5,10,5,0" Style="{StaticResource DefaultTextBlockStyle}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" VerticalAlignment="Top"></WrapGrid>                        
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

Here is the result on full view enter image description here

and in wrapped view

enter image description here

Upvotes: 0

letiagoalves
letiagoalves

Reputation: 11302

You can't do it using a StackPanel as the container. Usually I use a Grid as the parent container. It's more flexible.

Something like this:

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

    <ListView Grid.Column="0"/>
    <ListView Grid.Column="1"/>
    <ListView Grid.Column="2"/>
</Grid>

Upvotes: 0

Nate Diamond
Nate Diamond

Reputation: 5575

StackPanel does not wrap. Look at WrapGrid instead.

Upvotes: 2

Related Questions