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(); 
     } 
    } 

現在你做。

輸出將看起來像這樣