DropDown for WPF/Silverlight では、セットアップが簡単で、使用する際は強力な単一の項目を選択する機能を実装でき ます。DropDown for WPF/Silverlight は、ComboBox、DateTimePicker などのシンプルなドロップダウンボックスコント ロールを提供します。C1DropDown は、従来のドロップダウンボックスよりも柔軟で、コントロールを追加でき、検索ボックス を作成することもできます。
以下の主要な機能をうまく利用して、DropDown for WPF/Sliverlight を最大限に活用してください。
３つのドロップダウンコントロール３つのドロップダウンコントロール
DropDown for WPF/Silverlight には、アプリケーションの柔軟性を高める３つのドロップダウンコントロールが含ま れます。C1DropDown は、従来のドロップダウンコントロールと同様に、一連の項目から選択を行うことができま す。C1DropDownButton の機能はドロップダウンコントロールと同じですが、外観はボタンです。C1SplitButton に は、カスタマイズ可能なヘッダーと矢印の２つの部分があります。この矢印をクリックするとドロップダウンリストが開き、
ヘッダーボタンを押すと、通常は現在の選択が適用されます。
専用のドロップダウンエディタの作成専用のドロップダウンエディタの作成
C1DropDownコントロールを使用すると、専用のドロップダウンエディタの作成を全面的に制御できます。スピンボタン に独自のロジックをアタッチしたり、ドロップダウンボタンに独自のドロップダウンフォーム/エディタをアタッチすることが できます。たとえば、ドロップダウン部分に DataGrid を配置し、それに対する行選択イベントのコードを記述することに より、その行からの値を C1DropDown のヘッダー部分に表示することもできます。
ヘッダーの上または下への展開ヘッダーの上または下への展開
DropDownDirection プロパティを使用して、ヘッダー部分の上または下に表示するようにドロップダウンを設定しま
す。フォーム上にスペースがある場合に、コントロールが使用する方向の優先順位を設定します。
AutoClose
AutoClose プロパティを使用して、ドロップダウンを閉じるかどうか、およびいつ閉じるかをすべて制御します。
サイズ変更可能ドロップダウンリストサイズ変更可能ドロップダウンリスト
ドロップダウンボックスの幅と高さは、明示的に設定するか、またはコンテンツに合わせて自動的にサイズ変更できま す。
メモ：メモ：説明内に含まれるクラスおよびメンバーに対するリファレンスへのリンクは、原則としてWPF版のリファレンスペー ジを参照します。Silverlight版については、目次から同名のメンバーを参照してください。
クイックスタート
手順 手順 1 ：アプリケーションの作成 ：アプリケーションの作成
この手順では、DropDown for WPF/Silverlight を使って WPF/Silverlight アプリケーションを作成します。C1DropDown コントロールをアプリケーションに追加すると、完全に機能するドロップダウンボックスのようなインターフェイスになり、そこに画 像、コントロールなどの要素を追加することができます。プロジェクトをセットアップし、C1DropDown コントロールをアプリケー ションに追加するには、次の手順に従います。
1. Visual Studio で新しい WPF/Silverlight プロジェクトを作成します。
2. 2.ソリューションエクスプローラで、［参照］項目を右クリックし以下のアセンブリを選択して［OK］をクリックし、参照をプロ ジェクトに追加します。
WPF: C1.WPF.4.dll
Silverlight: C1.Silverlight.5.dll
3. Visual Studio のツールボックスに移動し、［C1DropDown］アイコンをダブルクリックして、ウィンドウにコントロールを 追加します
4. ウィンドウのサイズを変更し、ウィンドウに C1DropDown コントロールを再配置します。
5. ［プロパティプロパティ］ウィンドウに移動し、C1DropDown コントロールの Height を 30 に、Width を 100 に設定します。
XAML は次のようになります。
XAML
<c1:C1DropDown Name="C1DropDown1" Height="30" Width="100" />
ページのデザインビューは次の図のようになります（フォームで C1DropDown コントロールを選択している場合）。
これで、アプリケーションのユーザーインターフェイスが正しくセットアップされましたが、このアプリケーションを実行する と、C1DropDown コントロールにコンテンツがないことがわかります。次の手順では、C1DropDown コントロールにコンテン ツを追加し、コントロールに対して実行可能ないくつかの操作を確認してみます。
手順 手順 2 ：コントロールへのコンテンツの追加 ：コントロールへのコンテンツの追加
前の手順では、WPF/Silverlight アプリケーションを作成し、プロジェクトに C1DropDown コントロールを追加しました。この手 順では、C1DropDown コントロールにコンテンツを追加します。プロジェクトをカスタマイズしてアプリケーションの
C1DropDown コントロールにコンテンツを追加するには、次の手順に従います。
1. ［XAML］ビューに切り替えます。次の手順では、XAML マークアップをアプリケーションに追加することにより、ドロップ ダウンボックスにコンテンツを追加します。
2. 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>
3. 追加した 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>
これにより、標準の TreeView コントロールが C1DropDown コントロールのコンテンツ領域に追加されます。［デザイ ン］ビューに次の図のようなウィンドウが表示されます。
この手順では、C1DropDown コントロールにコンテンツを追加しました。次の手順では、コントロールをさらにカスタマイズして からアプリケーションを実行して、実行時の操作を確認します。
手順 手順 3 ：アプリケーションの実行 ：アプリケーションの実行
WPF/Silverlight アプリケーションを作成して、アプリケーションの外観をカスタマイズしました。次に、アプリケーションを実行し ます。アプリケーションを実行し、DropDown for WPF/Silverlight の実行時の動作を確認し、さらにコントロールをカスタマ イズするには、次の手順に従います。
1. ［デバッグデバッグ］メニューから［デバッグ開始デバッグ開始］を選択し、実行時にアプリケーションがどのように表示されるかを確認します。
アプリケーションは次の図のように表示されます。
C1DropDown コントロールは、シンプルなドロップダウンボックスとして表示されます。指定したテキストがコントロー ルのヘッダーに表示されていることを確認します。
2. C1DropDown コントロールのドロップダウン矢印をクリックします。TreeView コントロールが表示されることを確認しま す。
3. ドロップダウンボックスの項目を展開する – TreeView コントロールを通常どおりに操作できることを確認します。
4. もう一度 C1DropDownのドロップダウン矢印をクリックします。
ドロップダウンボックスが閉じることを確認します。
おめでとうございます!
これで DropDown for WPF/Silverlight クイックスタートは完了です。簡単な WPF/Silverlight アプリケーションを作成 し、DropDown for WPF/Silverlight コントロールを１つ追加してカスタマイズしました。その後、コントロールの実行時機能 をいくつか確認しました。
DropDown の要素 の要素
C1DropDown の要素 の要素
C1DropDown コントロールは、ヘッダー領域とコンテンツ領域の２つのパーツで構成されます。ヘッダーはドロップダウンボッ クスが開いていないときに表示され、コンテンツはドロップダウン領域をクリックすると表示されます。次の図に、ヘッダーとコン テンツ領域を示します。
コンテンツは、まったく追加しないこともできますが、ヘッダー領域とコンテンツ領域の一方に追加することも両方に追加するこ ともできます。XAML でコンテンツをヘッダー領域とコンテンツ領域に追加して、C1DropDown コントロールをカスタマイズでき ます。たとえば、次のマークアップでは、上の図のようなドロップダウンコントロールが作成されます。
XAML
<c1:C1DropDown Height="36" HorizontalAlignment="Left" Margin="10,12,0,0"
Name="C1DropDown1" VerticalAlignment="Top" Width="101">
<c1:C1DropDown.Header>
<TextBlock Height="21" Name="TextBlock1" Text="« 選択肢 »" Width="120" />
</c1:C1DropDown.Header>
<c1:C1DropDown.Content>
<TreeView HorizontalAlignment="Left" Name="TreeView1" Width="120">
<TreeViewItem Header="南アメリカ">
<TreeViewItem Header="ブラジル" />
<TreeViewItem Header="アルゼンチン" />
<TreeViewItem Header="ウルグアイ" />
</TreeViewItem>
<TreeViewItem Header="ヨーロッパ">
<TreeViewItem Header="イタリア" />
<TreeViewItem Header="フランス" />
<TreeViewItem Header="イギリス" />
<TreeViewItem Header="ドイツ" />
</TreeViewItem>
</TreeView>
</c1:C1DropDown.Content>
</c1:C1DropDown>
ヘッダーとコンテンツを定義するために <c1:C1DropDown.Header><c1:C1DropDown.Header> タグと <c1:C1DropDown.Content><c1:C1DropDown.Content> タグが使用されている ことに注意してください。これらのタグの内側にコントロールとコンテンツを追加できます。
C1DropDownButton の要素 の要素
C1DropDownButton コントロールは C1DropDown コントロールに似ており、ヘッダー領域とコンテンツ領域の２つの部分で 構成されます。ヘッダーはドロップダウンボックスが開いていないときに表示され、コンテンツはドロップダウン領域をクリックす ると表示されます。たとえば、下の図のコンテンツ領域には、構造化メニューが含まれます。
コンテンツは、まったく追加しないこともできますが、ヘッダー領域とコンテンツ領域の一方に追加することも両方に追加するこ ともできます。XAML でコンテンツをヘッダー領域とコンテンツ領域に追加して、C1DropDown コントロールをカスタマイズでき ます。たとえば、次のマークアップでは、上の図のようなドロップダウンコントロールが作成されます。
XAML
<c1:C1DropDownButton x:Name="ddl" Header="クリックしてメニューを開く"
HorizontalAlignment="Left">
<c1:C1MenuList>
<c1:C1MenuItem Header="メニュー 1">
<c1:C1MenuItem Header="メニュー 1.1" />
</c1:C1MenuItem>
<c1:C1MenuItem Header="メニュー 2" />
<c1:C1MenuItem Header="メニュー 3" />
<c1:C1MenuItem Header="メニュー 4" />
</c1:C1MenuList>
</c1:C1DropDownButton>
ヘッダーテキストは <c1:C1DropDownButton><c1:C1DropDownButton> タグで定義され,コンテンツは <c1:C1DropDownButton></c1:C1DropDownButton><c1:C1DropDownButton></c1:C1DropDownButton> タ グ内に置かれます。
C1SplitButton の要素 の要素
ボタンとドロップダウンコンテンツ領域を結合した C1SplitButton コントロールは、標準の SplitButton に似ていま
す。C1SplitButton は、配置できるコンテンツのタイプがより動的です。下の図で、C1SplitButton のヘッダーにはカラーピッカー アイコンがあり、色が選択されるとこれが変化します。また、C1SplitButton のコンテンツ領域にはカラーピッカーが配置されて