連載：.NETでWindowsアプリを作ろう　第2回　サムネイル画像コントロールを作ろう（2/4）

連載　.NETでWindowsアプリを作ろう

第2回　サムネイル画像コントロールを作ろう

デジタルアドバンテージ　遠藤孝信
2005/07/23

Page1 Page2 Page3 Page4

サムネイル画像コントロールのプログラミング

　それではプログラミングを始めていきましょう。

■「Windows コントロールライブラリ」プロジェクトの作成

　Visual Studio .NET（以下、VS.NET）を起動して、今回はテンプレートとして「Windows コントロールライブラリ」を選択し、プロジェクトを新規作成します。プロジェクト名は「ThumbViewerControl」とします。

　そしてまず、自動作成されているファイル「UserControl1.cs」あるいは「UserControl1.vb」を、「ThumbViewerControl.cs」あるいは「ThumbViewerControl.vb」に変更します。また、デザイン画面ではコントロールのNameプロパティを「ThumbViewer」に変更します。これにより、作成されるクラス名も「ThumbViewer」となります。

　今回のプロジェクトをビルドすると、最終的には「ThumbViewerControl.dll」というDLLファイルが出来上がります。次回で実際に行いますが、このDLLファイルはツールバーに登録でき、アプリケーションのフォームに配置することができます。

■ダブル・バッファリングの設定

　コントロールでは、リサイズ時にはすべてのサムネイルの表示位置を再計算し、表示領域全体を消去してから、サムネイルを1つずつ描画するということを行います。このため、アプリケーション・ウィンドウの枠をドラッグしている最中などには画面がちらついてしまいます。

　このようなちらつきを抑制するために、まずはコントロールのコンストラクタ（C#ではThumbViewerメソッド、VB.NETではNewメソッド）で、ダブル・バッファリングの設定を行っておきます。これは次のようなコードとなります。

this.SetStyle(ControlStyles.DoubleBuffer, true);

this.SetStyle(ControlStyles.UserPaint, true);

this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);

Me.SetStyle(ControlStyles.DoubleBuffer, True)

Me.SetStyle(ControlStyles.UserPaint, True)

Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)

ダブル・バッファリングの設定（上：C#、下：VB.NET）

　このような設定を一度行っておくと、以降は描画がまとめて行われるようになり、ちらつきがなくなります。

　Windowsアプリケーションを作ったが描画がちらついて困るという方は、この設定をおまじない的にでも入れてみてください。設定の詳細については「.NET TIPS：ダブル・バッファリングにより描画を行うには？」で解説されています。

■サムネイル描画のためのグリッド

　コントロールでは、表示領域内でサムネイルが均等な位置に表示されるように、またクリックされたサムネイルをすぐに判定できるように、現在コントロールに追加されているすべてのサムネイルが収まる仮想的なグリッド（日本語では「格子」あるいは「マス目」）を設けています。

サムネイルのためのグリッド

　後述するように、実際の描画ではスクロールしている部分のサイズを考慮しながら、表示すべきグリッドの行の位置と行数を求めてからサムネイルを描画します。

　図中にあるグリッドの行数（rowsフィールド）と列数（colsフィールド）、そして、1つのグリッドのサイズ（gridSizeフィールド。1つのグリッドは正方形）の算出は、updateRowsColsメソッドで行っています。

　このメソッドの内容はおおよそ以下のようになります（実際には選択されているサムネイルの枠を描画するために、各グリッド内には2ピクセルのすき間を取っています）。

void updateRowsCols()

{

  ……

  cols = this.ClientSize.Width / thumbSize;

  if (cols == 0)

    cols = 1;



  gridSize = this.ClientSize.Width / cols;



  rows = images.Count / cols;

  if (images.Count % cols > 0)

    rows++;

  ……

Sub updateRowsCols()

  ……

  cols = Me.ClientSize.Width \ thumbSize

  If cols = 0 Then

    cols = 1

  End If



  gridSize = Me.ClientSize.Width \ clos



  rows = images.Count \ cols

  If images.Count Mod cols > 0 Then

    rows += 1

  End If

  ……

サムネイルを表示するためのグリッド計算（上：C#、下：VB.NET）

VB.NETでは整数同士の割り算はDouble型になり、またDouble型の値を整数型変数に代入すると値が丸められるため、商を求めるためには「/」の代わりに「\」を使用する必要がある。

　表示領域の幅（ClientSize.Width）と1つのサムネイルのサイズ（thumbSizeフィールド）はあらかじめ決まっているので、ここではまずこの2つから列数を求め、それによりグリッドのサイズを求めます。そして最後にサムネイルの総数を列数で割れば行数が求まります。

　なお、imagesフィールドは、サムネイルを格納しているコレクションで、「images.Count」により現在追加されているサムネイルの総数を得ることができます。

■スクロール領域の設定

　updateRowsColsメソッドの最後では、次のようにしてサムネイルの描画に必要な領域の高さ（rows * gridSize）を、コントロールのAutoScrollMinSizeプロパティに設定します。

this.AutoScrollMinSize = new Size(0, rows * gridSize);

Me.AutoScrollMinSize = New Size(0, rows * gridSize)

スクロール領域の設定（上：C#、下：VB.NET）

　この設定により、描画に必要な領域の高さがコントロールの実際の表示領域よりも大きい場合にはスクロールバーが出現し、表示領域がスクロール可能となります。

　updateRowsColsメソッドは、コントロールのリサイズ時、ThumbnailSizeプロパティの変更時、Addメソッドによる画像の追加時などに呼び出されます。

INDEX
	.NETでWindowsアプリを作ろう
	第2回　サムネイル画像コントロールを作ろう
	1．独自コントロールとして作成するサムネイル画像コントロール
	2．プロジェクトの作成とグリッドの設定
	3．OnPaintメソッドによるサムネイルの描画
	4．画像の追加とマウス・クリック時の処理

　「.NETでWindowsアプリを作ろう」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える