眠るシーラカンスと水底のプログラマー

　(注意：本記事はWindows8RP、VisualStudio2012RC環境で書かれています。本仕様は製品版で変更される可能性があります)

 

GridView

 

　GridViewはコレクションデータを表示するためのWindows 8では良く使われるコントローです。

　デフォルトテンプレートのGridApp、SplitAppでも利用されているので見たことがある方は多いでしょう。

 

 

まずは使ってみる

 

　GridViewを表示する簡単なサンプルを作成してみます。

 

　XAMLコード

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <GridView x:Name="gridView" />
    </Grid>

 

C#コード

            for (var i = 0;  i <= 1000; i++)
            {
                this.gridView.Items.Add("Item " + i.ToString());
            }

 

　GridViewに千個のアイテムを追加してみました。

　結果は・・・

 

 

　GriｄViewにアイテムを追加するといっぱいにアイテムが敷き詰められるのがわかりました。

　わかりましたが、これでは規則性がわかりませんね。

 

　XAMLの方を少し書き換えてみます。

 

XAMLコード

        <GridView x:Name="gridView" Background="Black">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Image Source="Assets/WideLogo.png" Width="310" Height="150"/>
                        <TextBlock Text="{Binding}" Height="60" Width="300"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>            
        </GridView>

 

 

 

 　縦いっぱいに敷き詰めて、埋まると次の行を再び縦に埋めていきます。

　基本的なGridViewの動きはいじょう。

 

グループ化

 

　続いてグループ分けされたコレクションを表示してみます。

　DataContextにバインディングする対象を。

　グループ名とそのグループに表示するアイテムのコレクションを集めたオブジェクトのコレクションを用意します。

　(・・・という表現ではわかりずらいですね)

 

　コードは以下、

    public sealed partial class MainPage : Page
    {
        public ObservableCollection<groupItems> items;

        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.items = new ObservableCollection<groupItems>();
            var group1 = new groupItems();
            group1.title = "グループ1";
            group1.items = new ObservableCollection<item>()
            { 
                new item() { name = "item1"}, 
                new item() { name = "item2"}, 
                new item() { name = "item3"}, 
                new item() { name = "item4"}, 
                new item() { name = "item5"}
            };

            var group2 = new groupItems();
            group2.title = "グループ2";
            group2.items = new ObservableCollection<item>()
            { 
                new item() { name = "item1"}, 
                new item() { name = "item2"}, 
                new item() { name = "item3"}, 
                new item() { name = "item4"}, 
                new item() { name = "item5"},
                new item() { name = "item6"}, 
                new item() { name = "item7"}, 
                new item() { name = "item8"}, 
            };

            var group3 = new groupItems();
            group3.title = "グループ3";
            group3.items = new ObservableCollection<item>()
            { 
                new item() { name = "item1"}, 
                new item() { name = "item2"},  
                new item() { name = "item3"}
            };

            var group4 = new groupItems();
            group4.title = "グループ4";
            group4.items = new ObservableCollection<item>()
            { 
                new item() { name = "item1"}, 
                new item() { name = "item2"}, 
                new item() { name = "item3"}, 
                new item() { name = "item4"}, 
                new item() { name = "item5"}
            };

            this.items.Add(group1);
            this.items.Add(group2);
            this.items.Add(group3);
            this.items.Add(group4);

            this.DataContext = this.items;
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }

    public class groupItems
    {
        private string _title;

        public string title
        {
            get { return _title; }
            set { _title = value; }
        }

        private ObservableCollection<item> _items;

        public ObservableCollection<item> items
        {
            get { return _items; }
            set { _items = value; }
        }
        
    }

    public class item
    {
        private string _name;

        public string name
        {
            get { return _name; }
            set { _name = value; }
        }
        
    }
}

　XAMLコードは以下、

<Page
    x:Class="_008_GroupGridVieiwSample_RC.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_008_GroupGridVieiwSample_RC"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding}"
            ItemsPath="items"
            IsSourceGrouped="True"
        />
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <GridView x:Name="gridView" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Image Source="Assets/WideLogo.png" Width="310" Height="150"/>
                        <TextBlock Text="{Binding name}" Height="60" Width="300"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            
           <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid 
                                Orientation="Vertical" 
                                Margin="0,0,80,0" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding title}" FontSize="30"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </Grid>
</Page>

 

　実行結果

 

　WindowsPhoneのLongListSelectorもこんなデータ構造でしたね。