１行に複数の項目を配置するListBoxのSample（その１）

表示するデータの構造(Model)のクラスを作成

Modelフォルダを作りそこに、"新しい項目の追加＞クラス" で、ListItem.cs を作成。
作られたファイルは次のようになっている。

namespace ListBoxSample.Model
{
 class ListItem
 {
 }
}

これに、表示する項目に対応するプロパティと、簡単なコンストラクタを追加する。

class ListItem
{
 public uint ID { get; private set; }
 public string Name { get; set; }
 public char Label { get { return char.ToUpper(Name[0]); } }
 public string Comment { get; set; }

 static private uint NextID = 0;

 public ListItem(string name, string comment)
 {
  ID = ++NextID;
  Name = name;
  Comment = comment;
 }
}

MainPage.xaml にModel を登録

<Page
 x:Class="ListBoxSample.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:ListBoxSample"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:data="using:ListBoxSample.Model"
 mc:Ignorable="d">

xmlns:data の data は任意の名称なのでわかりやすい名称をつけられる。

１項目に表示するテンプレートを作成する(MainPage.xaml)

行に当たる Grid の背景を LawnGreen にしている。

MainPageにListBox を配置し、作成したテンプレートを登録する(MainPage.xaml)

for (int i=0; i<10 data-blogger-escaped-comment="" data-blogger-escaped-i="" data-blogger-escaped-listitem="" data-blogger-escaped-listitems.add="" data-blogger-escaped-name="" data-blogger-escaped-new="" data-blogger-escaped-ostring="" data-blogger-escaped-pre="" data-blogger-escaped-string="">

ListBoxの背景を Aqua にしている。




リストに表示するアイテムのコレクションを作成(MainPage.xaml.cs)
 作成したコレクションのオブジェクトをListBoxのソースとして指定する。

private ObservableCollection ListItems;

public MainPage()
{
 this.InitializeComponent();
 
 ListItems = new ObservableCollection();
 listBox.ItemsSource = ListItems;
}


ListBoxにアイテムを追加する(MainPage.xaml.cs)
for (int i=0; i<10 data-blogger-escaped-comment="" data-blogger-escaped-i="" data-blogger-escaped-listitem="" data-blogger-escaped-listitems.add="" data-blogger-escaped-name="" data-blogger-escaped-new="" data-blogger-escaped-ostring="" data-blogger-escaped-pre="" data-blogger-escaped-string="">




ここまでで１行に４項目があるListBoxが出来たが、

行の項目間が詰まっているの次回で修正する。