前の手順では、WinForms アプリケーションを作成し、C1TileControl をプロジェクトに追加しました。
画像とテキスト要素を含むパネルをタイルに追加するには、以下の手順を実行します。
設計時に要素を含むテンプレートをタイルに追加するには
- デフォルトのタイル１を右クリックし、［テンプレートの編集］を選択します。 ［C1TileControl.Templates コレクションエディタ］が表示されます。
- 〈追加〉をクリックし、新しいテンプレートを Tile1 に追加します。
- Elements の横にある〈…〉ボタンをクリックし、［Template.Elements コレクションエディタ］を開きます。 ［追加］を選択し、そのドロップダウン矢印をクリックして、PanelElement、TextElement の順に選択します。 これにより、要素が TemplateCollectionに追加されます。
- ［メンバ］リストから PanelElement を選択し、ChildSpacing プロパティの横に９を入力します。
- Children の横にある〈…〉ボタンをクリックし、［PanelElement.Children コレクションエディタ］を表示します。 ［追加］を選択し、そのドロップダウン矢印をクリックして、ImageElement を選択します。 ４つの ImageElement と３つの TextElement を追加します。 これにより、要素が TemplateCollection に追加されます。
- ［メンバ］から、１番目の [0]ImageElementを選択し、各プロパティを次のように設定します。
- ImageSelector プロパティを UnboundSymbol に設定。 これにより、選択したシンボルが指定したタイルの画像になります。
- Symbol プロパティを LeftToRight に設定。 これにより、LeftToRight 画像が指定したタイルに表示されます。
- SymbolSize プロパティを Image64x64 に設定。 これにより、デフォルトのシンボルサイズが 32x32 から 64x64 に変更されます。
- FixedHeight を 70 に設定。 これにより、パネルのコンテンツの高さが 70 ピクセルに設定されます。
- ［メンバ］リストから、２番目の [1]ImageElement を選択し、各プロパティを次のように設定します。
- ForeColor プロパティを 255, 192, 255 に設定。
- ForeColorSelector プロパティを Unbound に設定。
- ImageSelector プロパティを UnboundSymbol に設定。
- Symbol プロパティを CircleWithPlus に設定。
- ［メンバ］リストから、３番目の [2]ImageElement を選択し、各プロパティを次のように設定します。
- ForeColor プロパティを 255, 192, 255 に設定。
- ForeColorSelector プロパティを Unbound に設定。
- ImageSelector プロパティを UnboundSymbol に設定。
- Symbol プロパティを CircleWithMinus に設定。
- Alignment プロパティを TopCenter に設定。 これにより、シンボルがパネルの TopCenter に揃えられます。
- ［メンバ］リストから、４番目の [3]TextElement を選択し、各プロパティを次のように設定します。
- ForeColor プロパティを 255, 224, 192 に設定。
- ForeColorSelector プロパティを Unbound に設定。
- ImageSelector プロパティを UnboundSymbol に設定。
- Symbol プロパティを CircleWithMultiply に設定。
- Alignment プロパティを BottomCenter に設定。
- ［メンバ］リストから、５番目の [4]TextElement を選択し、各プロパティを次のように設定します。
- ForeColor プロパティを 192, 192, 255 に設定。
- ForeColorSelector プロパティを Unbound に設定。
- Text プロパティを Top に設定。
- TextSelector を Unbound に設定。
- Alignment を TopCenter に設定。
- ［メンバ］リストから、６番目の [5]TextElement を選択し、各プロパティを次のように設定します。
- BackColorSelector プロパティを Unbound に設定。
- ForeColor プロパティを 255, 224, 192 に設定。
- ForeColorSelector プロパティを Unbound に設定。
- Text プロパティを Bottom に設定。
- TextSelector プロパティを Unbound に設定。 これにより、デフォルトのテキストではなく、新しいテキスト「Bottom」が表示されます。
- Alignment プロパティを BottomCenter に設定。
- DirectionVertical プロパティを True に設定。
- ［メンバ］リストから、７番目の [6]TextElement を選択し、各プロパティを次のように設定します。
- BackColorSelector プロパティを Unbound に設定。
- ForeColor プロパティを 255, 192, 255 に設定。
- ForeColorSelector プロパティを Unbound に設定。
- Text プロパティを Middle に設定。
- TextSelector プロパティを Unbound に設定。
- 〈OK〉をクリックし、［PanelElement.Children コレクションエディタ］を保存して閉じます。
- ［Template.Elements コレクションエディタ］で、［メンバ］リストから [1] TextElement を選択します。
- ［メンバ］リストから、２番目の [1]TextElement を選択し、各プロパティを次のように設定します。
- Alignment プロパティを BottomCenter に設定。
- Margin プロパティを 0, 0, 0, 5 に設定。
- 〈OK〉をクリックし、［Template.Elements コレクションエディタ］を保存して閉じます。
- 〈OK〉をクリックし、［C1TileControl.Templates コレクションエディタ］を保存して閉じます。
このトピックの作業結果
作成したテンプレート Template1 がタイルの Template プロパティに適用されていないため、Tile1 は変わらないまま表示されます。
次の手順では、［C1TileControl タスク］メニューを使用し、新しいテンプレートを指定したタイルに割り当てて、タイルのいくつかのプロパティを変更する方法を学びます。