この手順では、前の手順で追加した C1DropDown コントロールにコンテンツを追加します。

1. <Xaml:C1DropDownButton.Header> のすぐ下に次のマークアップを追加します。これで、C1DropDown コントロールにコンテンツを追加できます。

   	コードのコピー
   <Xaml:C1DropDownButton.Content> </Xaml:C1DropDownButton.Content>

2. <Xaml:C1DropDownButton.Content> </Xaml:C1DropDown.Content> タグの間にカーソルを置きます。
3. Visual Studio ツールボックスで C1TileListBox コントロールを見つけます。このコントロールをダブルクリックしてページに追加します。
4. 次のように、開始タグ <Xaml:C1TileListBox> を編集します。

   コードのコピー

   <Xaml:C1TileListBox x:Name="colorListBox"                                   Height="180"                                   Orientation="Horizontal"                                   ItemTapped="colorListBox_ItemTapped"                                   SelectionMode="None"                                   BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}"                                   BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}"                                   Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}">

5. <Xaml:C1TileListBox> </Xaml:C1TileListBox> タグの間にカーソルを置き、次のマークアップを追加します。これで、実行時に C1DropDownButton コントロールの背景色を変更できます。

   コードのコピー

   <Border Background="Black" BorderBrush="White" BorderThickness="1"/>                     <Border Background="DarkGray"/>                     <Border Background="White" BorderBrush="Black" BorderThickness="1"/>                       <Border Background="DarkBlue" />                     <Border Background="Blue" />                     <Border Background="Cyan" />                       <Border Background="Teal" />                     <Border Background="Green" />                     <Border Background="Lime" />                       <Border Background="SaddleBrown"/>                     <Border Background="Orange" />                     <Border Background="Yellow" />                       <Border Background="Maroon" />                     <Border Background="Red" />                     <Border Background="Magenta" />

6. ページを右クリックし、リストから［コードの表示］を選択します。次の名前空間をページの先頭に追加します。

   C# コードの書き方

   C#	コードのコピー
   using C1.Xaml;

7. 次のコードを追加して、colorListBox_ItemTapped イベントを処理します。

   C# コードの書き方

   C#

   コードのコピー

   private void colorListBox_ItemTapped(object sender, C1TappedEventArgs e)         {             C1ListBoxItem item = sender as C1ListBoxItem;             if (item != null)             {                 Border b = item.Content as Border;                 if (b != null)                 {                     dropDownBorder.Background = b.Background;                 }             }             c1DropDown1.IsDropDownOpen = false;         }

ここまでの成果

この手順では、C1DropDownButton コントロールにコンテンツを追加しました。次の手順では、このアプリケーションを実行します。