Wrap Images in 3 column in a GridView

Question

I have a photo gallery GridView:

<GridView x:Name="list1" Padding="5" SelectionMode="Multiple">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Image Width="auto" Height="auto" Source="{Binding}"/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

I want the images are shown on 3 columns. But with this code images are shown for the entire width of the screen, one per line.

Answer 1

You need to constrain the image size by setting either the width or height (one of these can be auto). I think it's the Auto image size overriding how the GridView should behave.

As an example, on bigger screen like desktop, try setting image width="300" and you should see the GridView wrapping every 3 images. Reduce the width if the device is Windows Mobile so as to display at least 3 images.

The image width doesn't have to be hardwired as above -- you can make it adaptive, for instance, by using VisualState management to detect screen size together with binding and value converters to determine optimum image width. You can also do this in codebehind and you have more options to make image width more fluid and adaptive in a nice way.