C1TreeView コントロールを格納した C1DropDown アプリケーションを作成して、簡単に階層型ドロップダウンを使用することができます。

階層型 C1DropDown コントロールを作成するには、次の手順に従います。

1. C1DropDown コントロールのマークアップを次のように編集します。

   マークアップ	コードのコピー
   <Xaml:C1DropDownButton x:Name="soccerCountries" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="2" AutoClose="False" Width="150" DropDownWidth="200">

2. コントロールに C1DropDown.Header のコンテンツを追加します。ここでは、C1DropDown ヘッダーに TextBlock コントロールを追加します。

   マークアップ	コードのコピー
   <Xaml:C1DropDownButton.Header>                 <TextBlock x:Name="selection" Text="≪ Pick one ≫" Padding="7 0 0 0" Foreground="Black" TextAlignment="left"/>             </Xaml:C1DropDownButton.Header>

3. </Xaml:C1DropDownButton.Header> タグの下にカーソルを置きます。Visual Studio ツールボックスの C1TreeView コントロールを見つけてダブルクリックし、このコントロールをアプリケーションに追加します。開始タグのマークアップを次のように編集します。

   マークアップ

   コードのコピー

   <Xaml:C1TreeView x:Name="treeSelection" Header="ワールドカップ優勝国" KeyDown="C1TreeView_KeyDown" ItemClick="C1TreeView_ItemClicked" AllowDragDrop="False" Padding="5"                            BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}"                            BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}"                            Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}">

   このマークアップで、２つのイベント KeyDown と ItemClick を追加しました。
4. 次に、C1TreeView コントロールにコンテンツを追加します。

   マークアップ

   コードのコピー

   <Xaml:C1TreeViewItem Header="南アメリカ">    <Xaml:C1TreeViewItem Header="アルゼンチン" />    <Xaml:C1TreeViewItem Header="ブラジル" />    <Xaml:C1TreeViewItem Header="ウルグアイ" /> </Xaml:C1TreeViewItem> <Xaml:C1TreeViewItem Header="ヨーロッパ">    <Xaml:C1TreeViewItem Header="イングランド" />    <Xaml:C1TreeViewItem Header="フランス" />    <Xaml:C1TreeViewItem Header="ドイツ" />    <Xaml:C1TreeViewItem Header="イタリア" />    <Xaml:C1TreeViewItem Header="スペイン" /> </Xaml:C1TreeViewItem>

5. アプリケーションのマークアップを作成できたので、ページを右クリックし、リストから［コードの表示］を選択します。コードビューが開きます。
6. 次の import 文をページの先頭に追加します。

   C# コードの書き方

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

7. InitializeComponent メソッドの閉じかっこの後に次の KeyDown イベントを追加します。

   C# コードの書き方

   C#	コードのコピー
   private void C1TreeView_KeyDown(object sender, KeyRoutedEventArgs e)         {             if (e.Key == VirtualKey.Enter)             {                 UpdateSelection();                 e.Handled = true;             }         }

8. 次に、UpdateSelection() メソッドを追加します。

   C# コードの書き方

   C#	コードのコピー
   private void UpdateSelection()         {             if (treeSelection.SelectedItem != null)             {                 selection.Text = treeSelection.SelectedItem.Header.ToString();             }             else             {                 selection.Text = "≪ 国を選択 ≫";             }             soccerCountries.IsDropDownOpen = false;         }

9. 次に、C1TreeView_ItemClicked イベントを作成します。

   C# コードの書き方

   C#	コードのコピー
   private void C1TreeView_ItemClicked(object sender, SourcedEventArgs e)         {             UpdateSelection();         }

10. 最後に、MouseLeftButtonDown イベントを追加します。

    C# コードの書き方

    C#	コードのコピー
    private void ContentControl_MouseLeftButtonDown(object sender, EventArgs e)         {             soccerCountries.IsDropDownOpen = true;         }

11. ［F5］キーを押すか、デバッグを開始して、アプリケーションを実行します。ドロップダウンボタンをクリックすると、C1DropDown コントロールは次のように表示されます。大陸を選択すると、その大陸にある国が表示されます。
    

ここまでの成果

このトピックでは、XAML マークアップとコードを使用して階層型 C1DropDown コントロールを作成しました。