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

Question

如何根据下图编写在 GridView (XAML-Win8) 组中流动项目的代码？

我目前有一个自定义TemplateSelector，它为第一项选择不同（更大）的模板，但这里指定的流程：

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

类似地包装项目 1 到 3，但随后将项目 4 放置在项目 6 的位置，而不填写项目 4 和 5。

问题变成了；如何编写类似于 css 的代码：

.item  { display: inline-block; }
.item1 { float: left; }

，这会让项目像我想要的那样流动？

Answer 1

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);
    }
}

    <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>

Answer 2

我认为这可以通过 VSWG 来完成。 我已经到了一半，但还没有时间完成它......

首先，您需要设置附加的属性 VariableSizedWrapGrid.RowSpan 和 ColSpan - 并且必须通过继承 VSWG 在项目容器上设置： http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

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

单元格大小的测量是在第一个元素上完成的，除非您明确指定 ItemHeight 等。所以你必须以某种方式完成这个:) http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/569e048a-9f5e-4fb3-870a-380de5906e80 WG 支持单一尺寸的项目，所有项目都以相同的尺寸显示。 VSWG 允许可变大小的项目，但允许的项目大小是基本单元大小的整数倍。 WG 和 VSWG 在布局单元中工作。布局单元格的大小由 ItemHeight 和 ItemWidth 属性确定。如果未设置这些属性，则将第一项的大小用作像元大小，随后的项以该大小测量 WG；对于 VSWG，该项目是根据 RowSpan 和 ColumnSpan 属性以单元格大小的整数乘积来衡量的。 如果您不希望该项目在列表中排在首位，您似乎必须设置 VSWG 的高度和宽度以适应最大项目的大小。 --> 这是我没来得及的部分。

最后是水平方向。

祝你好运！