ComponentOne Basic Library for UWP
Basic Library Overview / DropDown for UWP / C1DropDown Quick Start / Step 2 of 3: Adding Content to the C1DropDown Control
In This Topic
    Step 2 of 3: Adding Content to the C1DropDown Control
    In This Topic

    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:
    Copy Code
    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:
    Copy Code
    <Xaml:C1TileListBox x:Name="colorListBox"
                                      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:
    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:
    Copy Code
    using C1.Xaml;
    1. Add the following code to handle the colorListBox_ItemTapped event:
    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