.NET TIPS

［WPF、Silverlight 2］リストボックスの幅全体に項目を表示するには？［XAML］

デジタルアドバンテージ　遠藤 孝信
2010/02/18

　WPFでは、リストボックスに追加された項目が、リストボックスの幅よりも小さい場合、リストボックスのHorizontalContentAlignment属性に「Stretch」を設定することにより、項目を幅全体に表示できる（既定値は「Left」）。

　以下の画面は、「TIPS：［Silverlight 2］TextBlockコントロールに背景色を設定するには？」で掲載しているXAMLコードをWPFで使用した場合の画面だ（HorizontalContentAlignment属性は未設定）。


リストボックスのHorizontalContentAlignment属性が未設定
既定値のLeftが設定されている。

　上記のリストボックスのHorizontalContentAlignment属性を「Stretch」に設定すると、次のような画面になる。


リストボックスのHorizontalContentAlignment属性を「Stretch」に設定

　念のために、WPFのXAMLコードも以下に示しておく。

<Window x:Class="WpfApplication2.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="300" Width="450">

  <!--  HorizontalContentAlignment="Stretch"を追加 -->
  <ListBox Margin="20" FontSize="20"
           HorizontalContentAlignment="Stretch" >

    <Grid Background="LightBlue">
      <TextBlock Margin="10" >
        Gridパネルにより背景色を設定
      </TextBlock>
    </Grid>

    <Border Background="LightPink" CornerRadius="20">
      <TextBlock Margin="10">
        Borderにより背景色を設定
      </TextBlock>
    </Border>

  </ListBox>
</Window>
WPFアプリケーションのサンプル・コード（XAML）

Silverlightでは項目のスタイルを変更

　Silverlightにおいても、WPFと同じようにリストボックスにHorizontalContentAlignment属性が用意されているが、これを「Strech」に設定しても、WPFのように項目は幅いっぱいに表示されない（バグだと思われる）。

　Silverlightの場合には、以下のXAMLコードのように、リストボックスのListBox.ItemContainerStyleプロパティを記述して、リストボックスの項目であるListBoxItemのHorizontalContentAlignment属性を設定すればよい。

<UserControl x:Class="SilverlightApplication2.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <ListBox Margin="20" FontSize="20">

    <!-- リストボックスの幅全体に項目を表示 -->
    <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
      </Style>
    </ListBox.ItemContainerStyle>

    <Grid Background="LightBlue">
      <TextBlock Margin="10" >
        Gridパネルにより背景色を設定
      </TextBlock>
    </Grid>

    <Border Background="LightPink" CornerRadius="20">
      <TextBlock Margin="10">
        Borderにより背景色を設定
      </TextBlock>
    </Border>

  </ListBox>
</UserControl>
Silverlightアプリケーションのサンプル・コード（XAML）

　このアプリケーションを実行すると以下のような画面となる。


Silverlightアプリケーションの実行画面

　ItemContainerStyleプロパティは、リストボックスなどの項目コレクションを表示するアイテム・コントロール（ItemsControlクラスの派生クラス）で生成される項目に対して、スタイルを適用するためのものだ。End of Article

カテゴリ：WPF　処理対象：ListBoxコントロール
カテゴリ：Silverlight 2　処理対象：ListBoxコントロール
使用ライブラリ：ListBoxコントロール（System.Windows.Controls名前空間）
使用ライブラリ：ListBoxItemクラス（System.Windows.Controls名前空間）
関連TIPS：TextBlockコントロールに背景色を設定するには？

この記事と関連性の高い別の.NET TIPS
リストボックスの各項目に値をひも付けるには？
［WPF、Silverlight 2］リストボックス内でTextBlockコントロールの文字列を折り返すには？
WPFテーマで外観・デザインを簡単に変更するには？（基本編）
WindowsフォームでWPFコントロールを利用するには？
コントロールの項目を高速に追加／変更／削除するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH