ScrollViewer の概要

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

ユーザーインターフェイスのコンテンツは、コンピュータの画面の表示領域より大きいことがよくあります。ScrollViewer コントロールには、Windows Presentation Foundation (WPF) アプリケーションのコンテンツのスクロールを可能にする便利な方法が用意されています。このトピックでは、ScrollViewer 要素について説明し、使用例をいくつか示します。

このトピックは、次のセクションで構成されています。

ScrollViewer コントロール
物理スクロールと論理スクロール
ScrollViewer 要素の定義と使用
ScrollViewer へのスタイルの適用
ドキュメントの改ページ処理
関連トピック

ScrollViewer コントロール

WPF アプリケーションでのスクロールを可能にする定義済み要素には、ScrollBar と ScrollViewer の 2 つがあります。ScrollViewer コントロールは、スクロール可能領域に他の表示要素を表示するために、水平および垂直の ScrollBar 要素とコンテンツコンテナ (Panel 要素など) をカプセル化します。コンテンツのスクロール用に ScrollBar 要素を使用するには、カスタムオブジェクトを作成する必要があります。一方、ScrollViewer 要素は ScrollBar の機能をカプセル化する複合コントロールなので、単独で使用することができます。

ScrollViewer コントロールは、マウスとキーボードの両方のコマンドに応答し、あらかじめ設定されているインクリメントでコンテンツをスクロールする多くのメソッドが定義されています。ScrollViewer の状態変化を検出するには、ScrollChanged イベントを使用できます。

ScrollViewer が持つことのできる子は 1 つだけです。通常は、UIElements の Children コレクションをホストできる Panel 要素を使用します。Content プロパティは、ScrollViewer の唯一の子を定義します。

物理スクロールと論理スクロール

物理スクロールは、あらかじめ定められた物理インクリメント (通常は、ピクセル数で宣言された値) で内容をスクロールするために使用されます。論理スクロールは、論理ツリーの次の項目にスクロールするために使用されます。物理スクロールは、ほとんどの Panel 要素の既定のスクロール動作です。WPF は両方の種類のスクロールをサポートします。

IScrollInfo インターフェイス

IScrollInfo インターフェイスは、ScrollViewer または派生コントロール内のメインのスクロール領域を表します。このインターフェイスではスクロールのプロパティとメソッドが定義されており、物理インクリメントではなく論理単位でのスクロールを必要とする Panel 要素によって実装できます。IScrollInfo のインスタンスを派生 Panel にキャストし、そのスクロールメソッドを使用すると、ピクセルインクリメントではなく、子コレクション内の次の論理単位にスクロールする場合に役立ちます。既定では、ScrollViewer コントロールは物理単位でのスクロールをサポートします。

StackPanel と VirtualizingStackPanel はどちらも IScrollInfo を実装し、論理スクロールをネイティブでサポートします。論理スクロールをネイティブでサポートするレイアウトコントロールでも、ホスト Panel 要素を ScrollViewer 内にラップし、CanContentScroll プロパティを false に設定することで、物理スクロールを実現できます。

IScrollInfo のインスタンスを StackPanel にキャストして、インターフェイスによって定義されているコンテンツスクロールメソッド (LineUp および LineDown) を使用する方法を次のコード例に示します。

Private Sub spLineUp(ByVal sender As Object, ByVal args As RoutedEventArgs)

    CType(sp1, IScrollInfo).LineUp()
End Sub
Private Sub spLineDown(ByVal sender As Object, ByVal args As RoutedEventArgs)

    CType(sp1, IScrollInfo).LineDown()
End Sub

private void spLineUp(object sender, RoutedEventArgs e)
{
    ((IScrollInfo)sp1).LineUp();
}
private void spLineDown(object sender, RoutedEventArgs e)
{
    ((IScrollInfo)sp1).LineDown();
}

ScrollViewer 要素の定義と使用

