在GridView（XAML）组中包装/浮动项目'；浮动：左'；最上面的项目

根据下图，如何编写在GridView（XAML-Win8）组中流动项的代码

我目前有一个自定义的

TemplateSelector

，它为第一个项目选择一个不同（更大）的模板，但流程如下所述：

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <q42:WrapPanel Orientation="Horizontal" Width="440" Margin="0,0,80,0"/>
        <!-- also tried VariableSizedWrapGrid -->
    </ItemsPanelTemplate>
</GroupStyle.Panel>

，这将使项目按照我的要求流动

---

我认为可以用VSWG来完成。 我已经走了一半，但还没来得及完成

首先，您需要设置附加的prop变量sizedWrapgrid.RowSpan和ColSpan-并且必须通过继承VSWG在项目容器上设置：

在您的情况下，第一项为2x2，其余为1x1

单元大小的测量在第一个元素上完成，除非您明确指定ItemHeight等。因此，您必须以某种方式完成此任务：） WG支持单个大小的项目，所有项目都以相同的大小显示。VSWG允许可变大小的项目，但允许的项目大小是基本单元格大小的整数倍。WG和VSWG在布局单元中工作。布局单元的大小由ItemHeight和ItemWidth属性决定。如果未设置这些属性，则使用第一个项目的大小作为单元格大小，后续项目按该大小进行测量；对于VSWG，该项是基于RowSpan和ColumnSpan属性以单元格大小的整数倍来度量的。 如果您不希望项目在列表中位于第一位，那么似乎必须设置VSWG的高度和宽度，以适应最大项目的大小。 -->这是我没有想到的部分

最后是水平方向

---

祝你好运

Andreas Hammar将我与一个可行的解决方案联系起来：

using System.Collections.Generic;
using Application1.Data;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Application1
{
    public class MyGridView : GridView
    {
        int _rowVal;
        int _colVal;
        readonly List<Size> _sequence;

        public MyGridView()
        {
            _sequence = new List<Size>
                {
                    LayoutSizes.PrimaryItem,
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.OtherSmallItem, // 5 
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondaryTallItem, // 7
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondarySmallItem, // 9
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondarySmallItem, // 11
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.OtherSmallItem
                };
        }

        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);
            var dataItem = item as SampleDataItem;
            var index = -1;

            if (dataItem != null)
            {
                index = dataItem.Group.Items.IndexOf(dataItem);
            }

            if (index >= 0 && index < _sequence.Count)
            {
                _colVal = (int) _sequence[index].Width;
                _rowVal = (int) _sequence[index].Height;
            }
            else
            {
                _colVal = (int) LayoutSizes.OtherSmallItem.Width;
                _rowVal = (int) LayoutSizes.OtherSmallItem.Height;
            }

            VariableSizedWrapGrid.SetRowSpan(element as UIElement, _rowVal);
            VariableSizedWrapGrid.SetColumnSpan(element as UIElement, _colVal);
        }
    }

    public static class LayoutSizes
    {
        public static Size PrimaryItem = new Size(6, 2);
        public static Size SecondarySmallItem = new Size(3, 1);
        public static Size SecondaryTallItem = new Size(2, 2);
        public static Size OtherSmallItem = new Size(2, 1);
    }
}

