テンプレートの作成
まずはじめにテンプレートを作成します。
タイルのデザインとしては、デフォルトよりも縦長にして横並びにし、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コレクションエディタを閉じます。
これで、テンプレートが出来上がりました。
