制作不同大小的瓷砖

Question

我目前有一个Universal Windows Application，它在GridView 内动态创建GridViewItems。在我的例子中，GridViewItems 是瓷砖，瓷砖的大小都相同（因为我在我的 XAML 中通过宽度和高度设置它们）。

我想要不同大小的图块，而不是大小相同的图块，以使其具有 Windows 8/10 的外观和感觉。

我将在下面列出我当前的代码：

<GridView x:Name="tileGridView" Margin="-15,60" HorizontalAlignment="Center" ItemTemplate="{StaticResource TileTemplate}">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid Background="#2A2A2A"
                                  Margin="5"
                                  Height="200"
                                  Width="300">
                                    <ContentPresenter />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>
        </GridView.ItemContainerStyle>
    </GridView>

谁能指出我如何创建不同大小的图块的正确方向，并且它们的大小不一样。我已经阅读了VariableSizedWrapGrid，但这是没有转移到 Windows 10 开发中的 Windows 8 功能吗？

更新

我已经尝试过了，但没有得到我想要的结果。它为我提供了与上面的 XAML 相同的布局。

<ItemsPanelTemplate>
     <VariableSizedWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>

Answer 1

如上所述，您需要为此使用VariableSizedWrapGrid。

您仍然需要为每个图块分配 RowSpan 和 ColumnSpan。它们的默认值为“1”，这意味着它们都将具有相同的大小。

查看此详细示例，了解有关如何实现此目的的更多信息： http://blogs.msdn.com/b/walaa/archive/2014/02/23/gridview-amp-multiple-item-templates.aspx

编辑：另一种选择是这样做：

创建自己的 GridView：

public class VariableGridView : GridView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        var gridViewSize = item as IGridViewSize;
        if (gridViewSize != null)
        {
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, gridViewSize.ColumnSpan);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, gridViewSize.RowSpan);
        }

        base.PrepareContainerForItemOverride(element, item);
    }
}

IGridViewSize定义如下：

public interface IGridViewSize
{
    int ColumnSpan { get; }
    int RowSpan { get; }
}

在您的磁贴中实现此接口。在创建您的项目时，将您的（随机）值分配给它们的 ColumnSpan 和 RowSpan。 （另一种选择是：忽略此接口，并在 VariableGridView.PrepareContainerForItemOverride 方法中分配您的随机大小。）

您可以这样使用VariableGridView：

<controls:VariableGridView ItemsSource="{Binding MyItems}">
   <controls:VariableGridView.ItemsPanel>
      <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Horizontal" />
      </ItemsPanelTemplate>
   </controls:VariableGridView.ItemsPanel>
</controls:VariableGridView>