双层包装Windows8网格视图

Question

我正在开发Windows 8应用程序，我必须创建一个不同大小的磁贴视图。一个问题是我需要我的视图是双重包装的：首先，它应该水平包裹（即，每列应该是2个宽度的瓷砖）。这样的观点将是一个非常高的专栏。接下来，它应该垂直包裹。

我要创建的视图草图如下。是否有任何Win8控件能够提供所描述的行为？

我尝试使用VariableSizedWrapGrid，但似乎无法对其进行双重包装。

Answer 1

好的，时间过去了，我没有比创建自定义柱状模型和使用少量VariableGridViews的网格（每列一个VariableGridViews）更好的解决方案。

也许，我的XAML会帮助某人。

<controls:VariableGridView ItemsSource="{Binding Columns}">

    <controls:VariableGridView.ItemTemplate>
        <DataTemplate>

            <controls:VariableGridView ItemsSource="{Binding Tiles}">

                <controls:VariableGridView.ItemTemplate>
                    <DataTemplate>
                        <Grid VariableSizedWrapGrid.ColumnSpan="{Binding Width}">
                            <Rectangle Fill="Red" Width="{Binding WidthPixels}" Height="{Binding HeightPixels}"></Rectangle>
                        </Grid>
                    </DataTemplate>
                </controls:VariableGridView.ItemTemplate>

                <controls:VariableGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid VerticalAlignment="Center"
                                    ItemHeight="150"
                                    ItemWidth="150"
                                    MaximumRowsOrColumns="2"
                                    Orientation="Horizontal" Height="768"
                                    AllowDrop="True"
                                    Tapped="VariableSizedWrapGrid_Tapped"/>
                    </ItemsPanelTemplate>
                </controls:VariableGridView.ItemsPanel>
            </controls:VariableGridView>

        </DataTemplate>
    </controls:VariableGridView.ItemTemplate>

</controls:VariableGridView>

模型源代码看起来像（截断）

public class TilesCollection
{
    public ObservableCollection<ITile> Tiles {get; private set;}
}



public class ColumnedListModel
{
    ObservableCollection<TilesCollection> m_columns = new ObservableCollection<TilesCollection>();


    public ObservableCollection<TilesCollection> Columns
    {
        get
        {
            return m_columns;
        }
    }
    // ....
}