Windows 8.1 how to automatically wrap grid items?

I am creating a generic app and my Win8.1 app needs to display a grid of items. Usually the grid is 3 columns, but on smaller screens I want the elements to wrap so that there are only 2 columns (or even 1). This is my code:

<GridView ItemsSource="{Binding Regions}" IsItemClickEnabled="True">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" MinWidth="400" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="10">
                <Image Source="{Binding Code, Converter={StaticResource FlagIconConverter}, ConverterParameter='/Assets/Icons/Flags/{0}.png'}" Width="30" />
                <TextBlock Text="{Binding NativeName}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,10" VerticalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

      

Whenever I make the app smaller, the items don't automatically wrap. I tried to solve this by changing the property MaximumRowsOrColumns

to VisualStateManager

, but that didn't work because for some reason it couldn't access mine WrapGrid

. Changing the property from the code didn't work because again it couldn't access the WrapGrid.

I've tried this with both with WrapGrid

and with ItemsWrapGrid

(what's the difference?) And ListView

and GridView

. There is no difference.

Does anyone know how to do this?

+3


source to share


1 answer


You don't have to do anything. It must be completed based on the available client area. The only thing I can think of would be forcing it to wrap - you put <GridView>

inside a fixed width container or in a sized container Auto

where you don't update the Observable Collection to notify the Grid to redraw / update.

For example, it will not be completed.

<Grid Width="1000">
    <GridView x:Name="myGridView" IsItemClickEnabled="True">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <!-- DATATEMPLATE -->
        </GridView.ItemTemplate>
     </GridView>
</Grid>

      




However, get rid of this Width=1000

and it will be completed.

Sample output 3 different sizes

enter image description here

+5


source







All Articles