Wrappanel items only populate half the page

Question

im trying to add 18 pictures in a grid, to make it dynamic i read pictures from a folder in my ModelView, creates object of each and adds them trough bindings in XAML.

My xaml:

<Page.DataContext>
    <viewModel:HomeViewModel/>
</Page.DataContext>

<ItemsControl Name="flagList" ItemsSource="{Binding Path=CurrenCountries}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel>
                <WrapPanel.Resources>
                    <Style TargetType="{x:Type Rectangle}">
                        <Setter Property="Width" Value="10"/>
                        <Setter Property="Height" Value="10"/>
                        <Setter Property="Fill" Value="Black"/>
                    </Style>
                </WrapPanel.Resources>
            </WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                    <Image Grid.Row="0" Margin="5,5" Source="{Binding Path=Photo}" />
                <TextBlock Grid.Row="1" Text="{Binding Title}" HorizontalAlignment="Center"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

The following looks like this:

How i want it to look // Nice and stretched =)

Anyone got any suggestions? :) thank you!

Answer 1

Try this:

    <ItemsControl Name="flagList" ItemsSource="{Binding Path=CurrenCountries}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="3" Columns="6" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <WrapPanel Orientation="Vertical">
                    <Image Grid.Row="0" Margin="5,5" Source="{Binding Path=Photo}" Stretch="UniformToFill" />
                    <TextBlock Grid.Row="1" Text="{Binding Title}" HorizontalAlignment="Center"/>
                </WrapPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>