1つの項目に複数のコンテントを含める

ListBox コントロールでは、1つの項目に複数のコンテントを含めることができます。例えば、1つの項目を画像とテキストで構成することが可能です。

しかし、項目を表す ListBoxItem 要素は、1つコンテントしか格納することができないので、StackPanel等のコンテナとなり得るコントロールを1つ配置し、その中に複数のコントロールを置きます。

下記は、1つの項目に複数のコンテントを含める例です。

左側の ListBox は「国旗の画像」と「国名」で1つの項目としています。右側の ListBox は「テキスト」と「複数のCheckBoxコントロール」で1つの項目としています。

XAMLの例

<ListBox>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image Height="20" Name="Japan" Source="./Images/japan.gif" Width="32" />
            <TextBlock>日本</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image Height="20" Name="USA" Source="./Images/usa.gif" Width="32" />
            <TextBlock>アメリカ</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image Height="20" Name="Canada" Source="./Images/canada.gif" Width="32" />
            <TextBlock>カナダ</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image Height="20" Name="Korea" Source="./Images/korea.gif" Width="32" />
            <TextBlock>韓国</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image Height="20" Name="Taiwan" Source="./Images/taiwan.gif" Width="32" />
            <TextBlock>台湾</TextBlock>
        </StackPanel>
    </ListBoxItem>
</ListBox>

<ListBox>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <TextBlock VerticalAlignment="Center" Width="60">フルーツ</TextBlock>
            <StackPanel>
                <CheckBox Name="Apple">リンゴ</CheckBox>
                <CheckBox Name="Orange">バナナ</CheckBox>
                <CheckBox Name="Banana">ミカン</CheckBox>                        
            </StackPanel>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem>
        <StackPanel Orientation="Horizontal">
            <TextBlock VerticalAlignment="Center" Width="60">野菜</TextBlock>
            <StackPanel>
                <CheckBox Name="Cucumber">キュウリ</CheckBox>
                <CheckBox Name="Onion">タマネギ</CheckBox>
                <CheckBox Name="Tomato">トマト</CheckBox>
            </StackPanel>
        </StackPanel>
    </ListBoxItem>
</ListBox>

VBの例

Dim stp As New StackPanel   'StackPanel
Dim bi As New BitmapImage   'BitmapImage
Dim jpnImage As New Image   'Image
Dim tbName As New TextBlock 'TextBlock

'StackPanelの設定（水平方向）
stp.Orientation = Orientation.Horizontal

'Imageの設定
bi.BeginInit()	' ← Silverlight ではコメントにすること
bi.UriSource = New Uri("Images/Japan.gif", UriKind.Relative)
bi.EndInit()	' ← Silverlight ではコメントにすること
jpnImage.Source = bi
jpnImage.Height = 20
jpnImage.Width = 32

'TextBlockの設定
tbName.Text = "日本"

'StackPanelにImageとTextBlockを追加
stp.Children.Add(jpnImage)
stp.Children.Add(tbName)

'作成したアイテムをListBox1コントロールに追加
ListBox1.Items.Add(stp)

C#の例

StackPanel stp = new StackPanel();  // StackPanel
BitmapImage bi = new BitmapImage(); // BitmapImage
Image jpnImage = new Image();       // Image
TextBlock tbName = new TextBlock(); // TectBlock

// StackPanelの設定（水平方向）
stp.Orientation = Orientation.Horizontal;

// Imageの設定
bi.BeginInit();	// ← Silverlight ではコメントにすること
bi.UriSource = new Uri("../Images/Japan.png", UriKind.Relative);
bi.EndInit();	// ← Silverlight ではコメントにすること
jpnImage.Source = bi;
jpnImage.Height = 20;
jpnImage.Width = 32;

// TextBlockの設定
tbName.Text = "日本";

// StackPanelにImageとTextBlockを追加
stp.Children.Add(jpnImage);
stp.Children.Add(tbName);

// 作成したアイテムをListBox1コントロールに追加
listBox1.Items.Add(stp);