はじめに
スマートフォンやタブレット型デバイスなどの普及で、Windowsアプリケーションもこれまでのマウス＆キーボード操作によるGUIから、指の操作に対応したGUIが求められる時代になってきました。
「ComponentOne Studio 2013J」のTileControl for WinFormsは、そんな時代のニーズにこたえたコントロールで、デスクトップアプリにWindows 8のスタート画面のような操作パネルを持ったアプリケーションを簡単に作成することができます。
今回は、このTileControl for WinFormsを使用して、某スマートフォンのアプリ紹介画面のようなUIで、タッチパネルPCであれば指で、マウスであればホイール操作で横スクロールにより情報を一覧するアプリケーションを作成してみました。
対象読者
Visual Basic 2010/2012、またはVisual C# 2010/2012を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010/2012、Visual C# 2010/2012、Visual Studio 2010/2012でプログラムが作れる環境。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4
プログラム実行時の注意事項
本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4以上で利用できます）。
| ファイル名 | 内容 |
|---|---|
| C1.Win.C1TileControl.4.dll | 本体アセンブリ |
このファイルを、実行プログラムと同じフォルダに格納します。
コンポーネントのインストール
トライアル版は、グレープシティのWebページから申し込みできます。
トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
「ComponentOne Studio 2013J」をインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Win.C1TileControl.4」の「C1TileControl」コントロールです。
これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.Win.C1TileControl.4 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| C1.Win.C1TileControl.4.dll | 本体アセンブリ |
なお、.NET Framework 4が必要です。
C1TileControlコントロールの概要
TileControl for WinFormsのC1TileControlコントロールは、デスクトップアプリにWindows 8のスタート画面のような操作性を簡単に実装できるコントロールです。
「タイル」と呼ばれる大小さまざまなサイズのパネルを配置して、コンテンツを表示します。パネルはパンおよびタップジェスチャをサポートしており、タッチ操作をサポートするデバイスでは指で、マウス操作ではスクロールバーやホイールで操作できます。
- タイル：自由にカスタマイズし、グループ化して管理することができます。グループ内のタイルを、自動または手動でレイアウトでき、任意のサイズを設定できます。
- タイルグループ：垂直または水平方向に積み重ねることができ、自動的にスクロールバーが設定されます。
また、タイルには「テキスト」「イメージ」「パネル」の3種類のエレメントを組み込むことができ、文字や画像の情報を表示させることが可能です。
作成したレイアウト設定をXMLファイルに保存することができ、他のTileControlコントロールにXMLファイルを読み込んで使うことも可能です。
コントロールの背景画像は、Windows 8のスタート画面と同様に、タイルと一緒にスクロールできます。ユーザー画像に加えて、タイルに表示できるさまざまなサイズの標準シンボルセットが用意されています。また、「バッジ番号」または「5つ星」格付け画像をテンプレートの一部として簡単に表示できます。これらの要素は、タイルのプロパティで指定された整数値にバインドできます。
タイルのデザインはテンプレートを作成してタイルに関連付けることができるので、複数のタイルのデザインを個々に作成する必要はありません。また、1つのタイルで複数のテンプレートを切り替えて使うこともできます。
C1TileControlコントロールのデザインでは、コンテキストメニューやスマートタグから、充実した機能を持った4つのデザイナを使って簡単に行えます。
C1TileControlコントロールの構成要素
C1TileControlコントロールは、複数の要素から構成されます。
C1TileControlコントロール
コントロール本体です。
タイル（Tile）
コンテンツを表示するコンテナ的な要素です。複数のタイルをグループ化できます。また、タイルの中にさらにタイルを組み込むことが可能です。
テキスト要素（TextElement）
文字列を表示する要素です。タイルの中に組み込まれます。
イメージ要素（ImageElement）
画像を表示する要素です。タイルの中に組み込まれます。
パネル要素（PanelElement）
テキスト要素やイメージ要素を組み込むことができる要素です。タイルの中に組み込まれます。パネル要素によって、タイルのネストと合わせ、より複雑なレイアウトを作成できます。
C1TileControlコントロールをデザインするには、これらの要素を設定していきます。設定にあたってはそれぞれ専用のデザイナを使います。
また、タイル内の各要素の設定にテンプレートを作成して保存することができますので、複数のタイルのレイアウトデザインを揃えたい時は、1つのテンプレートを作成することで設定を共有できます。
また、C1TileControlコントロールは以下のプロパティでレイアウトを設定できます。
| プロパティ | 説明 |
|---|---|
| AutomaticLayout | タイルを自動または手動で配列するかどうかを示します。 |
| CellHeight | 1つのタイルセルの高さを指定します。 |
| CellSpacing | グループ内のタイルセル間の間隔を指定します。 |
| CellWidth | 1つのタイルセルの幅を指定します。 |
| MaximumRowsOrColumns | 自動レイアウトモードのセルの行または列の最大数を指定します。 |
| Orientation | タイルグループの配列方法を指定します。 |
| ScrollBarStyle | デフォルトまたはシステムスクロールバーを表示するかどうかを指定します。 |
| ScrollOffset | スクロール可能領域の負またはゼロオフセットを指定します。 |
| SurfaceContentAlignment | スクロール可能表面上のグループの配置を指定します。 |
| SurfacePadding | スクロール可能表面の内部スペース。 |
タイルのグループについて
TileControlコントロールは、1つ以上のグループを持つことができ、各グループには、1つ以上のタイル（Tileクラス型）を持つことが可能です。
各グループは、グループの名前を表すキャプションを持ち、グループキャプションのフォント、前景色、パディング、テキストサイズ、位置を変更できます。また、グループのキャプションを太字に設定することも可能です。
グループは、各タイルを水平または垂直方向に並べることが可能です。グループ間のスペースは、GroupSpacingプロパティで指定できるため、特定のグループを他のグループから分離して表示するようなレイアウトを作成できます。
設計時にグループを追加するには、C1TileControl.Groupsコレクションエディタを使用します。また、C1TileControl.Groupsコレクションエディタでは、グループ内に追加するタイルの追加編集を行うGroup.Tilesコレクションエディタを呼び出すことが可能です。
グループとしては、以下のプロパティを使ってデザインすることができます。
| プロパティ | 説明 |
|---|---|
| GroupFront | グループキャプションのフォントを指定します。 |
| GroupPadding | タイルグループの内部スペース。 |
| GroupTextBold |
グループキャプションのフォントが太字かどうかを示します。 このプロパティはGroupFontプロパティよりも優先されます。 |
| GroupTextSize |
グループキャプションのフォントサイズを指定します。 このプロパティはGroupFontプロパティよりも優先されます。 デフォルトのテキストサイズは15ピクセルです。 |
| GroupTextX |
グループキャプションの水平オフセットを指定します。 デフォルトの水平オフセットサイズは20ピクセルです。 |
| GroupTextY |
グループキャプションの垂直オフセットを指定します。 デフォルトの垂直セットサイズは5ピクセルです。 |
タイルと要素について
Tileクラスは、画像（ImageElement）、テキスト（TextElement）、およびパネル（PanelElement）などの複数の種類の要素を保持できる1つのタイルを表します。
タイルはTileControlコントロールの最も重要な構成要素の一つで、画像、テキスト、およびパネルをタイルの各プロパティから簡単に書式設定できます。
設計時にGroup.Tilesコレクションエディタを使用して、タイルをC1TileControlに追加できます。タイルをデザイナに追加すると、指定したグループに追加されます。デフォルトでは1つのグループが表示されるため、グループへのタイルの追加を簡単に開始できます。
タイルは、次のプロパティを使用して外観の効果を設定できます。
| プロパティ | 説明 |
|---|---|
| BackColor | タイルの背景色を取得または設定します。 |
| BackColor1 | タイルの第1追加背景色を取得または設定します。 |
| BackColor2 | タイルの第2追加背景色を取得または設定します。 |
| BackColor3 | タイルの第3追加背景色を取得または設定します。 |
| BackColor4 | タイルの第4追加背景色を取得または設定します。 |
| BackColor5 | タイルの第5追加背景色を取得または設定します。 |
| Checked | タイルがONかどうかを取得または設定します。 |
| ForeColor | タイルの前景色を取得または設定します。 |
| ForeColor1 | タイルの第1追加前景色を取得または設定します。 |
| ForeColor2 | タイルの第2追加前景色を取得または設定します。 |
| ForeColor3 | タイルの第3追加前景色を取得または設定します。 |
| ForeColor4 | タイルの第4追加前景色を取得または設定します。 |
| ForeColor5 | タイルの第5追加前景色を取得または設定します。 |
| Height | タイルの高さをピクセル単位で取得または設定します。 |
| HorizontalSize | タイルの幅をピクセル単位で取得または設定します。 |
| Image | タイルに表示される画像を取得または設定します。 |
| Image1 | タイルに表示される第1追加画像を取得または設定します。 |
| Image2 | タイルに表示される第2追加画像を取得または設定します。 |
| Image3 | タイルに表示される第3追加画像を取得または設定します。 |
| Image4 | タイルに表示される第4追加画像を取得または設定します。 |
| Image5 | タイルに表示される第5追加画像を取得または設定します。 |
| Symbol | タイルに関連付けられたシンボルを取得または設定します。 |
| Template | タイルテンプレートを取得または設定します。 |
| Text | タイル上のテキストを取得または設定します。 |
| Text1 | タイルの第1追加テキスト文字列を取得または設定します。 |
| Text2 | タイルの第2追加テキスト文字列を取得または設定します。 |
| Text3 | タイルの第3追加テキスト文字列を取得または設定します。 |
| Text4 | タイルの第4追加テキスト文字列を取得または設定します。 |
| Text5 | タイルの第5追加テキスト文字列を取得または設定します。 |
| Text6 | タイルの第6追加テキスト文字列を取得または設定します。 |
| Text7 | タイルの第7追加テキスト文字列を取得または設定します。 |
| Text8 | タイルの第8追加テキスト文字列を取得または設定します。 |
| Text9 | タイルの第9追加テキスト文字列を取得または設定します。 |
| ToolTipText | タイルのツールチップテキストを取得または設定します。 |
| VerticalSize | タイルの高さをピクセル単位で取得または設定します。 |
| Width | タイルの幅をピクセル単位で取得します。 |
タイルには、以下の要素を組み込むことができます。
画像（ImageElementクラス）
タイルは1つまたは複数の画像を表示できます。Image、ImageKey、またはSymbolプロパティを使用しタイルの画像を指定できます。また、画像はテンプレートのImageElementの一部として指定するか、C1TileControlクラスに属するCommonImageオブジェクトの一つに格納できます。
1つの要素内に、行列状に複数の画像を設定することができます。例えば幅がN個で高さがM個の画像で構成される1つの大きい画像を作成する場合、ImageColumnsプロパティをNに設定し、ImageRowsプロパティをMに設定します。また、ColumnIndexとRowIndexプロパティを使用し、行列配置の画像の中から指定して画像を選択することも可能です。
パネル（PanelElement）
タイルは1つまたは複数のパネルを表示できます。パネルはネストしたパネルを含むことが可能です。PanelElementクラス型のパネル要素は、ネストしたパネルを含む子要素（画像、イメージ、パネル要素）を格納できます。子要素は、設計時にPanelElement.Childrenコレクションエディタを使用するか、プログラムでChildrenプロパティから追加できます。
また、パネルを使うことで、より複雑なレイアウトを作成することも可能です。
テキスト（TextElement）
タイルは1つ以上のテキスト要素を表示できます。テキスト要素はTextElementクラスで表され、子要素は設計時にデザイナを使用するか、プログラムでText、Text1～Text9プロパティから追加できます。
これらの要素の追加・設定はテンプレートで行います。
テンプレートについて
タイルとテンプレートは、C1TileControlコントロールの最も重要な構成要素で、タイルはデータを提供し、テンプレートは視覚化パターンを提供します。
同じタイルで複数のテンプレートを切り替えることが可能です。例えば、1番目のテンプレートはタイル画像を表示し、2番目は詳細なタイルテキストを表示できます。また、同じテンプレートを複数のタイルに適用することも可能です。
設計時にテンプレートを追加するには、C1TileControl.Templatesコレクションエディタを使用します。作成したテンプレートは、それぞれ適用したいタイルに設定します。
テンプレートとタイルの関係は密接に関連しており、テキストや画像要素のデザインはテンプレートで行い、実際のデータはタイルのプロパティで行います。こうすると、1つのデザインを複数のタイルで共有できます。統一したデザインで多くのタイルを持たせる場合は、個々のタイルを設定していくよりも、効率的にデザイン作業を行うことができます。
GUIの作成
では、さっそくアプリケーションを作成していきましょう。
使用するコントロールはC1TileControlコントロールだけです。このコントロールに、1つのグループで5つのタイルを組み込み、タイル一つ一つにテキスト要素2つとイメージ要素1つを組み込みます。
タイルはすべて同じデザインとし、背景色だけを変えます。
作業は、C1TileControlコントロールの設定だけで、以下の手順で行います。
- テンプレートを作成し、テキスト要素とイメージ要素のデザインを設定する
- グループにタイルを追加し、各タイルのテキスト・イメージデータとテンプレートの設定を行う
- タイトルを設定する
では、順番に設定していきましょう。
テンプレートの作成
まずはじめにテンプレートを作成します。
タイルのデザインとしては、デフォルトよりも縦長にして横並びにし、1つのタイルの中に上下にテキストを、真ん中にイメージを配置します。このデザインは5つのタイルすべて同じにしますので、テンプレートを1つ作成し各タイルに連結します。
① フォームにC1TileControlコントロールを配置し、Dockプロパティを「Fill」にします。
② C1TileControlコントロールのコンテキストメニューを表示し、「テンプレートの編集」をクリックします。
③ C1TileControl.Templatesコレクションエディタが表示されますので、「追加」ボタンをクリックします。
次に、右のペインにあるプロパティリストの「Elements」の「...」ボタンをクリックします。Template.Elementsコレクションエディタが表示されます。このTemplate.Elementsコレクションエディタで、デザイン対象であるテキスト・イメージ要素のデザインを行います。
④ Template.Elementsコレクションエディタの「追加」ボタンの横の「▼」ボタンをクリックし、「TextElement」を2つと「ImageElement」を1つ追加します。
⑤ 最初の「TextElement」をクリックし、右ペインのプロパティリストで次のプロパティを設定します。「TextSelector」は、デザインを設定するタイルのテキスト要素です。ここでは、最初のテキスト「Text1」をデザイン設定の対象とします。
| プロパティ | 設定値 |
|---|---|
| Font | MS明朝,12pt |
| Alignment | TopCenter |
| TextSelector | Text1 |
⑥ 同様に、2番目の「TextElement」と「ImageElement」のプロパティを次のように設定します。
「ImageElement」の「FixedHeight」「FixedWidth」は表示サイズを、「ImageLayout」はイメージの表示方法を設定します。ここでは、200x200のサイズに収まるように画像を縮小して表示するようにしました。
| プロパティ | 設定値 |
|---|---|
| Font | MS明朝,12pt |
| Alignment | BottomCenter |
| TextSelector | Text2 |
| プロパティ | 設定値 |
|---|---|
| FixedHeight | 200 |
| FixedWidth | 200 |
| ImageLayout | Strech |
| ImageSelector | Image1 |
⑦ プロパティを設定したらOKボタンをクリックし、Template.Elementsコレクションエディタを閉じます。C1TileControl.Templatesコレクションエディタに戻るので、「Padding」プロパティを「5,10,5,10」に設定します。
「Padding」プロパティは、タイル内の各要素の上下左右の余白を設定するプロパティです。
設定が終わったらOKボタンをクリックし、C1TileControl.Templatesコレクションエディタを閉じます。
これで、テンプレートが出来上がりました。
タイルとグループの設定
次にタイルを追加し、タイルとグループの設定を行います。デフォルトでタイルは1つのグループと3つのタイルが用意されています。このグループにタイルを2つ追加して5つにし、タイルのサイズとテキスト・イメージを設定します。
① タイルの上でコンテキストメニューを表示し、「グループの編集」メニューをクリックします。
② C1TileControl.Groupsコレクションエディタが表示されますので、右ペインにある「Tiles」プロパティの「...」ボタンをクリックします。
Group.Tilesコレクションエディタが表示されるので、「追加」ボタンを2回クリックし、タイルを2つ追加します。
自動的にフォームのC1TileControlコントロールにもタイルが2つ追加されます。
③ 最初のタイル「タイル1」をクリックし、次のプロパティを設定します。
「Text1」「Text2」「Image1」がタイル内に実際に表示するデータです。「HorizontalSize」「VerticalSize」はタイルの縦横のサイズ、「BackColor」 はタイルの背景色、「Template」は適用するテンプレートの名前です。このプロパティによって、タイルとテンプレートが関連付けられます。
| プロパティ | 設定値 |
|---|---|
| Text1 | <文字列データ> |
| Text2 | <文字列データ> |
| Image1 | <画像データ> |
| HorizontalSize | 3 |
| VerticalSize | 5 |
| BackColor | LightCoral |
| Template | Template1 |
| Text | （なし） |
④ 同様の方法で、残りのタイルのプロパティを設定します。「Template」プロパティはすべてのタイルで「Template1」を指定してください。これで、共通のデザインが適用されます。
| プロパティ | 設定値 |
|---|---|
| Text1 | <文字列データ> |
| Text2 | <文字列データ> |
| Image1 | <画像データ> |
| HorizontalSize | 3 |
| VerticalSize | 5 |
| BackColor | Teal |
| Template | Template1 |
| Text | （なし） |
| プロパティ | 設定値 |
|---|---|
| Text1 | <文字列データ> |
| Text2 | <文字列データ> |
| Image1 | <画像データ> |
| HorizontalSize | 3 |
| VerticalSize | 5 |
| BackColor | SteelBlue |
| Template | Template1 |
| Text | （なし） |
| プロパティ | 設定値 |
|---|---|
| Text1 | <文字列データ> |
| Text2 | <文字列データ> |
| Image1 | <画像データ> |
| HorizontalSize | 3 |
| VerticalSize | 5 |
| BackColor | Olive |
| Template | Template1 |
| Text | （なし） |
| プロパティ | 設定値 |
|---|---|
| Text1 | <文字列データ> |
| Text2 | <文字列データ> |
| Image1 | <画像データ> |
| HorizontalSize | 3 |
| VerticalSize | 5 |
| BackColor | DarkGoldenrod |
| Template | Template1 |
| Text | （なし） |
⑤ 各タイルの設定が終わったら、Group.Tilesコレクションエディタを閉じます。
そして、C1TileControl.Groupsコレクションエディタで「Text」プロパティの値「グループ1」を削除します。自動的に、フォームのグループ名も削除されますので、C1TileControl.Groupsコレクションエディタを閉じます。
⑥ 最後にタイトルを設定します。C1TileControlコントロールをクリックし、プロパティウィンドウの「Text」プロパティの値を「C1TileControl1」から「プロジェクト管理のガントチャートを作成するC1GanttViewコントロール」に変更してください。このプロパティが、コントロールのタイトル文字列になります。
以上で出来上がりです。
まとめ
C1TileControlコントロールは、タッチパネルの操作という新しい形のGUIに対応したコントロールです。もちろんデスクトップでも使えますが、今後タブレットPCなどに対応したアプリケーションを開発する際に、威力を発揮するコントロールといえるでしょう。
