カスタム レイアウトの作成

ArcGIS Viewer for Silverlight では、対話的な操作で機能を構成し、リッチな Web マッピング アプリケーションをすばやく作成してカスタマイズできます。たとえば、数種類の標準レイアウトからビューアのレイアウトを選択したり、コードを記述することなく独自のレイアウトを作成したりできます。

Visual Studio テンプレートを使用してカスタム レイアウトを作成

ここでは、ArcGIS Viewer for Silverlight Visual Studio テンプレートを使用してカスタム レイアウトを作成する方法を説明します。まずビューア テンプレートを使用して新しいプロジェクトを作成し、その後、既存のいずれかのレイアウトを必要に応じてカスタマイズします。ビューア テンプレートの詳細については、「Visual Studio テンプレート」をご参照ください。

新規プロジェクトの作成

1. Microsoft Visual Studio 2010、2012、または 2013 を起動します。
2. [ファイル] → [新規作成] → [プロジェクト] の順にクリックします。[新しいプロジェクト] ダイアログ ボックスが表示されます。
3. [新しいプロジェクト] ダイアログ ボックスで [Visual C#] を展開し、[Silverlight] ノードを展開します。
4. [Silverlight] ノードの下にある [Esri] をクリックし、[ArcGIS Viewer for Silverligt Project] を選択します。
5. [名前] テキスト ボックスにアドイン プロジェクトの名前を入力し、[OK] をクリックします。

   アドイン ソリューションに 3 つのプロジェクト（アドイン コードを含むプロジェクト、レイアウトを含むプロジェクト、ビューア Web サイトを含むプロジェクト）が読み込まれます。これらの各プロジェクトには、ツール、ビヘイビアー、レイアウトを独自に作成するときに役立つコードとサンプルが格納されています。

   警告が表示された場合は、最初にソリューションをコンパイルする必要があります。

   注意:

   ツールキットのその他の機能を使用する場合は、CodePlex から Microsoft Silverlight Toolkit をインストールしてください。

カスタム レイアウトの作成

上記の手順に従い、ArcGIS Viewer for Silverlight プロジェクトを使用して新しい Visual Studio プロジェクトを作成したら、次の手順に従ってカスタム レイアウトを作成します。

1. [<プロジェクト名>.Layouts] プロジェクトで Config フォルダを展開し、さらに Layouts フォルダを展開します。各ビューア レイアウトのコピー（Accordion、Basic、Black Box、Black Box - Reverse、Floating Panels、Glass（default）、Under Glow、Wings）が表示されます。
2. これら既存のレイアウトのコピーを作成し、それを基にしてカスタム レイアウトを作成します。既存の各レイアウトには、ディスク内の Layouts フォルダにある共有リソース ディクショナリへの参照が含まれています。これらのリソース ディクショナリには、Colors.xaml、HorizontalNavigationStyle.xaml などが格納されています。
3. カスタム レイアウトを作成するには、Microsoft Visual Studio、Microsoft Expression Blend、またはこれら両方で、Visual Studio ソリューションから [<プロジェクト名>.Layouts] プロジェクトを開きます。Expression Blend では、編集する前にプロジェクトをコンパイルする必要があります。
4. 必要なレイアウトを作成した後、[レイアウトの選択] ダイアログ ボックスにプレビューとして表示される画像を追加することもできます。サイズを 650 x 400 ピクセルに設定し、*.png フォーマットで画像を作成してください。作成した *.png ファイルには、レイアウト *.xaml ファイルと同じ名前を付けます。
5. 自分で作成した *.xaml ファイルと *.png ファイルを <インストール ディレクトリ>\Builder\Templates\Default\Config\Layouts にコピーします。新しいレイアウトが自動的に取り込まれ、[レイアウトの選択] ダイアログ ボックスから選択できるようになります（[レイアウト] タブで [変更] ボタンをクリックします）。