Windows商店应用程序：与分组的GridView不均匀的用户界面

Question

首先，我对Windows 8和开发Windows商店应用程序很陌生。

我想一个GridView控件添加到我的当前应用但我有一些问题，它的样子：

正如你可以看到我的团都参差不齐。理想情况下，我希望所有的群体看起来像第一个群体。 这是我一直在追踪的教程：http://www.wintellect.com/blogs/sloscialo/windows-8-gridview-and-variable-sized-items在某些时候，我想让每个组的第一个图块比其他图块更大。

下面是使用代码IM：

的.xaml文件：

<GridView 
     x:Name="itemGridView" 
     Grid.RowSpan="2" 
     Padding="120, 130, 0, 0" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     ItemContainerStyleSelector="{StaticResource VariableSizedStyleSelector}" 
     SelectionMode="None" 
     IsSwipeEnabled="False" 
     IsItemClickEnabled="True"> 

     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Grid Margin="5, 0, 0, 0"> 
          <Button 
           AutomationProperties.Name="Group Title" 
           Style="{StaticResource TextPrimaryButtonStyle}" > 
           <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="{Binding Title}" Margin="0, 0, 0, 0" Style="{StaticResource GroupHeaderTextStyle}" Opacity=".25" /> 
           </StackPanel> 
          </Button> 
         </Grid> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid Margin="0, 10, 50, 0" /> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 

和项目风格：

<Style x:Key="DefaultGridViewItemStyle" 
    TargetType="GridViewItem"> 
    <Setter Property="VariableSizedWrapGrid.RowSpan" Value="4" /> 
    <Setter Property="VariableSizedWrapGrid.ColumnSpan" Value="2" /> 
    <Setter Property="Background" Value="#E5E5E5" /> 
</Style> 

请帮帮忙！

感谢

Answer 1

GridView的分组可以使用CollectionViewSource来完成。 在您的Xaml中，在页面的参考资料部分添加一个CollectionViewSource。确保IsSourceGrouped设置为true：

<Page.Resources> 
    <CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/> 
</Page.Resources> 

我们可以设置来源 CollectionViewSource从代码隐藏后，

然后CollectionViewSource（FruitsCollectionViewSource）应设置为ItemsSource for your GridView

<GridView 
     ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}" 
     x:Name="FruitGridView" 
     Padding="330,20,40,0" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="FruitGridView_ItemClick"> 

      //// GridView ItemTemplate 

      <GridView.ItemTemplate> 
       <DataTemplate> 
        <Grid HorizontalAlignment="Left" Width="250" Height="250"> 
         <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"> 
          <Image Source="{Binding Path=FruitImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> 
         </Border> 
         <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}"> 
          <StackPanel Orientation="Horizontal"> 
           <TextBlock Text="Fruit Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/> 
           <TextBlock Text="{Binding Path=FruitName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/> 
          </StackPanel> 
          <StackPanel Orientation="Horizontal"> 
           <TextBlock Text="Fruit Rate" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/> 
           <TextBlock Text="{Binding Path=FruitRate}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> 
          </StackPanel>       
         </StackPanel> 
        </Grid> 
       </DataTemplate> 
      </GridView.ItemTemplate> 

      ////Group Style 

      <GridView.GroupStyle> 
       <GroupStyle> 
        <GroupStyle.HeaderTemplate> 
         <DataTemplate> 
          <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" /> 
         </DataTemplate> 
        </GroupStyle.HeaderTemplate> 
        <GroupStyle.Panel> 
         <ItemsPanelTemplate> 
          <VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" /> 
         </ItemsPanelTemplate> 
        </GroupStyle.Panel> 
       </GroupStyle> 
      </GridView.GroupStyle> 

      //// Item panel Style 

      <GridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <ItemsWrapGrid GroupPadding="0,0,70,0" /> 
       </ItemsPanelTemplate> 
      </GridView.ItemsPanel>      
     </GridView> 

现在你可以从代码隐藏

项目添加到您的FruitList创建的ObservableCollectionFruitList

public ObservableCollection<Fruit> FruitList { get; set; } 

创建一个模型类水果

public class Fruit 
    { 
     public string FruitName { get; set; } 
     public string FruitImageSource { get; set; } 
     public string FruitRate { get; set; } 
    } 

然后添加项目到FruitList

FruitList.Add(new Fruit { FruitName = "Blackberry", FruitImageSource = "../Assets/blackberry.jpg", FruitRate = "150" }); 
    FruitList.Add(new Fruit { FruitName = "Apple", FruitImageSource = "../Assets/apple.jpg", FruitRate = "150" }); 
    FruitList.Add(new Fruit { FruitName = "Orange", FruitImageSource = "../Assets/orange.jpg", FruitRate = "250" }); 
    FruitList.Add(new Fruit { FruitName = "Bilberry", FruitImageSource = "../Assets/bilberry.jpg", FruitRate = "250" }); 
    FruitList.Add(new Fruit { FruitName = "Banana", FruitImageSource = "../Assets/banana.jpg", FruitRate = "50" }); 
    FruitList.Add(new Fruit { FruitName = "Amla", FruitImageSource = "../Assets/amla.jpg", FruitRate = "120" }); 

现在，您可以设置源你CollectionViewSource 对于我们首先需要理清我们的FruitList。然后使用此GetGroupsByLetter（）方法将果实名称按升序或降序分组。

 FruitList = new ObservableCollection<Fruit>(FruitList .OrderBy(c => c.FruitName)); 
     FruitsCollectionViewSource.Source = GetGroupsByLetter(); 

GetGroupsByLetter（）基团在FruitList的项目。

internal List<GroupInfoList<object>> GetGroupsByLetter() 
    { 
     var groups = new List<GroupInfoList<object>>(); 

     var query = from item in FruitList 
        orderby ((Fruit)item).FruitName 
        group item by ((Fruit)item).FruitName[0] into g 
        select new { GroupName = g.Key, Items = g }; 
     foreach (var g in query) 
     { 
      var info = new GroupInfoList<object>(); 
      info.Key = g.GroupName; 
      foreach (var item in g.Items) 
      { 
       info.Add(item); 
      } 

      groups.Add(info); 
     } 

     return groups; 
    } 

GroupInfoList：

public class GroupInfoList<T> : List<object> 
    { 
     public object Key { get; set; } 

     public new IEnumerator<object> GetEnumerator() 
     { 
      return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator(); 
     } 
    } 

现在你做。

输出将看起来像这样