Изготовление плитки разного размера

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?

Update

Я попробовал это, и я не получил результат, который я искал. Это давало мне тот же макет, что и я, с моим выше 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

EDIT: Еще один вариант, чтобы сделать что-то вроде этого:

Создайте свой собственный 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>