Write Fast: Infragistics ツールボックスの使用

始めに

Infragistics Ultimate UI for Xamarin は Infragistics ツールボックスを提供しています。このツールボックスはコントロールをドラッグ & ドロップしコードに追加できます。その後、別のプロダクティビティ ツールであるコンフィギュレータを使用しコードを記述せずに追加したコントロールの設定を行うことが可能になります。このレッスンでは Infragistics ツールボックスの使用方法を学習します。

レッスンの目的

このレッスンを終えることで Infragistics ツールボックスを使用してコードを記述せずにコンポーネントを使用した開発を行う方法を理解できます。

  1. プロジェクトのセット アップ
  2. ツールボックスから XAML を追加
  3. Infragistics コントロールの使用

このレッスンで使用されているコントロールについての詳細はそれぞれ、Xamarin ラジアル ゲージ コントロール と Xamarin 円チャート コントロール ページ を参照してください。

手順1: プロジェクトのセット アップ

まず、Visual Studio を起動し、メニューから [ファイル] - [新規作成] - [プロジェクト] を選択し、「新しいプロジェクト」ウィンドウを表示させます。左のツリーから [インストール済み] - [テンプレート] - [Visual C#] ノードを展開し、 [Cross-Platform] ノードをクリックします。右側のコンテンツ ビューに表示されている "Cross Platform App (Xamarin.Forms or Native)" を選択し、[OK] ボタンをクリックします。

Infragistics Toolbox - プロジェクトテンプレート

さらにその後、Blank App および Potable Class Library (PCL) を選択します。
Infragistics ツールボックス - Xamarin.Forms

次に Infragistics ツールボックスを表示させます。メニューから [表示] - [その他のウィンドウ] を選択し、一覧の中から [Infragistics Toolbox] を選択します。
Infragistics ツールボックス - ツールボックスの表示

下記のようなツールボックスが表示されます。

Infragistics ツールボックス - 標準コントロールの表示

手順2: ツールボックスから XAML を追加

ツールボックスの機能を確認するために、ソリューションの MainPage.xaml ファイルを開きます。先ほど表示させたツールボックスの Xamarin.Forms ビューのグループの任意のコントロールを XAML の空白の部分にドラッグします。こうすることにより、自動的にドラッグしたコントロールに対応する XAML が生成されます。

Infragistics ツールボックス - XAML の追加

次に CTRL キーを押下したままコントロールをドラッグし XAML エディターに追加します。コントロールそのもののタグの他に良く使用されるであろうプロパティが追加されます。

Infragistics ツールボックス - CTRL キーを使用した XAML の追加

この仕組みを利用することでコードを記述することなく、素早く、簡単にアプリケーションに対してコンポーネントを追加することができます。何回かこのツールボックスの機能を試したのち、手順 3 の準備のため、ツールボックスから追加したタグを全て削除し、初期状態に戻してください。

手順3: Infragistics コントロールの使用

ここではインフラジスティックスが提供するコントロールをソリューションに追加します。まず、ソリューションを右クリックし、コンテキスト メニューから [ソリューションの NuGet パッケージの管理] を選択します。[参照] を選択し、更にパッケージ ソースを Infragistics (ローカル) とします。
Infragistics ツールボックス - NuGet パッケージマネージャーの表示

一覧から Infragistics.XF.Gauges パッケージを選択し、全てのプロジェクトにチェックを入れた後に、[インストール] ボタンをクリックします。同様の作業を Infragistics.XF.Charts に対しても行います。

Infragistics ツールボックス - NuGet パッケージの設定

ソリューションにパッケージが追加された後に再度 MainPage.xaml を表示させると、Infragistics ツールボックスが更新され、Infragistics Xamarin.Forms コントロールの一覧が表示されます。追加されたコントロールは手順 2 と同様にコードを記述することなく、ドラッグ & ドロップを行うことができるようになっています。

Infragistics ツールボックス - Infragistics Ultimate UI for Xamarin コントロールの表示

ツールボックスの別の機能として、コントロールを XAML エディターにドラッグ & ドロップした際に、タグだけではなく、必要な名前空間も同時に追加します。例として XamRadialGauge をドラッグ & ドロップした際にはコントロールを示すタグの他に igGauges というプリフィックスのついた名前空間が ContentPage エレメントの中に定義されます。

Infragistics ツールボックス - XamRadialGauge

この名前空間はドロップしたコントロールごとに自動的に追加されます。XamPieChart を次に追加して、igCharts というプリフィックスから始まる名前空間が定義されていることを確認しましょう。

Infragistics ツールボックス - XamPieChart

結びに

Infragistics ツールボックスは世界初の NuGet を活用したツールボックスであり、アプリケーションの視覚要素を構築するために使用されます。ツールボックスから XAML エディターにコントロールをドラッグすることで、簡単にコントロールのタグを生成できます。また、このツールボックスは Infragistics Ultimate UI for Xamarin コントロールにも対応しています。