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

[アーティクル]
10/09/2014

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

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

JJ171025.0fb6390c-a631-4f14-8f23-be3723f99405(ja-jp,VS.120).png

ScrollViewer テンプレートのパーツ

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

パーツ名	オブジェクトの種類
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

ヒント

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

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 プロパティは、テンプレートにバインドすることができます。詳細については、「Blend でオブジェクトプロパティをテンプレートに反映させる」を参照してください。

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

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

ScrollViewer

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

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

新しい Microsoft Silverlight プロジェクトを開きます。 [コード] ビューで次のコードを見つけて、終了スラッシュ (/) を削除します。
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

次のコードをコピーし、新しいプロジェクトで、手順 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>

Grid の終了タグ (</Grid>) を、上記で張り付けたコードの最後に追加します。
[オブジェクトとタイムライン] パネルで [root] を右クリックし、[コントロールの作成] をクリックします。 [コントロールの作成] ダイアログボックスで [ScrollViewer]、[OK] の順にクリックします。

この手順では、Blend によって root およびそのコンテンツすべてが削除され、その場所に ScrollViewer が配置されます。次に、Blend によって root が新しい ScrollViewer スタイルのテンプレートになり、その新しいスタイルが新しい ScrollViewer に適用されます。
[オブジェクトとタイムライン] パネルで、[ContentPresenter] を右クリックして [削除] をクリックします。
[オブジェクトとタイムライン] パネルで、[root] をクリックします。 [パーツ] パネルで、[ScrollContentPresenter] をダブルクリックします。
[verticalscrollbar] を右クリックして、[ScrollViewer パーツの作成] をポイントして、[VerticalScrollBar] をクリックします。 [OK] をクリックします。

VerticalScrollBar のスタイルを設定するには、「Blend での Silverlight コントロールの ScrollBar コントロールのスタイル処理のヒント」を参照してください。
[スコープを <オブジェクト名> に戻す] をクリックして、ScrollViewerStyle1 (ScrollViewer template) に戻ります。
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}"
```
ScrollContentPresenter と VerticalScrollBar は、それぞれ独自の列に入れて横に並べる必要があります。 [オブジェクトとタイムライン] パネルで、[root] をクリックします。アートボードで、コントロール上の青い境界をクリックし、次の図に示すようにオレンジ色の矢印をスクロールバーのすぐ横にドラッグします。
右側の列で、[比例サイズ] を 2 回クリックします。 [自動サイズ] アイコンが表示されます。
[オブジェクトとタイムライン] パネルの [ScrollContentPresenter] をクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで、[ColumnSpan] の右側にある [詳細オプション] をクリックして、[リセット] をクリックします。
[オブジェクトとタイムライン] パネルの [VerticalScrollBar] をクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Margin] の右側にある [詳細オプション] をクリックして、[リセット] をクリックします。
content という名前のオブジェクトは、またテンプレート内にあります。このオブジェクトは 200 平方ピクセルの正方形の Rectangle で、このうち 146 平方ピクセルの ScrollViewer がスクロールできます。次の手順では、これをテンプレートから切り取り、[ScrollViewer] の [Content]プロパティに貼り付けます。これで、ScrollContentPresenter が表示されます。 [オブジェクトとタイムライン] パネルで、[コンテンツ] を右クリックして [切り取り] をクリックします。
[スコープを <オブジェクト名> に戻す] をクリックし、Ctrl + V キーを押してコンテンツを [ScrollViewer] の [Content] プロパティに貼り付けます。
Ctrl + Shift + B キーを押してプロジェクトをビルドした後に F5 キーを押してプロジェクトをテストします。

重要

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