WisdomSoft - for your serial experiences.

6.5 スクロール処理

要素内に収まらない大きなコンテンツを表示する場合、通常は画面をスクロールさせてユーザーが表示したい場所を制御できるように仕組みます。大きなコンテンツを部分表示するときに画面をスクロールさせるには System.Windows.Controls.ScrollViewer クラスを使います。

6.5.1 大きなコンテンツの表示

大きな画像ファイルや長文のテキストなど、ウィンドウ上では全体を表示できない大きなサイズのコンテンツを扱う場合、通常はスクロールバーを用いて画面をスクロールさせます。ScrollBar クラスを使ってスクロールバーを表示することはできましたが、ScrollBar クラスが提供するのは、スライダーと同様に最小値、最大値、そして現在の値を設定する機能だけです。画面をスクロールさせる場合、アプリケーションでスクロール処理を実装しなければなりません。

大きなコンテンツをスクロールさせるには ScrollBar のような部品ではなく、スクロール可能なコンテンツを管理する System.Windows.Controls.ScrollViewer クラスを用いるべきです。

System.Windows.Controls.ScrollViewer クラス
System.Object 
   System.Windows.Threading.DispatcherObject 
     System.Windows.DependencyObject 
       System.Windows.Media.Visual 
         System.Windows.UIElement 
           System.Windows.FrameworkElement 
             System.Windows.Controls.Control 
               System.Windows.Controls.ContentControl 
                System.Windows.Controls.ScrollViewer
[TemplatePartAttribute(Name="PART_VerticalScrollBar", Type=typeof(ScrollBar))] 
[LocalizabilityAttribute(LocalizationCategory.Ignore)] 
[TemplatePartAttribute(Name="PART_HorizontalScrollBar", Type=typeof(ScrollBar))] 
[TemplatePartAttribute(Name="PART_ScrollContentPresenter", Type=typeof(ScrollContentPresenter))] 
public class ScrollViewer : ContentControl

このクラスのコンストラクタは、パラメータを受け取りません。

ScrollViewer クラスのコンストラクタ
public ScrollViewer ()

ScrollViewer クラスは、ContentControl を継承しているため Content プロパティに 1 つの UIElement を保有することができます。このクラスは、Content プロパティに設定されたコンテンツを管理するコンテナの役割を果たします。もし、Content に設定されている UIElement のサイズが、コンテナである ScrollViewer のサイズよりも大きい場合、ScrollViewer は自動的にスクロールバーを調整してスクロール可能な状態になります。

ユーザーがスクロールバーをドラッグすると、ScrollViewer は自動的にコンテンツをスクロールさせてくれます。スクロール処理を行うコードを書く必要はありません。

コード1
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;

class Test {
	[STAThread]
	public static void Main() {
		Ellipse ellipse = new Ellipse();
		ellipse.Fill = Brushes.Black;
		ellipse.Width = 640;
		ellipse.Height = 480;

		ScrollViewer viewer = new ScrollViewer();
		viewer.Content = ellipse;		

		Window wnd = new Window();
		wnd.Content = viewer;

		Application app = new Application();
		app.Run(wnd);
	}
}
実行結果
コード1 実行結果

コード1では、大きな楕円形を ScrollViewer コントロールのコンテンツとして表示しています。親コントロールである ScrollViewer のサイズが楕円形よりも大きい場合はスクロールする必要が無いので、スクロールバーは無効状態となります。しかし、ScrollViewer が楕円形よりも小さい場合、楕円形全体を表示することができなくなってしまうため、スクロールバーが適切に調整され、スクロール可能になります。

既定の状態では、ScrollViewer は垂直スクロールバーしか表示していません。横方向にスクロールする垂直スクロールバーを表示させるには HorizontalScrollBarVisibility プロパティの設定を変更してください。同様に、垂直スクロールバーの可視性も VerticalScrollBarVisibility プロパティから設定・取得できます。

ScrollViewer クラス VerticalScrollBarVisibility プロパティ
[BindableAttribute(true)] 
public ScrollBarVisibility VerticalScrollBarVisibility { get; set; }
ScrollViewer クラス HorizontalScrollBarVisibility プロパティ
[BindableAttribute(true)] 
public ScrollBarVisibility HorizontalScrollBarVisibility { get; set; }

このプロパティには、スクロールバーをどのように表示するかを指定する System.Windows.Controls.ScrollBarVisibility 列挙体のメンバのいずれかを設定します。既定では、HorizontalScrollBarVisibility プロパティにスクロールバーを常に表示しないことを表す Hidden が、VerticalScrollBarVisibility プロパティには常に表示することを表す Visible が設定されています。

System.Windows.Controls.ScrollBarVisibility 列挙体
public enum ScrollBarVisibility

この列挙体には、バーを表示することを表す Visible、表示しないことを表す Hidden、必要応じて表示したり隠したりする Auto、スクロールを無効化する Disabled の 4 つのメンバが用意されています。Disabled の場合、必要に応じてコンテンツの幅や高さがコンテナのサイズまで切り詰められます。

コード
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;

class Test {
	[STAThread]
	public static void Main() {
		Ellipse ellipse = new Ellipse();
		ellipse.Fill = Brushes.Black;
		ellipse.Width = 640;
		ellipse.Height = 480;

		ScrollViewer viewer = new ScrollViewer();
		viewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
		viewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
		viewer.Content = ellipse;	

		Window wnd = new Window();
		wnd.Content = viewer;

		Application app = new Application();
		app.Run(wnd);
	}
}
実行結果
コード2 実行結果

コード2は、横スクロールも可能な ScrollViewer を表示するプログラムです。このプログラムでは、水平、垂直スクロールバーの可視性を共に Auto に設定しています。そのため、ウィンドウのサイズを大きくして、ScrollViewer が楕円を十分に表示できる場合はスクロールバーは自動的に隠されます。