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