2013-03-27 8 views
0

Я хочу, чтобы каждая моя группа в GridView была в этой конкретной структуре/шаблоне (одна большая и остальное в том же размере): enter image description hereКак отображать сгруппированные элементы (группа GridView) с форматом: одна большая фотография, а остальные маленькие (пример прилагается)

Элементы должны заполнять экран до тех пор, пока в buttom больше нет места. Он должен быть заполнен справа налево (когда заполняется один столбец элементов, мы заполняем следующий столбец). Моя модель просмотра предоставляет сгруппированную коллекцию, и я хочу, чтобы GridView принимал каждый «маленький» элемент и определял его, как если бы большой элемент был «потолком» GridView.

Я думаю, что это как-то связано с VariableSizedWrapGrid.

Вот мой текущий код (в настоящее время каждый товар находится в том же размере и поток справа налево):

  <GridView 
         VerticalAlignment="Top" 
         x:Name="GridMenu" 
         ItemsSource="{Binding Source={StaticResource groupedArticlesViewSource}}" 
         ItemTemplate="{StaticResource ArticlePreviewListView}"> 
       <GridView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <VirtualizingStackPanel Orientation="Horizontal"/> 
        </ItemsPanelTemplate> 
       </GridView.ItemsPanel> 
       <GridView.GroupStyle> 
        <GroupStyle> 
         <GroupStyle.HeaderTemplate> 
          <DataTemplate> 
           <Grid Margin="10"> 
            <TextBlock Text='{Binding Key}' 
               FontFamily="{StaticResource FontFamilyStyle}" 
               Foreground="DarkBlue" 
               FontSize="20"/> 
           </Grid> 
          </DataTemplate> 
         </GroupStyle.HeaderTemplate> 

         <GroupStyle.Panel> 
          <ItemsPanelTemplate> 
           <VariableSizedWrapGrid Orientation="Vertical"/> 
          </ItemsPanelTemplate> 
         </GroupStyle.Panel> 
        </GroupStyle> 
       </GridView.GroupStyle> 
      </GridView> 

ответ