次の例では、いくつかのテキストと四角形が入った ScrollViewer をウィンドウ内に作成します。ScrollBar 要素は、必要な場合にのみ表示されます。ウィンドウのサイズを変更すると、ComputedHorizontalScrollBarVisibility プロパティと ComputedVerticalScrollBarVisibility プロパティの値の更新に応じて、ScrollBar 要素が表示されたり表示されなくなったりします。

メモ :
コードサンプル全体については、「ScrollViewer のサンプル」を参照してください。

'Define a ScrollViewer.
Dim myScrollViewer As New ScrollViewer
myScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto

'Add Layout control.
Dim myStackPanel As New StackPanel
myStackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Left
myStackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Top

Dim myTextBlock As New TextBlock
myTextBlock.TextWrapping = TextWrapping.Wrap
myTextBlock.Margin = New Thickness(0, 0, 0, 20)
myTextBlock.Text = "Scrolling is enabled when it is necessary. Resize the Window, making it larger and smaller."

Dim myRectangle As New Rectangle
myRectangle.Fill = Brushes.Red
myRectangle.Width = 500
myRectangle.Height = 500

'Add child elements to the parent StackPanel.
myStackPanel.Children.Add(myTextBlock)
myStackPanel.Children.Add(myRectangle)

'Add the StackPanel as the lone Child of the Border
myScrollViewer.Content = myStackPanel
Me.Content = myScrollViewer

// Create the application's main window
mainWindow = new Window ();
mainWindow.Title = "ScrollViewer Sample";

// Define a ScrollViewer
myScrollViewer = new ScrollViewer();
myScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;

// Add Layout control
myStackPanel = new StackPanel();
myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
myStackPanel.VerticalAlignment = VerticalAlignment.Top;

TextBlock myTextBlock = new TextBlock();
myTextBlock.TextWrapping = TextWrapping.Wrap;
myTextBlock.Margin = new Thickness(0, 0, 0, 20);
myTextBlock.Text = "Scrolling is enabled when it is necessary. Resize the Window, making it larger and smaller.";

Rectangle myRectangle = new Rectangle();
myRectangle.Fill = Brushes.Red;
myRectangle.Width = 500;
myRectangle.Height = 500;

// Add child elements to the parent StackPanel
myStackPanel.Children.Add(myTextBlock);
myStackPanel.Children.Add(myRectangle);

// Add the StackPanel as the lone Child of the Border
myScrollViewer.Content = myStackPanel;

// Add the Border as the Content of the Parent Window Object
mainWindow.Content = myScrollViewer;
mainWindow.Show ();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="ScrollViewer Sample">
  <ScrollViewer HorizontalScrollBarVisibility="Auto">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
      <TextBlock TextWrapping="Wrap" Margin="0,0,0,20">Scrolling is enabled when it is necessary. 
      Resize the window, making it larger and smaller.</TextBlock>
      <Rectangle Fill="Red" Width="500" Height="500"></Rectangle>
    </StackPanel>
  </ScrollViewer>
</Page>

ScrollViewer へのスタイルの適用

Windows Presentation Foundation の他のコントロールと同様に、ScrollViewer にもスタイルを設定でき、コントロールの既定のレンダリング動作を変更できます。カスタムスタイルを設定した ScrollViewer の例については、「ScrollViewer のスタイルのサンプル」を参照してください。コントロールのスタイル設定の詳細については、「スタイルとテンプレート」を参照してください。

ドキュメントの改ページ処理

ドキュメントコンテンツの場合は、スクロールの代わりに、改ページ処理をサポートするドキュメントコンテナを選択できます。FlowDocuments は、FlowDocumentPageViewer などの表示コントロール内にホストされることを想定して設計されたドキュメントであり、スクロールする必要がないように、複数ページにわたるコンテンツの改ページ処理をサポートします。DocumentViewer は FixedDocument コンテンツを表示するためのソリューションを提供し、従来のスクロールを使用して、表示領域の外部にあるコンテンツを表示します。

ドキュメント形式と表示オプションの詳細については、「Windows Presentation Foundation のドキュメント」を参照してください。

参照

Share via