この手順では、さまざまなタイプのC1ListViewItem を既存の C1ListView コントロールに追加します。

1. <cc1:C1ListView>開始タグをクリックして、コントロールのスマートタグ を表示します。
2. スマートタグをクリックして［C1ListView のタスク］メニューを開き、［モバイルモード］チェックボックスをオンにします。
3. カーソルを <cc1:C1ListView> </cc1:C1ListView> タグの間に挿入します。
4. このタグの間に次のマークアップを追加します。

   スマートタグ	コードのコピー
   <Items> </Items>

5. <Items> タグの間に、次のマークアップを追加します。

   スマートタグ	コードのコピー
   <cc1:C1ListViewItem Text="項目 1" DataIcon="alert"></cc1:C1ListViewItem>

   これで、汎用の C1ListViewItem がアプリケーションに追加されます。

6. 次に、C1ListViewNestedItem をアプリケーションに追加します。 これで、アプリケーションにサブメニューが作成されます。

   スマートタグ	コードのコピー
   <cc1:C1ListViewNestedItem Text="他のオプション" DataIcon="arrow-l"> <Items> <cc1:C1ListViewButtonItem Text="ここ！"></cc1:C1ListViewButtonItem> <cc1:C1ListViewDividerItem></cc1:C1ListViewDividerItem> <cc1:C1ListViewItem Text="これは別の項目です"></cc1:C1ListViewItem> <Items> </cc1:C1ListViewNestedItem>

7. C1ListViewButtonItem をアプリケーションに追加するために、次のマークアップを追加します。

   スマートタグ	コードのコピー
   <cc1:C1ListViewButtonItem Text="クリック！"></cc1:C1ListViewButtonItem>

8. C1ListViewDividerItem は、リストに分割線を追加します。次のマークアップでは、C1ListView コントロール内で簡単に識別できるように、Text プロパティを Divider に設定しています。

   スマートタグ	コードのコピー
   <cc1:C1ListViewDividerItem Text="仕切り"></cc1:C1ListViewDividerItem>

9. 最後に、C1ListViewLinkItem と C1ListViewInputItem の２つの C1ListViewItem を追加します。C1ListViewLinkItem を使用して、外部 Web サイトへのリンクを C1ListView コントロールに埋め込むことができます。C1ListViewInputItem は “textarea” に設定します。これで、データに合わせてサイズが自動的に変更される編集可能なテキストボックスになります。

   スマートタグ	コードのコピー
   <cc1:C1ListViewLinkItem Text="リンクへ移動" NavigateUrl="http://www.componentone.com/"></cc1:C1ListViewLinkItem> <cc1:C1ListViewInputItem Type="textarea" LabelText="ここでテキストを入力してください:"></cc1:C1ListViewInputItem>

10. この手順では、さまざまなタイプのC1ListViewItem を C1ListView コントロールに追加しました。次の手順では、アプリケーションを実行して、C1ListView コントロールの実行時の動作を確認します。