【萬里征程——Windows App開發】ListView&GridView之分組

nomasp發表於2015-04-07
WindowsAPPView

本文承接【萬里征程——Windows App開發】ListView&GridView之新增資料。

在上一篇中我們已經瞭解了怎樣將資料繫結到ListView或GridView，但既然要用到這兩個控制元件往往是因為資料繁多，那麼幾乎就不可避免的要讓其能夠分組。我們所繫結的資料來源可能是項列表，其中的每個項甚至還有其自己的項，那麼問題就來了。

一時不會也想不出什麼巨集偉的例子，就做一個簡單的鬧鐘的時間表的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; }
}

首先嘛，先來定義一個全域性的時間，然後在頁面載入時載入兩個函式（將在下一步定義）。

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

一大波資料正在靠近！

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

這些資料都是亂七八糟啦，大家湊合著看啦。這是兩個函式，資料我都是用List<>來定義的，將資料通過Add函式新增到listAlarm和listAlarmMode中即可。最後再從listAlarm中根據AlarmMode挑出資料到alaSetting，同時還要根據Key值進行排序最後選出並連線到collectionVSAlarm的Source屬性中。這個是需要在MainPage.xaml中定義的哦，就像

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

然後我們還需要建立一個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中就好啦，關於資原始檔的使用我們在後面會系統的來學習。這裡的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>

這裡寫圖片描述

我這寫的真是太醜了哎，做App的時候可得好好調調了，為了不傷了大家的眼睛最後我還是來張漂亮的桌布吧……下一篇再見咯！

這裡寫圖片描述

為使本文得到斧正和提問，轉載請註明出處：
http://blog.csdn.net/nomasp

相關文章