Question

我目前有Universal Windows Application在GridViewItems内动态创建GridView。在我的情况下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 8的功能是否未转移到Windows 10开发中？

更新

我试过这个，但我没有得到我想要的结果。它给了我与我上面的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>

制作不同大小的瓷砖

1 个答案: