You can easily create a C1DropDown application that contains a C1TreeView control, giving you a hierarchical drop-down.

Follow these steps to create a hierarchical C1DropDown control:

1. Edit the markup for your C1DropDown control so that it resembles the following:

Markup	Copy Code
<Xaml:C1DropDownButton x:Name="soccerCountries" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="2" AutoClose="False" Width="150" DropDownWidth="200">

2. Add some C1DropDown.Header content to your control. This will add a TextBlock control to your C1DropDown header:

Markup	Copy Code
<Xaml:C1DropDownButton.Header> <TextBlock x:Name="selection" Text="« Pick one »" Padding="7 0 0 0" Foreground="Black" TextAlignment="left"/> </Xaml:C1DropDownButton.Header>

3. Place your cursor below the </Xaml:C1DropDownButton.Header> tag. Locate the C1TreeView control in your Visual Studio ToolBox and double-click to add it to your application. Edit the markup of the opening tag to reflect the following:

Markup	Copy Code
<Xaml:C1TreeView x:Name="treeSelection" Header="Soccer World Cups Winners" KeyDown="C1TreeView_KeyDown" ItemClick="C1TreeView_ItemClicked" AllowDragDrop="False" Padding="5" BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}" Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}">

           Note that in the markup above you've added two Events: KeyDown and ItemClick.

4. Next, we'll add some content to the C1TreeView control:

Markup

Copy Code

<Xaml:C1TreeViewItem Header="South America"> <Xaml:C1TreeViewItem Header="Argentina" /> <Xaml:C1TreeViewItem Header="Brasil" /> <Xaml:C1TreeViewItem Header="Uruguay" /> </Xaml:C1TreeViewItem> <Xaml:C1TreeViewItem Header="Europe"> <Xaml:C1TreeViewItem Header="England" /> <Xaml:C1TreeViewItem Header="France" /> <Xaml:C1TreeViewItem Header="Germany" /> <Xaml:C1TreeViewItem Header="Italy" /> <Xaml:C1TreeViewItem Header="Spain" /> </Xaml:C1TreeViewItem>

5. Now that you've finished creating the markup for your application, right-click the page and select View Code from the list. Your Code view will open.

6. Add the following import statement to the top of your page:

C#	Copy Code
using C1.Xaml;

7. Add the following KeyDown event after the closing bracket of the InitializeComponent method:

C#	Copy Code
private void C1TreeView_KeyDown(object sender, KeyRoutedEventArgs e) { if (e.Key == VirtualKey.Enter) { UpdateSelection(); e.Handled = true; } }

8. The UpdateSelection() method comes next:

C#	Copy Code
private void UpdateSelection() { if (treeSelection.SelectedItem != null) { selection.Text = treeSelection.SelectedItem.Header.ToString(); } else { selection.Text = "« Pick one »"; } soccerCountries.IsDropDownOpen = false; }

9. Next, create the C1TreeView_ItemClicked event:

C#	Copy Code
private void C1TreeView_ItemClicked(object sender, SourcedEventArgs e) { UpdateSelection(); }

10. Last, add the MouseLeftButtonDown event:

C#	Copy Code
private void ContentControl_MouseLeftButtonDown(object sender, EventArgs e) { soccerCountries.IsDropDownOpen = true; }

11. Press F5 or start debugging to run your application. When you click the drop-down button, your C1DropDown control should resemble the following. Note that you can select one of the continents to reveal the available countries:

 

 

 What You've Accomplished

In this topic, you created a hierarchical C1DropDown control using XAML markup and code.