分組視圖的更簡單的可能性

Question

我有一個問題。我想寫一個Windows 8應用程序，並認爲分組的GridView，就像在Visual Studio中包含的示例分組項目應用程序模板一樣，對於數據表示來說是一個不錯的選擇。 但我在理解這是如何工作的問題上（我瘋狂地修改了包含的SampleDataSource，以便顯示我的內容）。我的問題是，有很多元素，我不能確定什麼元素導致什麼。

所以我的問題：

誰能解釋（或提供一個鏈接），我怎麼能從頭開始建立這樣一個分組的GridView？ 樣本模板並沒有那麼有用，因爲它有點令人困惑（一個文件中有4個類，有時候有點奇怪的構造）。

Answer 1

好了，所以對於使用分組的GridView的基本要求是：

（注：所有的類名是任意的）

• 一個ViewModel
（您使用的MVVM，對吧？）
• 一個包含每個組的元素的組對象。
• Item對象該組將包含
• 甲視圖，用以顯示其包括GridView和一個CollectionViewSource的物品（包括任何樣式的組和項目）

一個例子的集合組和項目：

public class Group<T> where T : Item 
{ 
    public ObservableCollection<T> Items { get; set;} 
    public string Title { get; set; } 
} 

public class Item 
{ 
    public string Value { get; set; } 
} 

一個實例視圖模型：

public class GroupsViewModel : ViewModelBase // This implementation uses Mvvm Light's ViewModelBase, feel free to use any 
{ 
    public ObservableCollection<Group<Item>> AllGroups { get; set; } 

    public GroupsViewModel() 
    { 
     AllGroups = new ObservableCollection<Group<Item>>(); 

     Group<Item> group1 = new Group<Item>(); 
     group1.Title = "Group 1 Title"; 
     group1.Add(new Item(){ Value = "The first value." }); 
     AllGroups.Add(group1); 

     Group<Item> group2 = new Group<Item>(); 
     group2.Title = "Group 2 Title"; 
     group2.Add(new Item(){ Value = "The second value." }); 
    } 
} 

您的網頁上，在你的Page.Resources創建一個CollectionViewSource：

<Page.Resources> 
    <CollectionViewSource Source="{Binding AllGroups}" 
          IsSourceGrouped=True 
          ItemsPath="Items" 
          x:Name="GroupedCollection"/> 
</Page.Resources>  

注意，來源勢必Group的Collection的S和ItemsPath告訴CollectionViewSource在每個Group集Item s的該財產。

您的GridView將引用此。像下面設置項目源是非常重要的。空的{Binding}與Source設置爲CollectionViewSource的StaticResource。您可以使用GroupStyle類似的方式在GridView中設置每個組的樣式。我把它剝離爲令人難以置信的基本。您已有的默認示例將有一個更好的示例。

<GridView ItemsSource="{Binding Source={StaticResource GroupedCollection}}" 
      ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
      > 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate>       
      <VirtualizingStackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
    <GridView.GroupStyle> 
     <GroupStyle> 
      <GroupStyle.HeaderTemplate> 
       <DataTemplate> 
        <Grid Margin="1,0,0,6"> 
         <StackPanel Orientation="Horizontal"> 
          <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> 
          <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> 
         </StackPanel> 
        </Grid> 
       </DataTemplate> 
      </GroupStyle.HeaderTemplate> 
      <GroupStyle.Panel> 
       <ItemsPanelTemplate> 
        <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
     </GroupStyle> 
    </GridView.GroupStyle> 
</GridView> 

最後，你有你的Page的DataContext設置爲ViewModel。如果你使用的是Mvvm Light，它會像DataContext="{Binding GroupsVM, Source={StaticResource Locator}}"。顯然你需要做一些進一步的設置才能使其工作。您也可以將其設置在Page的構造函數中。

public MyGridViewPage() 
{ 
    DataContext = new GroupsViewModel(); 
    this.InitializeComponent(); 
} 

希望這會有所幫助。快樂的編碼！