.NET Compact Framework 向けの表示方向切り替え対応および高dpi対応アプリケーションの開発
March, 2004
Microsoft Corporation
適用対象
Windows Mobile™ 2003 Second Edition software for Pocket PC
Microsoft® .NET Compact Framework
Microsoft Visual Studio® .NET 2003
要約 : この資料では、.NET Compact Framework 向けに画面の表示方向の切り替えが可能なアプリケーションや高 dpi 対応アプリケーションを作成する方法について説明します。
※Microsoft Download Center（マイクロソフト ダウンロードセンター）から Webcrawler.msi をダウンロードしてください。
トピック
.gif){kind=icon}
はじめに
表示方向切り替え対応の追加
高解像度対応の追加
まとめ
はじめに
この資料では、.NET Compact Framework 向けに画面の表示方向 (オリエンテーション) の切り替えが可能なアプリケーションや高 dpi 対応アプリケーションを作成する方法について説明します。このような新しいシナリオに関連する設計上の問題を理解するには、Windows Mobile ホームページで紹介されているテクニカルアーティクル「画面方向の切替えに対応したアプリケーションの開発」、また｢高 DPI 対応アプリケーションの開発｣ を参照してください。一般的なユーザーインタフェースのガイドラインについて記載されています。
表示方向切り替え対応の追加
はじめに
Windows Mobile 2003 Second Edition ソフトウェアでは、ランドスケープ (横長) およびスクエア (正方形) の画面表示が可能です。従来の Pocket PC では、ポートレート (縦長) 表示のみでしたが、新しい表示機能が追加されています。ポートレート表示用に構築されたアプリケーションをスクエア表示やランドスケープ表示で実行すると、自動的にオペレーティングシステムでフォームに縦スクロールバーが追加され、フォーム全体が表示されます。このような処理は、ランドスケープに表示を変更すると、画面から見えなくなるコントロールがある場合にのみ発生します。しかし、多くの場合、このような方法によってユーザーインターフェイスをランドスケープ表示することが最適とは言えません。これに代わる 2 つの選択肢として、どちらの画面表示方向 (オリエンテーション) でも正しく機能する 1 つのインターフェイスレイアウトを作成する方法、各表示方向に別々のインターフェイスレイアウトを作成する方法があります。
1 つのレイアウトでポートレート、ランドスケープ、スクエアがいずれも正しく表示されるようにするには、すべてのコントロールが 240 × 240 の領域に含まれるようにフォームを構成します。これが一番簡単な解決方法ですが、複雑なフォームの場合には不十分なこともあります。
ポートレートおよびランドスケープ表示機能をどちらも最大限に発揮するには、それぞれに別々のレイアウトを定義する必要があります。また、Form.Resize イベントを使用して、現在の表示方向を判断し、必要に応じて、コントロールを配置し直すことも必要です。
**注意：**通常、スクエア画面の場合は個別にカスタムレイアウトを作成する必要がありません。スクエア表示には、ポートレートレイアウトを使用すると、システムで自動的に縦スクロールバーが追加されます。
各表示方向に個別のレイアウトコードの作成
2 つの表示方向それぞれに関数を定義します。これらの関数では、フォーム上の各コントロールに Size および Location プロパティを設定します。
次の例では、表示方向の切り替えを可能にするために、Visual Studio .NET 2003 に含まれる WebCrawler のサンプルが、どのように変更されたかを示します。既存のアプリケーションまたは新しいアプリケーションで画面の表示方向を切り替えられるようにする場合も、これと同じ方法を適用することができます。
Visual Studio .NET 2003 のフォームデザイナは、複数レイアウトの作成を明示的にサポートしていませんが、次の手順により、このようなコードを作成するツールとして利用することができます。
1.デザイナを使用して、ポートレート表示のレイアウトを作成します。
2.デザイナで生成されたコードを確認します。これは、InitializeComponent という関数であり、「Windows フォームデザイナで生成されたコード」の領域を展開すると表示されます。
3.ポートレートモードでコントロールを配置する新しい関数 Portrait() を作成し、コントロールに Location および Size プロパティを設定するコードを InitializeComponent から Portrait() にコピーします。
4.デザイナを使用して、ランドスケープモードで必要なコントロールをレイアウトに配置し直します。
5.デザイナによって生成されたこの位置調整コードを使用して、ランドスケープモードにも手順 3 を繰り返します。
protected void Portrait()
{
this.crawlTime.Location = new System.Drawing.Point(88, 216);
this.crawlTime.Size = new System.Drawing.Size(136, 16);
this.crawlTimeLabel.Location = new System.Drawing.Point(10, 216);
this.crawlTimeLabel.Size = new System.Drawing.Size(64, 16);
this.crawlStartTime.Location = new System.Drawing.Point(88, 200);
this.crawlStartTime.Size = new System.Drawing.Size(136, 16);
this.crawlStartedLabel.Location = new System.Drawing.Point(10, 200);
this.crawlStartedLabel.Size = new System.Drawing.Size(64, 16);
this.light1.Location = new System.Drawing.Point(208, 66);
this.light1.Size = new System.Drawing.Size(16, 16);
this.light0.Location = new System.Drawing.Point(192, 66);
this.light0.Size = new System.Drawing.Size(16, 16);
this.linkCount.Location = new System.Drawing.Point(88, 182);
this.linkCount.Size = new System.Drawing.Size(136, 16);
this.linkCountLabel.Location = new System.Drawing.Point(10, 182);
this.linkCountLabel.Size = new System.Drawing.Size(64, 16);
this.currentPageBox.Location = new System.Drawing.Point(10, 84);
this.currentPageBox.Size = new System.Drawing.Size(214, 90);
this.currentPageLabel.Location = new System.Drawing.Point(10, 68);
this.currentPageLabel.Size = new System.Drawing.Size(100, 16);
this.addressLabel.Location = new System.Drawing.Point(10, 4);
this.addressLabel.Size = new System.Drawing.Size(214, 16);
this.noProxyCheck.Location = new System.Drawing.Point(10, 48);
this.noProxyCheck.Size = new System.Drawing.Size(214, 20);
this.startButton.Location = new System.Drawing.Point(8, 240);
this.startButton.Size = new System.Drawing.Size(216, 20);
this.addressBox.Location = new System.Drawing.Point(10, 24);
this.addressBox.Size = new System.Drawing.Size(214, 22);
}
protected void Landscape()
{
this.crawlTime.Location = new System.Drawing.Point(216, 136);
this.crawlTime.Size = new System.Drawing.Size(96, 16);
this.crawlTimeLabel.Location = new System.Drawing.Point(160, 136);
this.crawlTimeLabel.Size = new System.Drawing.Size(48, 16);
this.crawlStartTime.Location = new System.Drawing.Point(64, 120);
this.crawlStartTime.Size = new System.Drawing.Size(248, 16);
this.crawlStartedLabel.Location = new System.Drawing.Point(8, 120);
this.crawlStartedLabel.Size = new System.Drawing.Size(48, 16);
this.light1.Location = new System.Drawing.Point(296, 48);
this.light1.Size = new System.Drawing.Size(16, 16);
this.light0.Location = new System.Drawing.Point(280, 48);
this.light0.Size = new System.Drawing.Size(16, 16);
this.linkCount.Location = new System.Drawing.Point(80, 136);
this.linkCount.Size = new System.Drawing.Size(72, 16);
this.linkCountLabel.Location = new System.Drawing.Point(8, 136);
this.linkCountLabel.Size = new System.Drawing.Size(64, 16);
this.currentPageBox.Location = new System.Drawing.Point(10, 64);
this.currentPageBox.Size = new System.Drawing.Size(302, 48);
this.currentPageLabel.Location = new System.Drawing.Point(10, 48);
this.currentPageLabel.Size = new System.Drawing.Size(100, 16);
this.addressLabel.Location = new System.Drawing.Point(10, 4);
this.addressLabel.Size = new System.Drawing.Size(50, 16);
this.noProxyCheck.Location = new System.Drawing.Point(168, 16);
this.noProxyCheck.Size = new System.Drawing.Size(152, 24);
this.startButton.Location = new System.Drawing.Point(8, 160);
this.startButton.Size = new System.Drawing.Size(304, 20);
this.addressBox.Location = new System.Drawing.Point(10, 20);
this.addressBox.Size = new System.Drawing.Size(150, 22);
表示方向の変更の処理
前述の 2 つのレイアウト関数を実際に使用するには、フォームの Resize イベントにイベントハンドラを作成します。このイベントハンドラでは、新しい表示方向に対応するレイアウト関数が呼び出されます。
private void MainForm_Resize(object sender, System.EventArgs e)
{
if(Screen.PrimaryScreen.Bounds.Width>Screen.PrimaryScreen.Bounds.Height)
{
Landscape();
}
else
{
Portrait();
}
}
コードのテスト
プログラムが表示方向の変更を処理できるかどうかをテストするには、ハードウェアボタンにスクリーンの回転機能を割り当てます。これは、[ コントロールパネル ] の [ ボタン ] アイテムで行うことができます。割り当てたいボタンを選択し、[ ボタンの割り当て ] ドロップダウンメニューの [ 画面の回転 ] を選択します。この後、1 つの表示方向でプログラムを実行しボタンを使用して、画面の表示方向を切り替えることができます。
また、[ コントロールパネル ] の [ システム ] タブで [ 画面 ] プロパティを変更することもできます。
高解像度対応の追加
はじめに
Windows Mobile 2003 Second Edition ソフトウェアでは、高 dpi 表示にあわせて、.NET Compact Framework フォームのコントロールが自動的にサイズ変更されます。通常はこの処理で十分ですが、アプリケーションが高 dpi に対応する方法をカスタマイズすることが必要な場合もあります。たとえば、カスタムグラフィックを含むアプリケーションや、1つの画面に多数のコントロールがあるアプリケーションなどの場合、高 dpi のサポートが効果を発揮します。
**注意：**高 dpi レイアウトを作成する場合、コントロールを小さくする機能は慎重に使用してください。コントロールが小さすぎると、ユーザーがスタイラスを使用して作業を行うときに、見づらく、入力しにくくなるからです。
高 dpi 表示に個別のレイアウトを作成するには、表示方向の切り替え対応を追加する場合と同様の方法を使用します。まず、高 dpi / 低 dpi およびランドスケープ / ポートレートの 4 つの表示モードすべてに新しい関数を作成します。次に、Form.Size イベントハンドラを展開して、必要に応じてそれぞれの関数を呼び出します。
**注意：**Visual Studio .NET 2003 フォームデザイナでは、高 dpi 表示のレイアウトコードは生成されません。開発者が自分でこのコードを作成することが必要です。
この後、オペレーティングシステムで自動的にサイズ変更されないように、実行プログラムに dpi 対応のマーキングをする必要があります。これは、res2exe ツールを使ってコンパイルした後に、実行プログラムに Win32 リソースファイルを追加して行います。
Res2exe の使用
•
Visual Studio .NET 2003 のコマンドラインパスに res2exe.exe および hidpi.res を挿入します。これらのファイルは、この資料に添付されたサンプルのインストールディレクトリの下にあるサブディレクトリ Res2Exe Power Toy に既定でインストールされています。
•
Visual Studio .NET 2003 を使ってアプリケーションをコンパイルします。
•
コマンドラインから、次の構文を使って、コンパイルによって生成された実行形式のプログラムに対して res2exe を実行します。
•
res2exe -c -r hidpi.res [EXE file]
**注意：**たとえば、Smartphone 2003 向けなどに、signcode を使用して実行ファイルに署名する場合、アプリケーションに署名する前に res2exe を使用する必要があります。アプリケーションに署名した後に res2exe を使用すると、その署名は無効と見なされます。
コードのテスト
•
Visual Studio .NET 2003 を使って出力ファイルをビルドします (BuildとBuild Solution)。
•
プロジェクトのサブディレクトリ \obj\Debug にある実行ファイルのバージョンで res2exe を使用します。
Visual Studio .NET 2003 で「VGA」エミュレータの 1 つを選択し、デバッガを起動します。
まとめ
.NET Compact Framework で表示方向の切り替えを可能にするには、Portrait および Landscape のレイアウトコードを作成するだけです。また、.NET Compact Framework アプリケーションの多くでは、高 dpi サポートを実装する必要がありませんが、同じ方法で高解像度対応を追加することもできます。