如何实现自适应布局，其中项目在网格中调整大小以适应您添加的项目？

Question

我正在尝试完成一个布局，其中当我将项目添加到集合中时，项目在网格中显示得更小，这样：

有 1 个项目是全屏 2是全屏对于 3 个，每个项目占屏幕的 1/3 第 4 个它添加一行并在 7 10 等元素处再次执行

因此，如果有 6 个元素，结果与 maxcolumn = 3 的 wrapgrid 相同，但小于 3 的项目仍然占据所有大小（这是为了显示图片以供选择，所以如果图片较少，我希望它们更大，1 或 2 张图片的情况在我的情况下很常见。

编辑：我试图实现的一个很好的例子是 WPF 的 UniformGrid，它的布局会随着您添加项目而调整。

Answer 1

有多种方法可以实现这种效果。下面是使用 ViewBox 和 GridView 的解决方案。

在XAML中（您可以使用绑定的 IconUri 将矩形更改为图像）：

<Viewbox x:Name="box">
    <GridView x:Name="test" Margin="0,0,0,0" MaxHeight="800" MaxWidth="800" Grid.Column="1" >
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="20">
                <TextBlock Text="{Binding Name}" FontWeight="Bold" 
                       Style="{StaticResource BaseTextBlockStyle}"/>
                <Rectangle Width="100" Height="30" Fill="Red" />
                <TextBlock Text="{Binding IconUri}" TextWrapping="NoWrap" 
                       Style="{StaticResource BodyTextBlockStyle}" />
            </StackPanel>

        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
           <ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <GridView.GroupStyle>
        <GroupStyle HidesIfEmpty="True">
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Background="LightGray" Margin="0">
                        <TextBlock Text='{Binding Name}' 
                               Foreground="Black" Margin="30"
                               Style="{StaticResource HeaderTextBlockStyle}"/>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>

        </GroupStyle>
    </GridView.GroupStyle>
    </GridView>
</Viewbox>

反恐精英中：

 cvsProjects = new List<Project>();
 Project item0 = new Project() { Name = "pic1", IconUri = "Images/p1.jpg"};
 Project item1 = new Project() { Name = "pic2", IconUri = "Images/p2.jpg" };
 Project item2 = new Project() { Name = "pic3", IconUri = "Images/p3.jpg" };
 Project item3 = new Project() { Name = "pic4", IconUri = "Images/p4.jpg" };
 Project item4 = new Project() { Name = "pic5", IconUri = "Images/p5.jpg" };
 Project item5 = new Project() { Name = "pic6", IconUri = "Images/p6.jpg" };
 cvsProjects.Add(item0);
 cvsProjects.Add(item1);
 cvsProjects.Add(item2);
 cvsProjects.Add(item3);
 cvsProjects.Add(item4);
 cvsProjects.Add(item5);
 test.ItemsSource = cvsProjects;

如何实现自适应布局，其中项目在网格中调整大小以适应您添加的项目？

How to achieve an adaptive layout where items resize in a grid to fit as you add items?

windows-10

uwp