TileControl for WinForms
手順 2:要素を含むテンプレートの作成
クイックスタート > 手順 2:要素を含むテンプレートの作成

前の手順では、WinForms アプリケーションを作成し、C1TileControl をプロジェクトに追加しました。

画像とテキスト要素を含むパネルをタイルに追加するには、以下の手順を実行します。

設計時に要素を含むテンプレートをタイルに追加するには

  1. デフォルトのタイル1を右クリックし、[テンプレートの編集]を選択します。 [C1TileControl.Templates コレクションエディタ]が表示されます。
  2. 追加〉をクリックし、新しいテンプレートを Tile1 に追加します。
  3. Elements の横にある〈…〉ボタンをクリックし、[Template.Elements コレクションエディタ]を開きます。 [追加]を選択し、そのドロップダウン矢印をクリックして、PanelElement、TextElement の順に選択します。 これにより、要素が TemplateCollectionに追加されます。
  4. [メンバ]リストから PanelElement を選択し、ChildSpacing プロパティの横にを入力します。
  5. Children の横にある〈…〉ボタンをクリックし、[PanelElement.Children コレクションエディタ]を表示します。 [追加]を選択し、そのドロップダウン矢印をクリックして、ImageElement を選択します。 4つの ImageElement と3つの TextElement を追加します。 これにより、要素が TemplateCollection に追加されます。

  6. メンバ]から、1番目の [0]ImageElementを選択し、各プロパティを次のように設定します。
    • ImageSelector プロパティを UnboundSymbol に設定。 これにより、選択したシンボルが指定したタイルの画像になります。
    • Symbol プロパティを LeftToRight に設定。 これにより、LeftToRight 画像が指定したタイルに表示されます。
    • SymbolSize プロパティを Image64x64 に設定。 これにより、デフォルトのシンボルサイズが 32x32 から 64x64 に変更されます。
    • FixedHeight70 に設定。 これにより、パネルのコンテンツの高さが 70 ピクセルに設定されます。
  7. メンバ]リストから、2番目の [1]ImageElement を選択し、各プロパティを次のように設定します。
    • ForeColor プロパティを 255, 192, 255 に設定。
    • ForeColorSelector プロパティを Unbound に設定。
    • ImageSelector プロパティを UnboundSymbol に設定。
    • Symbol プロパティを CircleWithPlus に設定。
  8. メンバ]リストから、3番目の [2]ImageElement を選択し、各プロパティを次のように設定します。
    • ForeColor プロパティを 255, 192, 255 に設定。
    • ForeColorSelector プロパティを Unbound に設定。
    • ImageSelector プロパティを UnboundSymbol に設定。
    • Symbol プロパティを CircleWithMinus に設定。
    • Alignment プロパティを TopCenter に設定。 これにより、シンボルがパネルの TopCenter に揃えられます。
  9. メンバ]リストから、4番目の [3]TextElement を選択し、各プロパティを次のように設定します。
    • ForeColor プロパティを 255, 224, 192 に設定。
    • ForeColorSelector プロパティを Unbound に設定。
    • ImageSelector プロパティを UnboundSymbol に設定。
    • Symbol プロパティを CircleWithMultiply に設定。
    • Alignment プロパティを BottomCenter に設定。
  10. メンバ]リストから、5番目の [4]TextElement を選択し、各プロパティを次のように設定します。
    • ForeColor プロパティを 192, 192, 255 に設定。
    • ForeColorSelector プロパティを Unbound に設定。
    • Text プロパティを Top に設定。
    • TextSelectorUnbound に設定。
    • AlignmentTopCenter に設定。
  11. メンバ]リストから、6番目の [5]TextElement を選択し、各プロパティを次のように設定します。
    • BackColorSelector プロパティを Unbound に設定。
    • ForeColor プロパティを 255, 224, 192 に設定。
    • ForeColorSelector プロパティを Unbound に設定。
    • Text プロパティを Bottom に設定。
    • TextSelector プロパティを Unbound に設定。 これにより、デフォルトのテキストではなく、新しいテキスト「Bottom」が表示されます。
    • Alignment プロパティを BottomCenter に設定。
    • DirectionVertical プロパティを True に設定。
  12. メンバ]リストから、7番目の [6]TextElement を選択し、各プロパティを次のように設定します。
    • BackColorSelector プロパティを Unbound に設定。
    • ForeColor プロパティを 255, 192, 255 に設定。
    • ForeColorSelector プロパティを Unbound に設定。
    • Text プロパティを Middle に設定。
    • TextSelector プロパティを Unbound に設定。
  13. OK〉をクリックし、[PanelElement.Children コレクションエディタ]を保存して閉じます。
  14. Template.Elements コレクションエディタ]で、[メンバ]リストから [1] TextElement を選択します。
  15. メンバ]リストから、2番目の [1]TextElement を選択し、各プロパティを次のように設定します。
    • Alignment プロパティを BottomCenter に設定。
    • Margin プロパティを 0, 0, 0, 5 に設定。
  16. OK〉をクリックし、[Template.Elements コレクションエディタ]を保存して閉じます。
  17. OK〉をクリックし、[C1TileControl.Templates コレクションエディタ]を保存して閉じます。

このトピックの作業結果

作成したテンプレート Template1 がタイルの Template プロパティに適用されていないため、Tile1 は変わらないまま表示されます。

次の手順では、[C1TileControl タスク]メニューを使用し、新しいテンプレートを指定したタイルに割り当てて、タイルのいくつかのプロパティを変更する方法を学びます。