CodeZine(コードジン)

特集ページ一覧

Windows 8風の操作パネルを持った.NETアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/07/29 14:00

 「ComponentOne Studio 2013J」のTileControl for WinFormsを使って、横スクロールで情報を一覧するアプリケーションを作成してみます。

はじめに

 スマートフォンやタブレット型デバイスなどの普及で、Windowsアプリケーションもこれまでのマウス&キーボード操作によるGUIから、指の操作に対応したGUIが求められる時代になってきました。

 「ComponentOne Studio 2013J」のTileControl for WinFormsは、そんな時代のニーズにこたえたコントロールで、デスクトップアプリにWindows 8のスタート画面のような操作パネルを持ったアプリケーションを簡単に作成することができます。

 今回は、このTileControl for WinFormsを使用して、某スマートフォンのアプリ紹介画面のようなUIで、タッチパネルPCであれば指で、マウスであればホイール操作で横スクロールにより情報を一覧するアプリケーションを作成してみました。

某スマートフォンのアプリ紹介画面のようなUIのアプリケーションを作成
某スマートフォンのアプリ紹介画面のようなUIのアプリケーションを作成

対象読者

 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」の「C1TileControl」コントロールを選択する
アセンブリ名が「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つのデザイナを使って簡単に行えます。

4つのデザイナで簡単に仕上げることができる(ヘルプより抜粋)
4つのデザイナで簡単に仕上げることができる(ヘルプより抜粋)

C1TileControlコントロールの構成要素

 C1TileControlコントロールは、複数の要素から構成されます。

C1TileControlコントロール

 コントロール本体です。

タイル(Tile)

 コンテンツを表示するコンテナ的な要素です。複数のタイルをグループ化できます。また、タイルの中にさらにタイルを組み込むことが可能です。

テキスト要素(TextElement)

 文字列を表示する要素です。タイルの中に組み込まれます。

イメージ要素(ImageElement)

 画像を表示する要素です。タイルの中に組み込まれます。

パネル要素(PanelElement)

 テキスト要素やイメージ要素を組み込むことができる要素です。タイルの中に組み込まれます。パネル要素によって、タイルのネストと合わせ、より複雑なレイアウトを作成できます。

 C1TileControlコントロールをデザインするには、これらの要素を設定していきます。設定にあたってはそれぞれ専用のデザイナを使います。

 また、タイル内の各要素の設定にテンプレートを作成して保存することができますので、複数のタイルのレイアウトデザインを揃えたい時は、1つのテンプレートを作成することで設定を共有できます。

C1TileControlコントロールの構成要素
C1TileControlコントロールの構成要素

 また、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コレクションエディタを使用します。作成したテンプレートは、それぞれ適用したいタイルに設定します。

C1TileControl.Templatesコレクションエディタ(ヘルプより抜粋)
C1TileControl.Templatesコレクションエディタ(ヘルプより抜粋)

 テンプレートとタイルの関係は密接に関連しており、テキストや画像要素のデザインはテンプレートで行い、実際のデータはタイルのプロパティで行います。こうすると、1つのデザインを複数のタイルで共有できます。統一したデザインで多くのタイルを持たせる場合は、個々のタイルを設定していくよりも、効率的にデザイン作業を行うことができます。

2つのコレクションエディタで各要素のデザインを作成する
2つのコレクションエディタで各要素のデザインを作成する

GUIの作成

 では、さっそくアプリケーションを作成していきましょう。

 使用するコントロールはC1TileControlコントロールだけです。このコントロールに、1つのグループで5つのタイルを組み込み、タイル一つ一つにテキスト要素2つとイメージ要素1つを組み込みます。

 タイルはすべて同じデザインとし、背景色だけを変えます。

 作業は、C1TileControlコントロールの設定だけで、以下の手順で行います。

  1. テンプレートを作成し、テキスト要素とイメージ要素のデザインを設定する
  2. グループにタイルを追加し、各タイルのテキスト・イメージデータとテンプレートの設定を行う
  3. タイトルを設定する
フォームのレイアウト
フォームのレイアウト

 では、順番に設定していきましょう。

