ListBox コントロールのスタイル設定のヒント

  • [アーティクル]

Ee371162.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,Expression.40).png

組み込みの ListBox コントロール テンプレートを使用して、カスタムの ListBox テンプレートを作成できます。既定の ListBox コントロールは、次のように表示されます。

Ee371162.3cc2d3af-6781-4937-b068-c3448a56406d(ja-jp,Expression.40).png

ListBox テンプレートの各パーツ

ListBox コントロールのパーツは、ContentElement パーツ 1 つです。これは、必須のパーツです。

tip noteヒント :

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。

ListBox コントロールの状態

既定では、ListBox コントロールは、次の ValidationStates 状態グループの 3 つの状態のいずれかになります。

状態名 説明

Valid

ListBox コントロールが有効な状態。

InvalidUnfocused

ListBox コントロールが無効で、キーボードでフォーカスされていないときの状態。

InvalidFocused

ListBox コントロールが無効で、キーボードでフォーカスされているときの状態。

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン Ee371162.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,Expression.40).png をクリックするか、[状態] パネルで [ベース] を選択します。

オブジェクトを [ListBox] コントロールに変換するには

次の図は、デザイナーにより作成された ListBox のデザイン見本図（カンプ）です。

ListBox

この例では、次の手順 2 で XAML コードを使用します。これは、上の図の ListBox コントロール テンプレートを使用したカスタム パスワード ボックスの作成に相当します。

Noteメモ :

上の図は ListBox コントロールになる前であり、ListBox コントロールに変換可能なアートワークを示しています。

  1. 新しい Microsoft Silverlight プロジェクトを開きます。[コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 次のコードをコピーし、新しいプロジェクトで、手順 1 で見つけたコードの後に貼り付けます。

    <Grid x:Name="root" Height="146" Width="146">
   <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
   <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
   <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
   <Grid x:Name="verticalscrollbar" Width="17" Height="146" 
       HorizontalAlignment="Right" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
   <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
      Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
      VerticalAlignment="Top"/>
   <Rectangle 
      x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
      Margin="0,24,0,0" VerticalAlignment="Top"/>
   <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
      Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
      VerticalAlignment="Bottom" />
   </Grid>
</Grid>

  3. Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。

  4. [オブジェクトとタイムライン] パネルで [root] を右クリックし、[コントロールの作成] をクリックします。[コントロールの作成] ダイアログ ボックスで [ListBox] をクリックし、[OK] をクリックします。

  5. [オブジェクトとタイムライン] パネルで、[ScrollViewer] を右クリックして [削除] をクリックします。

  6. SHIFT キーを押したまま両方の TextBlock 要素を選択します。右クリックして、[切り取り] をクリックします。

  7. [スコープを <オブジェクト名> に戻す] Ee371162.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックし、CTRL キーを押しながら V キーを 4 回押して、8 つの新しい TextBlock 要素を作成します。SHIFT キーを押したままそれぞれの TextBlock 要素を選択します。

  8. [プロパティ] パネルの [レイアウト] カテゴリで、[Width] ボックスの右側の [詳細オプション] をクリックし、[リセット] をクリックします。[Height] についても、同じ操作を繰り返します。

  9. [オブジェクトとタイムライン] パネルの [ListBox] を右クリックし、[テンプレートの編集] をクリックして [現在のテンプレートの編集] をクリックします。

  10. [オブジェクトとタイムライン] パネルで [root] を右クリックし、[ListBox パーツの作成] をクリックして [ScrollViewer] をクリックします。[OK] をクリックします。

  11. [オブジェクトとタイムライン] パネルで、[ContentPresenter] を右クリックして [削除] をクリックします。

  12. [オブジェクトとタイムライン] パネルで、[root] をクリックします。[パーツ] パネルで、[ScrollContentPresenter] をダブルクリックします。

  13. [オブジェクトとタイムライン] パネルで [VerticalScrollBar] を右クリックし、[ScrollViewer パーツの作成] をクリックして [VerticalScrollBar] をクリックします。[OK] をクリックします。

    VerticalScrollBar のスタイルを設定する方法については、「ScrollBar コントロールのスタイル設定のヒント」を参照してください。

  14. [スコープを <オブジェクト名> に戻す] Ee371162.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックして、ScrollViewer テンプレートに戻ります。

  15. ルートを 2 列に分割するには、次の図で示すように、青いルーラーをコントロールの左側でクリックし、ルーラーをスクロール バーのすぐ横までドラッグします。

    列のある ListBox

  16. 右側の列で、[比例サイズ] Ee371162.1b4edaf6-b6a8-4498-80dc-949375fa610d(ja-jp,Expression.40).png を 2 回クリックします。[自動サイズ] アイコン Ee371162.aa9ec064-22f8-4b62-9eed-3f4772362d22(ja-jp,Expression.40).png が表示されます。

  17. [プロパティ] パネルの [レイアウト] カテゴリで、[詳細プロパティの表示] をクリックします。[MinWidth] の右側の [詳細オプション] をクリックして、[リセット] をクリックします。

  18. [オブジェクトとタイムライン] パネルで、[ScrollContentPresenter] をクリックします。[プロパティ] パネルの [レイアウト] カテゴリで、[ColumnSpan] の右側の [詳細オプション] をクリックし、[リセット] をクリックします。

  19. [オブジェクトとタイムライン] パネルで [VerticalScrollBar] が選択された状態で、[分割] ビューに切り替えます。次のコードをコピーして、<ScrollBar x:Name="VerticalScrollBar" で始まる XAML のコード内に貼り付けます。

    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
    Noteメモ :

    カスタム式を使用して、これらのプロパティを設定することもできます。

  20. [スコープを <オブジェクト名> に戻す] Ee371162.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。[オブジェクトとタイムライン] パネルで、[ScrollViewer] をクリックします。[アセット] パネルから ItemsPresenter を追加するには、[コントロール]、[All]、[ItemsPresenter] の順にクリックします。ListBox の左側の列のアートボード上に ItemsPresenter を描画します。

  21. [オブジェクトとタイムライン] パネルで [ItemsPresenter] が選択された状態で、[プロパティ] パネルの [レイアウト] カテゴリで、[Width] プロパティの右側の [詳細オプション] をクリックして [リセット] をクリックします。[Height] についても、同じ操作を繰り返します。

  22. Ctrl + Shift + B キーを押してプロジェクトをビルドし、次に F5 キーを押して、プロジェクトをテストします。

    important note重要 :

    手順 13 の説明通りに ScrollBar コントロールのスタイル設定のヒント を使用して ScrollBar のスタイルを設定しないと、ListBox は正常に動作しません。

参照

Silverlight の ListBox コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー) Ee371162.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

関連項目

タスク

DataGrid コントロールの使用
TreeView コントロールを使用する

概念

一般的な Silverlight コントロールのスタイル処理のヒント
SimpleListBox および SimpleListBoxItem
テンプレートを使用するコントロールのスタイルの設定
データを表示するコントロールのスタイルを設定する

Copyright ©2011 by Microsoft Corporation. All rights reserved.