microsoft-metro - 双重包装 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;
        }
    }
    // ....
}