Write Fast: コントロール コンフィギュレーターの使用

始めに

Infragistics Ultimate UI for Xamarin には Infragistics が提供する Xamarin.Forms コントロールの設定を視覚的に行えるコントロール コンフィギュレーターが含まれています。このレッスンではコンフィギュレータを使用しコードを記述せずにラジアル ゲージを設定する方法を学びます。コンフィギュレータでは背景色、レイアウト、カラーパレットなどラジアルゲージの様々なプロパティを設定できます。

レッスンの目的

このレッスンを終えることでコントロール コンフィギュレーターを使い Infragistics Ultimate for Xamarin UI で提供されているコントロールの設定方法を理解できます。

  1. プロジェクトのセット アップ
  2. パッケージをソリューションに追加
  3. レイアウトの作成

このレッスンの中で使用されているコントロールの詳細については Xamarin ラジアル ゲージ コントロール ページ をご覧ください。

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

こちらからこのレッスンで使用するプロジェクトをダウンロードいただけます。zip ファイルのプロパティを表示し、[ブロックの解除] にチェックを入れ [OK] ボタンをクリックします。

zip ファイルのセキュリティ

zip ファイルを解凍し、XFPerfSamples.sln ソリューションを Visual Studio で開きます。ソリューションを右クリックし、コンテキストメニューから [NuGet パッケージの復元] を選択します。
NuGet パッケージの復元

NuGet パッケージの復元を完了した後、XFPerfSamples および、XFPerfSamples.Droid プロジェクトに DataSource.DataProviders.OData.Core.dll への参照を追加します。このファイルは解凍した ZIP ファイルの OtherDependencies フォルダーに存在しています。各プロジェクトの [参照] を右クリックしコンテキストメニューから [参照の追加] をクリックします。
参照の追加

表示された参照マネージャー ウィンドウの右下に表示されている [参照] ボタンをクリックし、プロジェクトフォルダーの OtherDependencies フォルダー直下に存在する、DataSource.DataProviders.Odata.Core.dll ファイルを選択し[追加] ボタンを選択します。
参照の追加
アセンブリの追加

参照マネージャーに dll が表示されていることを確認し、[OK] ボタンをクリックすると参照設定が解決されます。
参照の追加

参照の解決

参照設定が完了した後に XFPerfSamples.Droid プロジェクトを右クリックし、コンテキストメニューから [プロパティ] をクリックします。
プロジェクトのプロパティ

プロジェクト設定画面において ターゲット Android バージョン が "SDK バージョンを使用したコンパイルの使用" となっていることを確認してください。

Android プロジェクトの設定

手順2: パッケージをソリューションに追加

Write Fast: Infragistics ツールボックスの使用を参考にして Infragistics.XF.Gauges パッケージをソリューションに追加します。次のコントロールが Infragistics ツールボックスに表示されていることを確認してください。

  • XamBulletGraph
  • XamLinearGauge
  • XamRadialGauge
Xamarin コントロール コンフィギュレーター - Infragistics ツールボックス

手順3: コンフィギュレーターの使用

XFPerfSample プロジェクトの MainPage.xaml を開き、StackLayout タグの内部に Infragistics ツールボックスから XamRadialGauge コントロールを追加します。その後 XamRadialGauge XAML コードを選択すると、ライトバルブ (電球) アイコンが表示されます。このアイコンをクリックし、[構成 XamRadialGauge] を選択します。下記のスクリーンショットを参考にしてください。

Xamarin コントロール コンフィギュレーター - 構成

下記のようにアセンブリが見つからないというダイアログが表示された場合は、ソリューションを一度ビルドしてください。
Xamarin コントロール コンフィギュレーター - エラーメッセージ

コンフィギュレーターはコントロールが現在属しているレイアウトをデザイン画面で再現します。この場合は StackLayout に配置された状態が表示されます。
Xamarin コントロール コンフィギュレーター - レイアウトの反映

右上の × ボタンをクリックし、コンテンツをクリアし、グリッド レイアウトとその内部に XamRadialGauge を配置します。下記のスクリーンショットを参考にしてください。
Xamarin コントロール コンフィギュレーター - コンテンツのクリア

この場合、コンフィギュレーターが自動的にグリッド レイアウトの中で使用されるものとして認識します。
Xamarin コントロール コンフィギュレーター - グリッドレイアウトを反映

リボン メニューからゲージ ドロップダウンを選択し、予めプリセットされたデザインの一覧を確認します。この設定をこのまま利用しても構いません。

Xamarin コントロール コンフィギュレーター - ゲージ プリセット

リボン上のメニューを選択することでレイアウトにどのような影響が発生するかを確認してください。ゲージの透明度や背景色の設定を変更することでゲージを別の UI に埋め込むような表現も可能になります。

確認を終えた後、変更した設定を保存せずに、右上の × ボタンをクリックしコンフィギュレーターを一度閉じ、再度表示させます。改めてゲージ ドロップダウンからプリセットされたデザインを選択し、必須値最小値最大値 0 75 に変更しましょう。

Xamarin コントロール コンフィギュレーター - 最大値と最小値

続けて右側のプロパティ画面で Radial Gauge を展開し、TransitionDuration プロパティを 500 に設定します。続けてその下の Value の値を変更し、デザイン画面でどのようにゲージの針が動くかを確認してください。

Xamarin コントロール コンフィギュレーター - プロパティ画面

コンフィギュレーターのリボン メニューから図形ドロップダウンを選択し項目を選択します。
Xamarin コントロール コンフィギュレーター - 図形

その後、ブラシ ドロップダウンを開き、カラーパレットを選択することで簡単に色の設定を行うことができます。
Xamarin コントロール コンフィギュレーター - ブラシ

このカラーパレットは実際に使用される要素の背景色を考慮し選択することができます。プロパティ画面から Backing グループを展開し、BackingBrush プロパティを変更します。

Xamarin コントロール コンフィギュレーター - BackingBrush

再度ブラシ ドロップダウンを開きドロップダウン内にマウスをホバーした状態で CTRL キーを押すと、先ほど設定した背景色がパレットに表示されパレットを選択する際の手助けとなります。この表示は透明度も正しく反映されるようになっています。
Xamarin コントロール コンフィギュレーター - 背景色を反映したブラシ

次にスケール ドロップダウン メニューをクリックし、プリセットされたスケールのデザインを選択します。選択と同時にデザイン画面が変更されることを確認してください。ドロップダウンについても同様です。

Xamarin コントロール コンフィギュレーター - スケール

全ての設定を終えた後に、適用して閉じるボタンをクリックすることで設定内容から XAML が自動的に生成され、Visual Studio の XAML エディターに挿入されます。生成されたコードを確認してみてください。

Xamarin コントロール コンフィギュレーター - 保存して閉じる

結びに

コントロール コンフィギュレーターを用いることでコントロールを使用するにあたって必要な XAML の設定をコードを記述せずに自動的に行うことが可能となります。このコンフィギュレーターは Infragistics Ultimate UI for Xamarin コントロールに対応したものが提供されます。