このチュートリアルでは、C1Menu コントロールの ItemsTemplate テンプレートの作成方法を学びます。このテンプレートは、C1Menu コントロールのすべての項目のプロトタイプとなり、Div 要素、入力(チェックボックス)コントロール、ラベルコントロールで構成されます。ラベルコントロールの Text プロパティは、個別メニュー項目の Text プロパティに連結されます。
以下の手順を実行します。
- A と B という名前の2つの最上位メニュー項目を含む C1Menu コントロールを作成します。項目 A に3つの子項目を追加して、それらに One、Two、および Three という名前を付けます。
- C1Menu コントロールのスマートタグ()をクリックして、[C1Menu タスク]メニューから[テンプレートの編集]を選択します。[C1Menu タスク]メニューがテンプレート編集モードに切り替わります。[説明]のドロップダウンリストに示されたデフォルトモードは、ItemsTemplate であるため、それを変更する必要はありません。
- ツールボックスに移動し、ドラッグ&ドロップ操作で、Div 要素を ChildItems テンプレートに追加します。
- ツールボックスに移動し、ドラッグ&ドロップ操作で、入力(チェックボックス)コントロールとLabelコントロールを Div 要素に追加します。テンプレートは次のようになります。
- ラベル要素を選択し、プロパティ ウィンドウに移動して、Text プロパティを「<% #DataBinder.Eval(Container.DataItem,"Text") %>」に設定します。これによって、ラベルの Text プロパティがデータ連結(後述の手順で指定)に連結されます。
- [テンプレート編集の終了]をクリックして、テンプレートを閉じます。
- 次の手順を実行して、データ連結を作成します。
- C1Menu コントロールのスマートタグ()をクリックして、[C1Menu タスク]メニューから[メニューのデータバインディングの編集…]を選択します。[バインディングコレクションエディタ]ダイアログボックスで、次の手順を実行します。
- 〈追加〉をクリックして、<Empty> データ連結をプロジェクトに追加します。
- <Empty> データ連結の TextField プロパティを Text に設定します。
- 〈OK〉をクリックして、[バインディングコレクションエディタ]を閉じます。
- プロジェクトを実行して、A を選択します。C1Menuコントロールの各メニュー項目(最上位と子項目)が1つのチェックボックスと1つのラベルが含むことを確認します。また、ラベルテキストがこのチュートリアルの手順1で指定したテキストと同じであること(このチュートリアルで指定したデータ連結であるため)を確認します。