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.
- 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>
|
- Place your cursor between the <Xaml:C1DropDownButton.Content> </Xaml:C1DropDown.Content> tags.
- Locate the C1TileListBox control in the Visual Studio ToolBox. Double-click the control to add it to the page.
- 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}">
|
- 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" />
|
- 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;
|
- 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
