画面の設計−その２

Gridを使用して、1画面にListViewとGridViewを配置してみる。
ListViewは前にも紹介した通り、縦スクロールをするリストである。
一方、GridViewは行列上に配列した項目を横方向にスクロールするものだ。
"MainPage.xaml"に以下の様に記述する。

これで画面の左半分にListViewが、右半分には300x150サイズのGridで切られたGridViewが表示される。
ただ、このままでは何も表示されない。
そう、これは何らかのアイテムを表示するためのテンプレートで、そのアイテムのデータをbindingしなくてはならない。
MainPage.xaml.csに以下の様に追記する。

public sealed partial class MainPage : Page

{

    ObservableCollection testitems;

    public MainPage()

    {

        this.InitializeComponent();

        //

        testitems = new ObservableCollection();

        int count;

        TestItem testitem;

        for(count = 0; count < 20; count++)

        {

            testitem = new TestItem();

            testitem.Title = string.Format("Item {0}", count);

            testitem.Body = string.Format("This is a body text for Item {0}.", count);

            testitems.Add(testitem);

        }

        listview1.ItemsSource = testitems;

        gridview1.ItemsSource = testitems;

    }

}
public class TestItem

{

    public string Title { set; get; }

    public string Body { set; get; }

}

これで20個のダミーデータを生成して、表示してくれる。