gridview - 如何获得具有可变大小的gridview项目的gridview？

Question

我想在分组的网格视图中显示图像。现在所有图像都有不同的高度和宽度所以我想以原始高度宽度显示图像。我试过了WrapGrid，但没有得到输出VariableSizedWrapGrid。VirtualizingStackPanel请注意我的模型类包含图像名称（路径）、高度和宽度。那么如何显示如下所示的图像？

Answer 1

不，我怀疑你尝试过 WrapPanel。WinRT 中没有。

使用 VariableSizedWrapGrid 你会得到类似这样的结果：

使用 WrapGrid，您会得到如下结果：

快！诀窍？

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
}

public class MyViewModel
{
    public MyViewModel()
    {
        var _Random = new Random((int)DateTime.Now.Ticks);
        var _Colors = typeof(Windows.UI.Colors)
            // using System.Reflection;
            .GetRuntimeProperties()
            .Select((c, i) => new
            {
                Title = c.Name,
                Color = (Windows.UI.Color)c.GetValue(null),
                ColSpan = _Random.Next(20, 300),
                RowSpan = _Random.Next(20, 300),
            });
        this.Groups = new System.Collections.ObjectModel.ObservableCollection<object>();
        this.Groups.Add(new { Title = "Mostly Red", Children = _Colors.Where(x => x.Color.R > 200) });
        this.Groups.Add(new { Title = "Mostly Green", Children = _Colors.Where(x => x.Color.G > 200) });
        this.Groups.Add(new { Title = "Mostly Blue", Children = _Colors.Where(x => x.Color.B > 200) });
    }
    public System.Collections.ObjectModel.ObservableCollection<object> Groups { get; private set; }
}

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid.DataContext>
        <local:MyViewModel />
    </Grid.DataContext>

    <Grid.Resources>
        <CollectionViewSource 
            x:Name="MyCsv"
            IsSourceGrouped="True"
            ItemsPath="Children"
            Source="{Binding Groups}"
            d:Source="{Binding Groups, Source={d:DesignInstance Type=local:MyViewModel, IsDesignTimeCreatable=True}}" />
    </Grid.Resources>

    <GridView ItemsSource="{Binding Source={StaticResource MyCsv}}">
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Height="20" Width="20" Fill="{Binding Brush}" Margin="0,0,10,0" />
                            <TextBlock FontSize="40" Text="{Binding Title}" />
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <local:WrapPanel Orientation="Vertical" Width="2000" />
                        <!--<VariableSizedWrapGrid Margin="0,0,80,0" ItemHeight="1" ItemWidth="1" />-->
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" Margin="0,0,80,0" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Height="{Binding RowSpan}" Width="{Binding ColSpan}">
                    <Grid.Background>
                        <SolidColorBrush Color="{Binding Color}" />
                    </Grid.Background>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

</Grid>

但有一个问题。我没有正确设置 WrapPanel 的宽度。在上面的代码中，我将其默认为 2000（这很荒谬）。您必须弄清楚那部分并在此处发布您的解决方案。（我不能做所有事情）否则，这就是你要求的 100%。

WinRT WrapPanel 在我的博客http://jerrynixon.com上（在左栏）

祝你好运，法尔汉。

另请参阅：您提出相同问题的 ms 论坛

Answer 2

好吧，如果这是您想要的布局，那么您不需要布局的网格视图，因为它不是网格。AGridView将根据第一个项目的大小调整其所有项目的大小。您很可能需要ItemsControl该布局的自定义实现。

Answer 3

如果您可以选择为应用程序使用 html/winjs，您可以尝试列表视图项模板示例场景 4 -“创建可以跨越多个单元格的模板函数”。在这里您可以选择使用更小的网格单元，并定义多个 css 类。在基于图像大小的项目模板fn中，使用最适合的css类来缩放图像。

例如：

.square-image
{
    width: 200px;
    height: 200px;
}

// 4:3 aspect ratio
.landscape-image
{
    width: 200px;
    height: 150px;
}

// aspect ratio 4:6
portrait-image
{
    width: 200px;
    height: 300px;
}

你明白了。可以定义更多具有不同纵横比的 CSS 类。在这种情况下，您需要为项目使用-ms-grid-row-align: center一个维度和其他维度，100%以确保图像适合单元格并且不会失真。

如果您不能使用 winjs，那么我会看到一些示例，这些示例在 C# 的 GridView 中讨论了可变网格大小。但我还没有尝试过。这些链接可能会有所帮助。

• 可变大小分组网格视图
• 具有可变大小项目的网格