ComponentOne Basic Library for UWP
Step 2 of 3: Adding Content to the C1DropDown Control
UWP Edition Basic Library > DropDown for UWP > C1DropDown Quick Start > Step 2 of 3: Adding Content to the C1DropDown Control

In this step, you'll add some content to the C1DropDown control you added in the preceding step.

  1. Add the following markup directly below the <Xaml:C1DropDownButton.Header>. This will allow you to add any content to your C1DropDown control:
Markup
Copy Code
<Xaml:C1DropDownButton.Content>
</Xaml:C1DropDownButton.Content>
  1. Place your cursor between the <Xaml:C1DropDownButton.Content> </Xaml:C1DropDown.Content> tags.
  1. Locate the C1TileListBox control in the Visual Studio ToolBox. Double-click the control to add it to the page.
  1. Edit the opening <Xaml:C1TileListBox> tag so that it resembles the following:
Markup
Copy Code
<Xaml:C1TileListBox x:Name="colorListBox"
                                  Height="180"
                                  Orientation="Horizontal"
                                  ItemTapped="colorListBox_ItemTapped"
                                  SelectionMode="None"
                                  BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}"
                                  BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}"
                                  Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}">
  1. Place your cursor between the <Xaml:C1TileListBox> </Xaml:C1TileListBox> tags and add the following markup. This will allow you to change the background color of the C1DropDownButton control at runtime:
   
Markup
Copy Code
<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" />
  1. Right-click your page and select View Code from the list. Add the following namespace at the top of the page:
C#
Copy Code
using C1.Xaml;
  1. Add the following code to handle the colorListBox_ItemTapped event:
C#
Copy Code
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;
        }

 What You've Accomplished

In this step, you added content to the C1DropDownButton control. In the next step, you'll run your application.

See Also