テンプレートの作成

 まずはじめにテンプレートを作成します。

 タイルのデザインとしては、デフォルトよりも縦長にして横並びにし、1つのタイルの中に上下にテキストを、真ん中にイメージを配置します。このデザインは5つのタイルすべて同じにしますので、テンプレートを1つ作成し各タイルに連結します。

 ① フォームにC1TileControlコントロールを配置し、Dockプロパティを「Fill」にします。

 ② C1TileControlコントロールのコンテキストメニューを表示し、「テンプレートの編集」をクリックします。

コンテキストメニューの「テンプレートの編集」をクリック
コンテキストメニューの「テンプレートの編集」をクリック

 ③ C1TileControl.Templatesコレクションエディタが表示されますので、「追加」ボタンをクリックします。

 次に、右のペインにあるプロパティリストの「Elements」の「...」ボタンをクリックします。Template.Elementsコレクションエディタが表示されます。このTemplate.Elementsコレクションエディタで、デザイン対象であるテキスト・イメージ要素のデザインを行います。

C1TileControl.TemplatesコレクションエディタとTemplate.Elementsコレクションエディタを表示させる
C1TileControl.TemplatesコレクションエディタとTemplate.Elementsコレクションエディタを表示させる

 ④ Template.Elementsコレクションエディタの「追加」ボタンの横の「▼」ボタンをクリックし、「TextElement」を2つと「ImageElement」を1つ追加します。

「追加」ボタンの横の「▼」ボタンをクリックし、「TextElement」を2つと「ImageElement」を1つ追加する
「追加」ボタンの横の「▼」ボタンをクリックし、「TextElement」を2つと「ImageElement」を1つ追加する

 ⑤ 最初の「TextElement」をクリックし、右ペインのプロパティリストで次のプロパティを設定します。「TextSelector」は、デザインを設定するタイルのテキスト要素です。ここでは、最初のテキスト「Text1」をデザイン設定の対象とします。

最初の「TextElement」のプロパティ設定
プロパティ 設定値
Font MS明朝,12pt
Alignment TopCenter
TextSelector Text1
最初の「TextElement」のプロパティを設定
最初の「TextElement」のプロパティを設定

 ⑥ 同様に、2番目の「TextElement」と「ImageElement」のプロパティを次のように設定します。

 「ImageElement」の「FixedHeight」「FixedWidth」は表示サイズを、「ImageLayout」はイメージの表示方法を設定します。ここでは、200x200のサイズに収まるように画像を縮小して表示するようにしました。

2番目の「TextElement」のプロパティ設定
プロパティ 設定値
Font MS明朝,12pt
Alignment BottomCenter
TextSelector Text2
「ImageElement」のプロパティ設定
プロパティ 設定値
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つ追加されます。

「追加」ボタンを2回クリックし、タイルを2つ追加する
「追加」ボタンを2回クリックし、タイルを2つ追加する

 ③ 最初のタイル「タイル1」をクリックし、次のプロパティを設定します。

 「Text1」「Text2」「Image1」がタイル内に実際に表示するデータです。「HorizontalSize」「VerticalSize」はタイルの縦横のサイズ、「BackColor」 はタイルの背景色、「Template」は適用するテンプレートの名前です。このプロパティによって、タイルとテンプレートが関連付けられます。

プロパティ 設定値
Text1 <文字列データ>
Text2 <文字列データ>
Image1 <画像データ>
HorizontalSize 3
VerticalSize 5
BackColor LightCoral
Template Template1
Text (なし)

 ④ 同様の方法で、残りのタイルのプロパティを設定します。「Template」プロパティはすべてのタイルで「Template1」を指定してください。これで、共通のデザインが適用されます。

2番目のタイルのプロパティ設定
プロパティ 設定値
Text1 <文字列データ>
Text2 <文字列データ>
Image1 <画像データ>
HorizontalSize 3
VerticalSize 5
BackColor Teal
Template Template1
Text (なし)
3番目のタイルのプロパティ設定
プロパティ 設定値
Text1 <文字列データ>
Text2 <文字列データ>
Image1 <画像データ>
HorizontalSize 3
VerticalSize 5
BackColor SteelBlue
Template Template1
Text (なし)
4番目のタイルのプロパティ設定
プロパティ 設定値
Text1 <文字列データ>
Text2 <文字列データ>
Image1 <画像データ>
HorizontalSize 3
VerticalSize 5
BackColor Olive
Template Template1
Text (なし)
5番目のタイルのプロパティ設定
プロパティ 設定値
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などに対応したアプリケーションを開発する際に、威力を発揮するコントロールといえるでしょう。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5