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

Question

我试图完成一个布局，其中我添加项目到集合中的项目显示在网格中，使得小：

随着1项是全屏 随着二是全屏 ，每3个项是屏幕 随着第四它增加了一个行的1/3，它再次在7个10等元件

使得具有6种元素的结果是相同的，与maxcolumn = 3 wrapgrid但小于3这些项目仍然占据了所有的大小（这是为了选择显示图片，所以如果有更少的图片，我希望它们更大，并且在我的情况下，1或2图片场景是常见的）。

编辑：我想要实现的一个很好的例子是WPF的UniformGrid，其布局随着添加项目而变化。

Answer 1

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

在XAML（你可以用绑定IconUri矩形更改为IMAGE）：

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

在CS：

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;