Question

我想在分组的gridview中显示图像。现在所有的图像都有各种高度和高度。宽度所以我想在它的原始高度宽度显示图像。我试过了WrapGrid，VariableSizedWrapGrid＆amp; VirtualizingStackPanel但没有得到输出。请注意我的模型类包含图像名称（路径），高度和＆amp;宽度。那么如何才能显示如下图所示的图像呢？

enter image description here

Answer 1

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

使用VariableSizedWrapGrid可以获得如下结果：

enter image description here

使用WrapGrid会得到如下结果：

enter image description here

的Presto！诀窍？

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（左栏）

祝你好运，Farhan。

另请参阅：ms forum where you asked the same thing

Answer 2

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

Answer 3

如果你有选择为应用程序使用html / winjs，你可以尝试list view item template sample方案4 - ＆＃34;创建一个可以跨越多个单元格的模板功能＆＃34;。在这里，您可以选择使用较小的网格单元，并定义多个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，那么我会在GridView中看到一些关于c＃的可变网格大小的示例。但我还没试过。这些链接可能会有所帮助。

如何使用可变大小的gridview项目获取gridview？

3 个答案: