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

  • [アーティクル]

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

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

Ee341456.0fb6390c-a631-4f14-8f23-be3723f99405(ja-jp,Expression.40).png

ScrollViewer テンプレートのパーツ

ScrollViewer テンプレートには、以下のパーツが含まれています。

パーツ名 オブジェクトの種類

ScrollContentPresenter

ScrollContentPresenter

HorizontalScrollBar

ScrollBar

VerticalScrollBar

ScrollBar
tip noteヒント :

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

ScrollViewer のヒント

ScrollViewer には、水平方向の ScrollBar と垂直方向の ScrollBar によって制御されるスクロール可能なコンテンツが含まれています。ScrollBar は、常に表示、常に非表示、または必要なときにだけ表示するように設定できます。

ScrollViewerPresenter パーツ

ScrollContentPresenter は必須です。ScrollContentPresenter は、スクロール可能なコンテンツを表示します。

HorizontalScrollBar パーツ

HorizontalScrollBar パーツは省略可能です。このパーツの Visibility プロパティを ComputedHorizontalScrollBarVisibility に、Maximum プロパティを ScrollableWidth に、Value プロパティを HorizontalOffset に、および ViewportSize プロパティを ViewportWidth にテンプレート バインドします。

VerticalScrollBar パーツ

VerticalScrollBar はオプションです。このパーツの Visibility プロパティを ComputedVerticalScrollBarVisibility に、Maximum プロパティを ScrollableHeightに、Value プロパティを VerticalOffsetに、および ViewportSize プロパティを ViewportHeight にテンプレート バインドします。

テンプレートのバインド

Background、BorderThickness、および Padding プロパティは、テンプレートにバインドすることができます。詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

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

次の図は、スクロール ビューアーのデザイン見本図（カンプ）です。

ScrollViewer

上の図はまだスクロール ビューアーではなく、スクロール ビューアーを表すアートワークであることに注意してください。

この例では、次の手順 2 で XAML コードを使用します。

  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" />
   <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
      <Rectangle.Fill>
      <RadialGradientBrush>
         <GradientStop Color="White"/>
         <GradientStop Color="Black" Offset="1"/>
      </RadialGradientBrush>
      </Rectangle.Fill>
   </Rectangle>
   <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] を右クリックして、[コントロールの作成] をクリックします。[コントロールの作成] ダイアログ ボックスで [ScrollViewer]、[OK] の順にクリックします。

    この手順では、root およびそのコンテンツすべてが削除され、その場所に ScrollViewer が配置されます。次に、root が新しい ScrollViewer スタイルのテンプレートになり、その新しいスタイルが ScrollViewer に適用されます。

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

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

  7. [verticalscrollbar] を右クリックして、[ScrollViewer パーツの作成] をポイントして、[VerticalScrollBar] をクリックします。[OK] をクリックします。

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

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

  9. VerticalScrollBar は、スクロール可能な領域のビューポートをスクロールできる必要があります。これには、[プロパティ] パネルの [詳細オプション] メニューの [カスタム式] オプションを使用します。[Visibility] を {TemplateBinding ComputedVerticalScrollBarVisibility} に、[Maximum] を {TemplateBinding ScrollableHeight} に、[Value] を {TemplateBinding VerticalOffset} に、および ViewportSize を {TemplateBinding ViewportHeight} に設定します。

    また、[分割] ビューで [オブジェクトとタイムライン] パネルで [VerticalScrollBar] が選択された状態で、 <ScrollBar x:Name="VerticalScrollBar で始まるコードを見つけ、その行の最後に次のコードを貼り付けます。

    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"

  10. ScrollContentPresenter と VerticalScrollBar は、それぞれ独自の列に入れて横に並べる必要があります。[オブジェクトとタイムライン] パネルの [root] をクリックします。アートボードで、コントロール上の青い境界をクリックし、次の図に示すようにオレンジ色の矢印をスクロール バーのすぐ横にドラッグします。

    列のある ScrollViewer

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

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

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

  14. content という名前のオブジェクトは、またテンプレート内にあります。このオブジェクトは 200 平方ピクセルの正方形の Rectangle で、このうち 146 平方ピクセルの ScrollViewer がスクロールできます。次の手順では、これをテンプレートから切り取り、[ScrollViewer] の [Content]プロパティに貼り付けます。これで、ScrollContentPresenter が表示されます。[オブジェクトとタイムライン] パネルで、[コンテンツ] を右クリックして [切り取り] をクリックします。

  15. [スコープを <オブジェクト名> に戻す] Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックし、Ctrl + V キーを押して コンテンツを [ScrollViewer] の [Content] プロパティに貼り付けます。

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

    important note重要 :

    ListBox は、手順 7 の ScrollBar コントロールのスタイル設定のヒント を使用して ScrollBar のスタイルを設定しないと、予期したとおりに動作しません。

新しい ComboBox テンプレートを他の ComboBox オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。

参照

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

関連項目

概念

一般的な Silverlight コントロールのスタイル処理のヒント
テンプレートを使用するコントロールのスタイルの設定
SimpleScrollBar

Copyright ©2011 by Microsoft Corporation. All rights reserved.