Wrappanel 项目仅占页面的一半答案

【问题标题】：Wrappanel items only populate half the pageWrappanel 项目仅占页面的一半
【发布时间】：2016-02-18 14:37:46
【问题描述】：

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

我的xml：

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

如下所示：

我希望它看起来如何 // 漂亮且拉伸 =)

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

【问题讨论】：

标签： c# wpf xaml mvvm wrappanel

【解决方案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>

【讨论】：

我建议在 DataTemplate 中的图像上设置 Stretch= UniformToFill
完美，您让我走上了正确的道路！非常感谢