インフラジスティックス・コントロール・コンフィギュレーターで素早く記述

手順1プロジェクトを設定

このレッスンで使用するプロジェクトは、こちらをクリックしてダウンロードできます。

次に、解凍後に初めてプロジェクトを実行するには、ソリューション全体をVisual Studioに読み込み、ソリューションを右クリックして、Restore NuGet Packagesを選択します。

完了したら、Portable Class LibraryとAndroidプロジェクトの両方に、DataSource.DataProviders.OData.Core.dllへの参照を追加します。このファイルは、ZIPダウンロードに含まれるOtherDependenciesフォルダーにあります。プロジェクトのReferenceフォルダーを右クリックし、Add Referenceをクリックして追加できます。OtherDependenciesフォルダーを参照し、DataSource.DataProviders.OData.Core.dllを選択します。

ソリューション内の両方のプロジェクトで同じ操作を行います。最後に、ターゲットAndroidバージョンが「Use Compile using SDK version.」に設定されていることを確認します。この設定は、Androidプロジェクトを右クリックして「プロパティ」を選択すると確認できます。

手順2データバインディングを作成

必要に応じて、Visual StudioでMainPage.xamlファイルを開きます。インフラジスティックスのツールボックスから、グリッドのオプションをXAMLコードにドラッグします。次に、ツールボックスからXamDataGridをスタックレイアウトにドラッグ＆ドロップします。結果は、この例と同様になるはずです。

グリッドのXAMLコードを選択した状態で電球アイコンをクリックし、次にConfigure XamDataGridをクリックして、コンフィギュレーターを開きます。ソリューションをビルドする必要があるというメッセージが表示された場合は、OKをクリックします。ソリューションを右クリックしてBuildをクリックしてから、コンフィギュレーターを起動します。キーボードのCtrl + Period + Enterを使用して、コンフィギュレーターを起動することもできます。

コンフィギュレーターが開くと、データグリッドのプロパティには必須フィールドがあることがわかります。この例の必須フィールドはItemsSourceで、ビューモデルのデータにバインドするために必要です。プロパティを変更するには、プロパティラベルの右側にある四角形をクリックし、Create Data Bindingをクリックします。

コンフィギュレーターは、ページ名を使用してデータバインディングを作成します。MainPageを使用したため、ビューモデルはMainPageViewModelであると自動的に判断されます。また、ビューモデルでアクセス可能なプロパティも自動的に一覧表示されます。Peopleプロパティを選択し、**Create Binding.**をクリックします。

バインディングのデータを使用してXamDataGridが作成されます。コンフィギュレーターは、プロパティのデータ型も特定し、そのデータに基づいてデザインを生成します。この例では、サンプルデータは15行のデータから始まります。

手順3グリッドをカスタマイズ

Row Countフィールドを25に変更すると、データグリッドが自動的に拡張され、追加のデータが含まれます。

グリッド内のデータが詰まっていて読みにくいことに気づくかもしれません。これは、データグリッドの_DefaultColumnWidth_プロパティを変更することで解決できます。プロパティを120に設定すると、グリッド内のデータを読めるようになります。

では、データソース内のすべての列をデータグリッドに表示したくない場合はどうすればよいでしょうか？すべての列を表示できるように、既定の列の最小幅を0に戻します。次に、_AutoGenerateColumns_プロパティを無効にします。列が選択されていないため、データプレビューは削除されます。

コンフィギュレーターの左側にある「Columns」パネルには、データグリッドに追加できる使用可能な列の一覧が表示されます。表示したい列の横にあるプラスアイコンをクリックします。この例では、次の列を有効にします：

• FirstName (String)
• LastName (String)
• JobTitle (String)
• Salary (Double)

列がプレビューに追加され、列の幅がフィールドに基づいて自動的に設定されていることに注目してください。また、列のプロパティを使用して、グリッドでの列の表示方法を調整することもできます。使用可能な列の一覧でFirstName (String)を選択します。列のプロパティで、_HeaderText_プロパティを「First」のみに変更します。これにより、データソースを変更せずに列の表示名が変わります。列の幅を75に変更し、_Is Star Sized_を無効にします。

LastName列についても同じ手順を繰り返し、「Last.」とだけ表示されるようにします。

次に、Salary列に進みます。サンプルデータは、データの表示方法によって異なることに注目してください。Numeric Sample Dataの値を変更し、最小値と最大値を設定します。_Minimum Value_を50000に、_Maximum Value_を500000に設定します。

これでデータの表示の一部は修正されますが、まだお金を表しているように見せたいでしょう。まず、_FormatString_プロパティをCurrencyに設定します。列には、他の表示変更を加えることもできます。この例で使用した設定は次のとおりです：

• TextColor: Black
• Background: Green
• ヘッダーのFontSize: 18
• ヘッダーのTextColor: Black
• ヘッダーのFontAttributes: Bold

コントロール・コンフィギュレーターを使用すると、データグリッド内でのデータの視覚的な表現方法も簡単に変更できます。既定では、コンフィギュレーターは列内のデータ型に基づいて列を設定します。たとえば、FirstName列は文字列なので、テキスト列として表示されます。列の表現方法を変更する場合は、その列を選択し、リボンのTypeコンフィギュレーターを使用して別のデータ型を選択するだけです。

データを希望どおりに構成したら、コンフィギュレーターのData Gridタブをクリックし、次にApply & Closeをクリックします。

コードをフォーマットすると、コンフィギュレーターで定義したすべてのプロパティがXAMLコードに生成されています。

これでアプリを実行し、コントロール・コンフィギュレーターで構成したとおりにデータグリッドがデザインされていることを確認できます。

まとめ

インフラジスティックスのツールボックスは、必要なXAMLを自動的に生成するビジュアル・コンフィギュレーターを使用して、データグリッドなどのビジュアル要素を作成するために使用されます。1行もコードを書かずに、コンフィギュレーターから細部まで微調整しながら、これらのコンポーネントを作成できます。これらのコントロールは、Infragistics Ultimate UI for Xamarinで利用できます。