.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コントロールの文字列を折り返すには?
リストボックスの各項目に値をひも付けるには?
WindowsフォームでWPFコントロールを利用するには?
WPFテーマで外観・デザインを簡単に変更するには?(基本編)
コントロールの項目を高速に追加/変更/削除するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
  • 第7回 Windowsアプリのデバッグ&リリース (2017/7/14)
     バグはどうやってつぶせばいいのか? 完成したアプリケーションはどうやってリリースすればいいのか? VS 2017入門の最終回
  • Emotion API (2017/7/13)
     Emotion APIは、画像ファイルや動画ファイルを渡すだけで、そこに映っている人がどんな感情を持っているかを簡単に判定してくれる
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

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

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH