次の方法で共有

Blend での Silverlight コントロールの ListBox コントロールのスタイル処理のヒント

  • [アーティクル]

JJ170044.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,VS.120).png

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

JJ170044.3cc2d3af-6781-4937-b068-c3448a56406d(ja-jp,VS.120).png

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

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

ヒント

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

ListBox コントロールの状態

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

状態名

説明

Valid

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

InvalidUnfocused

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

InvalidFocused

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

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

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

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

ListBox

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

注意

上の図は 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. [スコープを <オブジェクト名> に戻す]JJ170044.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).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 のスタイルを設定するには、「Blend での Silverlight コントロールの ScrollBar コントロールのスタイル処理のヒント」を参照してください。

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

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

    列のある ListBox

  16. 右側の列で、[比例サイズ] JJ170044.1b4edaf6-b6a8-4498-80dc-949375fa610d(ja-jp,VS.120).png を 2 回クリックします。 [自動サイズ] アイコン JJ170044.aa9ec064-22f8-4b62-9eed-3f4772362d22(ja-jp,VS.120).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}"

    注意

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

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

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

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

    重要

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

参照

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

参照

処理手順

DataGrid コントロールの使用

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

概念

Blend での一般的な Silverlight コントロールのスタイル処理のヒント

SimpleComboBox および SimpleComboBoxItem (Blend での WPF サポート)

Blend での一般的な Silverlight コントロールのスタイル処理のヒント

データを表示するコントロールのスタイルを設定する