為 ListView 和 GridView 添加分組

本文承接“為 ListView 和 GridView 添加數(shù)據(jù)”。

在上一節(jié)中我們已經了解了怎樣將數(shù)據(jù)綁定到 ListView 或 GridView，但既然要用到這兩個控件往往是因為數(shù)據(jù)繁多，那么幾乎就不可避免的要讓其能夠分組。我們所綁定的數(shù)據(jù)源可能是項列表，其中的每個項甚至還有其自己的項，那么問題就來了。

一時不會也想不出什么宏偉的例子，就做一個簡單的鬧鐘的時間表的 ListView 和 GridView 吧。那么先在項目中添加一個類，最好在 Shared 下。內容都是很簡易的，鬧鐘的標題、時間、備注等，為了增加一級目錄就加了一個 AlarmMode，就算作學習和生活吧，學習生活兩不誤……

public class Alarm
{
    public string Title { get; set; }
    public DateTime AlarmClockTime { get; set; }
    public string Description { get; set; }
    public string AlarmMode { get; set; }
}
public class AlarmMode
{
   public AlarmMode()
   {
       alarmMode = new ObservableCollection<Alarm>();
   }
   public string Name { get; set; }
   public ObservableCollection<Alarm> alarmMode { get; private set; }
}

首先，先來定義一個全局的時間，然后在頁面加載時加載兩個函數(shù)（將在下一步定義）。

DateTime globalTime;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    DateTime.TryParse("1/1/2115", out globalTime);
    AddAlarm();
    AddAlarmMode();
}

一大波數(shù)據(jù)正在靠近！

private void AddAlarm()
{
    List<Alarm> listAlarm = new List<Alarm>();
    listAlarm.Add(new Alarm()
    {
        Title = "Alarm1",
        Description = "First Alarm",
        AlarmClockTime = globalTime.AddHours(1),
        AlarmMode = "Alarm In Life"
    });
    listAlarm.Add(new Alarm()
    {
        Title = "Alarm2",
        Description = "Second Alarm",
        AlarmClockTime = globalTime.AddHours(11),
        AlarmMode = "Alarm In Life"
    });
    listAlarm.Add(new Alarm()
    {
        Title = "Alarm3",
        Description = "Third Alarm",
        AlarmClockTime = globalTime.AddDays(1),
        AlarmMode = "Alarm In Life"
    });
    listAlarm.Add(new Alarm()
    {
        Title = "Alarm1",
        Description = "First Alarm",
        AlarmClockTime = globalTime.AddHours(12),
        AlarmMode = "Alarm In Study"
    });
    listAlarm.Add(new Alarm()
    {
        Title = "Alarm2",
        Description = "Second Alarm",
        AlarmClockTime = globalTime.AddHours(15),
        AlarmMode = "Alarm In Study"
    });
    listAlarm.Add(new Alarm()
    {
        Title = "Alarm3",
        Description = "Third Alarm",
        AlarmClockTime = globalTime.AddMonths(1),
        AlarmMode = "Alarm In Study"
    });
    ar alarmSetting = from ala in listAlarm
                       group ala
                       by ala.AlarmMode
                       into alaSetting
                       orderby alaSetting.Key
                       select alaSetting;
    collectionVSAlarm.Source = alarmSetting;
}
private void AddAlarmMode()
{
    List<AlarmMode> listAlarmMode = new List<AlarmMode>();
    AlarmMode am1 = new AlarmMode();
    am1.Name = "Alarm In Life";
    am1.alarmMode.Add(new Alarm()
    {
        Title = "Alarm1",
        Description = "First Alarm",
        AlarmClockTime = globalTime.AddHours(1),
    });
    am1.alarmMode.Add(new Alarm()
    {
        Title = "Alarm2",
        Description = "Second Alarm",
        AlarmClockTime = globalTime.AddHours(11),
    });
    am1.alarmMode.Add(new Alarm()
    {
        Title = "Alarm3",
        Description = "Third Alarm",
        AlarmClockTime = globalTime.AddDays(1),
    });
    listAlarmMode.Add(am1);
    AlarmMode am2 = new AlarmMode();
    am2.Name = "Alarm In Study";
    am2.alarmMode.Add(new Alarm()
    {
        Title = "Alarm1",
        Description = "First Alarm",
        AlarmClockTime = globalTime.AddHours(12),
    });
    am2.alarmMode.Add(new Alarm()
    {
        Title = "Alarm2",
        Description = "Second Alarm",
        AlarmClockTime = globalTime.AddHours(15),
    });
    am2.alarmMode.Add(new Alarm()
    {
        Title = "Alarm3",
        Description = "Third Alarm",
        AlarmClockTime = globalTime.AddMonths(1),
    });
    listAlarmMode.Add(am2);
    collectionVSAlarmMode.Source = listAlarmMode;
}

