如何获得可变大小的gridview项目的gridview？ [英] How to get gridview with variable sized gridview items?

问题描述

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

解决方案

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

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

使用WrapGrid可以得到类似结果这：

Presto！诀窍？

  public sealed partial class MainPage：Page 
 {
 public MainPage（）
 {
 this.InitializeComponent（）; 
 
 
 $ b 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。颜色）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>组{get;私人设置; } 
} 
 
< 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 =Horizo​​ntal> 
< Rectangle Height =20Width =20Fill ={Binding Brush}Margin =0,0,10,0/> 
< TextBlock FontSize =40Text ={Binding Title}/> 
< / StackPanel> 
< / DataTemplate> 
 < GroupStyle.Panel> 
< ItemsPanelTemplate> 
< local：WrapPanel Orientation =VerticalWidth =2000/> 
<！ - < VariableSizedWrapGrid Margin =0,0,80,0ItemHeight =1ItemWidth =1/>  - > 
< / ItemsPanelTemplate> 
 < / GroupStyle> 
< /GridView.GroupStyle> 
< GridView.ItemsPanel> 
< ItemsPanelTemplate> 
< StackPanel Orientation =Horizo​​ntalMargin =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论坛，你问同样的事情

I want to show images in grouped gridview. Now all the images will have various height & width So I want to show images in it's original height width. I tried WrapGrid, VariableSizedWrapGrid & VirtualizingStackPanel but didn't get the output. Please note my model class contains image name (path), height & width. So how can I show images like given below ?

解决方案

No, I doubt you tried a WrapPanel. There's not one in WinRT.

Using VariableSizedWrapGrid you get a result something like this:

Using a WrapGrid you get a result something like this:

Presto! The trick?

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>

But there's one gotcha. I am not correctly setting the width of the WrapPanel. In the code above, I've defaulted it to 2000 (which is ridiculous). You'll have to figure that part out and post your solution here. (I can't do everything) Otherwise, it's what you are asking for 100%.

The WinRT WrapPanel is on my blog http://jerrynixon.com (on the left column)

Good luck, Farhan.

See also: ms forum where you asked the same thing

这篇关于如何获得可变大小的gridview项目的gridview？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！