Question

我正在尝试完成一个布局，当我向集合中添加项目时，项目在网格中显示较小，以便：

有1个项目是全屏 2是全屏每个项目3个是屏幕的1/3 随着第4行，它会添加一行并再次在7 10等元素

因此，对于6个元素，结果与包含maxcolumn = 3的包裹相同，但是少于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;

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

1 个答案: