包装面板项目仅填充页面的一半

Question

我试图在网格中添加 18 张图片，使其动态化我从我的 ModelView 中的文件夹中读取图片，创建每个对象并通过 XAML 中的绑定添加它们。

我的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>

下面看起来像这样：

我希望它看起来如何 // 漂亮且舒展 =)

有人有什么建议吗？ :) 谢谢！

Answer 1

试试这个：

    <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>

包装面板项目仅填充页面的一半

Wrappanel items only populate half the page

c#

wpf

xaml

wrappanel

mvvm