.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コントロールの文字列を折り返すには?
リストボックスの各項目に値をひも付けるには?
コントロールの項目を高速に追加/変更/削除するには?
ListBoxコントロールのオーナー描画(高さ固定)により画像を一覧表示するには?
WindowsフォームでWPFコントロールを利用するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間