這些數(shù)據(jù)都是亂七八糟啦，大家湊合著看。這是兩個函數(shù)，數(shù)據(jù)我都是用 List<> 來定義的，將數(shù)據(jù)通過 Add 函數(shù)添加到 listAlarm 和 listAlarmMode 中即可。最后再從 listAlarm 中根據(jù) AlarmMode 挑出數(shù)據(jù)到 alaSetting，同時還要根據(jù) Key 值進行排序最后選出并連接到collectionVSAlarm的 Source 屬性中。這個是需要在 MainPage.xaml 中定義的哦，就像 <Page.Resource/> 一樣。還需要 ItemsPath 屬性來定義其的子對象喲。

    <UserControl.Resources>
        <CollectionViewSource x:Name="collectionVSAlarm"     IsSourceGrouped="True"/>
        <CollectionViewSource x:Name="collectionVSAlarmMode"     IsSourceGrouped="True" ItemsPath="alarmMode"/>
    </UserControl.Resources>

然后我們還需要創(chuàng)建一個 ListGridGroupStyle 類來繼承 GroupStyleSelector，重載它的 SelectGroupStyleCore 方法，并且返回 ListGridGroupStyleResource 資源，這個資源在博客后文中有定義，其定義在 App.xaml 中。相應的代碼如下咯：

    public class ListGridGroupStyle : GroupStyleSelector
    {
        protected override GroupStyle SelectGroupStyleCore(object group, uint level)
        {
            return (GroupStyle)App.Current.Resources["ListGridGroupStyleResource"];
        }
    }

方法重載好之后就需要在前面的 UserControl.Resources 中加上以下這條代碼啦。

    <local:ListGridGroupStyle x:Key="ListGridGroupStyleResource"/>

然后我們來一系列的基本樣式到 App.xaml 中就好啦，關于資源文件的使用我們在后面會系統(tǒng)的來學習。這里的 DataTemplate 和 GroupStyle 都在資源字典中，前者是 Template 模板，后者是 Style 風格。內容的排版大家都隨意啦，記得設置好 Key 值。

    <Application.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="dataTemplateListView">
                <StackPanel Width="700" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Title}" FontWeight="Bold" Margin="12"/>
                        <TextBlock Text="{Binding AlarmClockTime}" TextWrapping="NoWrap" Margin="12"/>
                        <TextBlock Text="{Binding Description}" TextWrapping="NoWrap" Margin="12"/>
                    </StackPanel>             
                </StackPanel>
            </DataTemplate>
            <GroupStyle x:Key="ListGridGroupStyleResource">
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Background="LightGray"  >
                            <TextBlock Text='{Binding Key}' Foreground="CornflowerBlue" Margin="12"  />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ResourceDictionary>
    </Application.Resources>

那么這些各種資源都定義好了之后就在 MainPage.xaml 把下面這些敲進去。各種資源的調用在這里尤其需要注意，其實對于稍微復雜一丁點的程序而言，名稱就已經變得讓人崩潰了。所以擁有一個良好的命名習慣很重要。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <GridView Grid.Column="0" ItemsSource="{Binding Source={StaticResource collectionVSAlarmMode}}"        
                  Margin="12,120,12,12" MaxHeight="600" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="18">
                        <TextBlock Text="{Binding Title}" FontWeight="ExtraBold"   />
                        <TextBlock Text="{Binding AlarmClockTime}"  FontWeight="Light" TextWrapping="NoWrap"  />
                        <TextBlock Text="{Binding Description}" TextWrapping="NoWrap"  />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="2"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Background="Green" Margin="12">
                                <TextBlock Text='{Binding Name}' 
                                           Foreground="Bisque" Margin="36"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>    
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
        <ListView Grid.Column="1" ItemsSource="{Binding Source={StaticResource collectionVSAlarm}}"     
                  ItemTemplate="{StaticResource dataTemplateListView}"    
                  GroupStyleSelector="{StaticResource ListGridGroupStyleResource}"          
                  Margin="120" />       
    </Grid>

我這寫的真是太丑了哎，做產品的時候可得好好調調了。