手順 2：コントロールへのコンテンツの追加

前の手順では、WPF/Silverlight アプリケーションを作成し、プロジェクトに C1DropDown コントロールを追加しました。この手順では、C1DropDown コントロールにコンテンツを追加します。プロジェクトをカスタマイズしてアプリケーションの C1DropDown コントロールにコンテンツを追加するには、次の手順に従います。

［XAML］ビューに切り替えます。次の手順では、XAML マークアップをアプリケーションに追加することにより、ドロップダウンボックスにコンテンツを追加します。

C1DropDown コントロールにマークアップを追加します。次のようになります。

XAML	コードのコピー
<c1:C1DropDown Name="C1DropDown1" Height="30" Width="100"> <c1:C1DropDown.Header> <ContentControl VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"> <TextBlock x:Name="selection" Text="≪ 選択肢 ≫" FontSize="12" Foreground="#FF3B76A2" TextAlignment="left" /> </ContentControl> </c1:C1DropDown.Header> </c1:C1DropDown>

XAML

コードのコピー

<c1:C1DropDown Name="C1DropDown1" Height="30" Width="100">
    <c1:C1DropDown.Header>
        <ContentControl VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0">
            <TextBlock x:Name="selection" Text="≪ 選択肢 ≫" FontSize="12" Foreground="#FF3B76A2" TextAlignment="left" />
        </ContentControl>
    </c1:C1DropDown.Header>
</c1:C1DropDown>

追加した XAML マークアップの</c1:C1DropDown.Header> タグの直後に、次のマークアップを追加します。

XAML	コードのコピー
<c1:C1DropDown.Content> <TreeView x:Name="treeSelection" Background="White"> <TreeViewItem Header="南アメリカ"> <TreeViewItem Header="ブラジル" /> <TreeViewItem Header="アルゼンチン" /> <TreeViewItem Header="ウルグアイ" /> </TreeViewItem> <TreeViewItem Header="ヨーロッパ"> <TreeViewItem Header="イタリア" /> <TreeViewItem Header="フランス" /> <TreeViewItem Header="イギリス" /> <TreeViewItem Header="ドイツ" /> </TreeViewItem> </TreeView> </c1:C1DropDown.Content>

XAML

コードのコピー

<c1:C1DropDown.Content>
    <TreeView x:Name="treeSelection" Background="White">
        <TreeViewItem Header="南アメリカ">
            <TreeViewItem Header="ブラジル" />
            <TreeViewItem Header="アルゼンチン" />
            <TreeViewItem Header="ウルグアイ" />
        </TreeViewItem>
        <TreeViewItem Header="ヨーロッパ">
            <TreeViewItem Header="イタリア" />
            <TreeViewItem Header="フランス" />
            <TreeViewItem Header="イギリス" />
            <TreeViewItem Header="ドイツ" />
        </TreeViewItem>
    </TreeView>
</c1:C1DropDown.Content>

これにより、標準の TreeView コントロールが C1DropDown コントロールのコンテンツ領域に追加されます。［デザイン］ビューに次の図のようなウィンドウが表示されます。

この手順では、C1DropDown コントロールにコンテンツを追加しました。次の手順では、コントロールをさらにカスタマイズしてからアプリケーションを実行して、実行時の操作を確認します。