使用System.Collections.Generic；
使用应用程序1.数据；
使用Windows基金会；
使用Windows.UI.Xaml；
使用Windows.UI.Xaml.Controls；
命名空间应用程序1
{
公共类MyGridView:GridView
{
int_rowVal；
国际科瓦尔；
只读列表_序列；
公共MyGridView（）
{
_序列=新列表
{
LayoutSizes.PrimaryItem，
LayoutSizes.Secondary小型项目，
LayoutSizes.Secondary小型项目，
LayoutSizes.OtherSmallItem，
LayoutSizes.OtherSmallItem，//5
LayoutSizes.OtherSmallItem，
LayoutSizes.SecondaryTallItem，//7
LayoutSizes.OtherSmallItem，
LayoutSizes.SecondarySmalItem，//9
LayoutSizes.OtherSmallItem，
LayoutSizes.SecondarySmalItem，//11
LayoutSizes.Secondary小型项目，
LayoutSizes.OtherSmallItem，
LayoutSizes.OtherSmallItem
};
}
受保护的覆盖void PrepareContainerForItemOverride（DependencyObject元素，对象项）
{
base.PrepareContainerForItemOverride（元素、项）；
var dataItem=项目作为SampleDataItem；
var指数=-1；
if（dataItem！=null）
{
index=dataItem.Group.Items.IndexOf（dataItem）；
}
如果（索引>=0&&index<\u sequence.Count）
{
_colVal=（int）u序列[索引]。宽度；
_rowVal=（int）u序列[索引]。高度；
}
其他的
{
_colVal=（int）LayoutSizes.OtherSmallItem.Width；
_rowVal=（int）LayoutSizes.OtherSmallItem.Height；
}
VariableSizedWrapGrid.SetRowSpan（元素为UIElement，_rowVal）；
VariableSizedWrapGrid.SetColumnSpan（元素为UIElement，_colVal）；
}
}
公共静态类布局大小
{
公共静态大小PrimaryItem=新大小（6,2）；
公共静态大小SecondarySmalItem=新大小（3,1）；
公共静态大小SecondaryTallItem=新大小（2,2）；
公共静态大小OtherSmallItem=新大小（2,1）；
}
}

WrapPanel不是现成的面板，所以您必须查看正在使用的WrapPanel的实现。如果它类似于Silverlight的WrapPanel，那么您描述的行为是预期的。VariableSizedWrapGrid是在您的场景中使用的正确面板，尽管它必须在列中布局项目。它们都不符合我的要求。VariableSizedWrapGrid不会占用项目7和项目11的空间，对吗？只要您正确设置VariableSizedWrapGrid.ColumnSpan和VariableSizedWrapGrid.RowSpan，VariableSizedWrapGrid几乎可以完全满足您的需要。该语句并不能真正帮助我回答这个问题……行/列span值需要在数据绑定之前进行设置。我正在寻找一个例子，其中行/列跨度可以在其设置后第一次更新。（如果有人知道的话）。

using System.Collections.Generic;
using Application1.Data;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Application1
{
    public class MyGridView : GridView
    {
        int _rowVal;
        int _colVal;
        readonly List<Size> _sequence;

        public MyGridView()
        {
            _sequence = new List<Size>
                {
                    LayoutSizes.PrimaryItem,
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.OtherSmallItem, // 5 
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondaryTallItem, // 7
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondarySmallItem, // 9
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.SecondarySmallItem, // 11
                    LayoutSizes.SecondarySmallItem,
                    LayoutSizes.OtherSmallItem,
                    LayoutSizes.OtherSmallItem
                };
        }

        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            base.PrepareContainerForItemOverride(element, item);
            var dataItem = item as SampleDataItem;
            var index = -1;

            if (dataItem != null)
            {
                index = dataItem.Group.Items.IndexOf(dataItem);
            }

            if (index >= 0 && index < _sequence.Count)
            {
                _colVal = (int) _sequence[index].Width;
                _rowVal = (int) _sequence[index].Height;
            }
            else
            {
                _colVal = (int) LayoutSizes.OtherSmallItem.Width;
                _rowVal = (int) LayoutSizes.OtherSmallItem.Height;
            }

            VariableSizedWrapGrid.SetRowSpan(element as UIElement, _rowVal);
            VariableSizedWrapGrid.SetColumnSpan(element as UIElement, _colVal);
        }
    }

    public static class LayoutSizes
    {
        public static Size PrimaryItem = new Size(6, 2);
        public static Size SecondarySmallItem = new Size(3, 1);
        public static Size SecondaryTallItem = new Size(2, 2);
        public static Size OtherSmallItem = new Size(2, 1);
    }
}

    <local:MyGridView.ItemsPanel>
        <ItemsPanelTemplate>                        
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </local:MyGridView.ItemsPanel>
    <local:MyGridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="1,0,0,6">
                        <Button
                            AutomationProperties.Name="Group Title"
                            Content="{Binding Title}"
                            Click="Header_Click"
                            Style="{StaticResource TextButtonStyle}"/>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemWidth="80" ItemHeight="160" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </local:MyGridView.GroupStyle>
</local:MyGridView>