はじめに
GUIアプリケーションではすっかりおなじみになったツールバーですが、ウィンドウ上部に固定されているものがほとんどです。しかし、中にはツールバーや小さなウィンドウをアプリケーションから取り外し、デスクトップの好きな位置において使用できるようなアプリケーションもあります。
DockControl for WPFのC1DockControlコントロールは、このようなドッキング可能なフローティングウィンドウを利用できるようにしたコントロールです。
そこで今回は、リッチテキストボックスコントロールと組み合わせて、フローティング・ドッキング可能なツールバーを持ったアプリケーションを作成してみました。
対象読者
Visual Basic 2010／2012／2013、またはVisual C# 2010／2012／2013を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010／2012／2013、Visual C# 2010／2012／2013、Visual Studio 2010／2012／2013、SQL Server Expressでプログラムが作れる環境。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4
プログラム実行時の注意事項
本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4でのみご使用いただけます）。
| ファイル名 | 説明 |
|---|---|
| C1.WPF.4.dll | 本体アセンブリ |
| C1.WPF.Docking.4.dll | 本体アセンブリ |
| C1.WPF.RichTextBox.4.dll | 本体アセンブリ |
| C1.WPF.RichTextBox.Toolbar.4.dll | 本体アセンブリ |
| C1.WPF.SpellChecker.4.dll | 本体アセンブリ |
このファイルを、実行プログラムと同じフォルダに格納します。
コンポーネントのインストール
トライアル版は、グレープシティのWebページから申し込みできます。
トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
ComponentOne Studio 2013Jをインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.WPF.Docking.4」の「C1DockControl」「C1DockTabControl」コントロールです。
また、アセンブリ名が「C1.WPF.RichTextBox.4」の「RichTextBox」と、「C1.WPF.RichTextBox.Toolbar.4」の「RichTextBoxToolbar」コントロールも追加します。
「C1.WPF.RichTextBox.Toolbar.4」の「RichTextBoxToolbar」コントロールを選択する
このコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。なお、.NET Framework 4が必要です。また、今回はスペルチェック機能は使用しません。
| ファイル | 内容 |
|---|---|
| C1.WPF.4 | 本体アセンブリ |
| C1.WPF.Docking.4 | 本体アセンブリ |
| C1.WPF.RichTextBox.4 | 本体アセンブリ |
| C1.WPF.RichTextBox.Toolbar.4 | 本体アセンブリ |
| C1.WPF.SpellChecker.4 | 本体アセンブリ |
C1DockControlコントロールの概要
C1DockControlコントロールは、WPFアプリケーションでドッキング可能なウィンドウ、フローティングウィンドウ、およびタブ付きウィンドウを利用できるようにするコントロールです。
コンテナコントロールになっているので、C1DockTabControlコントロールを使用することで、タブページを持ったドッキングパネルになり、少ないスペースでより多くのコントロールを整理して配置できます。
このC1DockControlコントロールは、以下のような特徴を持っています。
ひし形のドッキングガイド
デフォルトでは、DockControlはMicrosoftのVisual Studioと同様のひし形のドッキングガイドを使用します。
分かりやすいドッキング機能
DockControlをカスタマイズすることで、アプリケーション内で複数のウィンドウをドッキングしたり浮動化ができる、分かりやすいドッキング機能の提供が可能です。ドッキングゾーン上でウィンドウをドラッグすると、ドッキングインジケータが表示され、ドッキング先を示します。
フローティングウィンドウ
アプリケーション内で、ウィンドウを独立したウィンドウとして浮動化できます。
タブ付きウィンドウ
エディタのインスタンス内で開かれるドキュメントは、自動的にタブ付きペインに配置されます。
自動非表示
押しピンによる自動非表示機能を使用すると、より多くのコードを一度に表示できます。この機能により、使用していないツールウィンドウをIDEの端に最小化できます。
豊富な機能を持つプログラムAPI
高い柔軟性を保ちつつ動作を制限するために、ドッキングウィンドウのドッキング状態は、豊富な機能を持つプログラムAPIを使用してプログラムから制御できます。
2つのモニタのサポート
1つのモニタから別のモニタにウィンドウをドラッグするだけで、ウィンドウを表示するモニタを選択できます。このオプションは、WPFプラットフォームでのみ使用が可能です。
ClearStyle技術のサポート
DockControl for WPFは、コントロールのテンプレートを変更することなくコントロールの色を簡単に変更できるComponentOneの新しいClearStyle技術をサポートします。色のプロパティをいくつか設定するだけで、C1DockControl要素のスタイルを簡単に設定できます。ComponentOne ClearStyle技術の詳細については、「DockControlのClearStyleプロパティ」を参照してください。
ドッキングコントロールの要素
C1DockControlコントロールはコンテナとして機能し、ここにウィンドウの整理に役立つC1DockTabControlコントロールを追加が可能です。
各コントロールは、直接C1DockControlコントロールに配置するのではなく、C1DockTabControlコントロールを配置しその中に各コントロールを配置します。
C1DockTabControlコントロールには、次の3つのボタンがあります。
ドロップダウンリスト
DockModeオプション。Floating、Docked、Sliding、Hiddenのオプションがあります。
押しピン
自動非表示機能を有効にします。C1DockTabItemsはIDEの端に最小化されます。
非表示
C1DockTabControlを非表示にします。
また、C1DockTabControlコントロールには4つの表示モードがあります。これらは、C1DockTabControlコントロールのDockModeプロパティで設定します。
| メンバ名 | 説明 |
|---|---|
| Docked | ドッキングされている他のC1DockTabControlコントロールと重ならずに並んで固定されます。 |
| Sliding | C1DockControlコントロールの境界で自動的に非表示になります。 |
| Floating | ウィンドウ内で、ドッキングされているC1DockTabControlコントロールの前面に置かれます。 |
| Hidden | C1DockTabControlコントロールは表示されません。 |
ドッキングガイドとゾーン
ドッキングガイドは四角形のインジケータで、C1DockControl要素をドッキングできる場所を示すために使用されます。
C1DockControlコントロールでは4つのドッキングインジケータが提供されており、コントロールの上下左右の4辺のいずれかでドッキングできます。
C1DockTabControlコントロールのヘッダーをドラッグすると、青いドッキングゾーンが表示されて、ウィンドウをどこにドッキングできるのかが分かるようになっています。
C1DockTabControlコントロールが複数ある場合は、いずれかのC1DockTabControlコントロールのヘッダーを他のC1DockTabControlコントロールのヘッダー上にドラッグすると、ドッキングガイドに上下左右および中央の合計5つのドッキングインジケータが表示されます。中央のドッキングインジケータを使用すると、C1DockTabItemsオブジェクトをC1DockTabControlコントロールにマージできます。
C1RichTextBox・C1RichTextBoxToolbarコントロールの概要については、記事『スペルチェック機能を持ったワープロ風WPFアプリケーションの作成』を参照してください。
GUIの作成 1
では、さっそくアプリケーションを作成していきます。作成するアプリケーションは、リッチテキストボックスコントロールを使ったアプリケーションで、C1DockControlコントロールにC1RichTextBoxToolbarコントロールを組み込み、ツールバーをフローティング／ドッキング状態で使用できるようにします。
また、C1RichTextBoxコントロールにコンテキストメニューを設定し、サイズ調節ができるようにします。
ウィンドウの作成
まずは、各コントロールを配置していきます。
① 最初にC1DockControlコントロールを配置します。次に、その中にC1DockTabControlコントロールを配置し、XAMLでHeightとWidthプロパティを設定します。
<c1:C1DockControl Height="200" HorizontalAlignment="Left" Name="c1DockControl1" VerticalAlignment="Top" Width="584">
<c1:C1DockTabControl Height="200" HorizontalAlignment="Left" Name="c1DockTabControl1" VerticalAlignment="Top" Width="574" >
</c1:C1DockTabControl>
</c1:C1DockControl>
② XAMLで、C1DockTabControlコントロールの中にC1DockTabItem要素を作成します。幅を揃え、Headerプロパティに"ツールバー"と設定します。
<c1:C1DockTabItem Header="ツールバー" Width="574" > </c1:C1DockTabItem>
③ C1DockTabItem要素の中に、C1RichTextBoxToolbarコントロールを組み込みます。
④ C1DockControlコントロールの下側に、C1RichTextBoxコントロールを配置します。
⑤ XAMLで、C1RichTextBoxToolbarコントロールのコードに以下の行を追加します。これで、C1RichTextBoxコントロールとC1RichTextBoxToolbarコントロールが連結されます。
RichTextBox="{Binding ElementName= C1RichTextBox1}"
⑥ アプリケーションを実行し、ここまでの出来上がりを確認します。「ツールバー」と表示されているバーの部分をドラッグして、ツールバーがフローティングすることを確認してください。また、ドッキング動作で4つのドッキングインジケータが表示され、ドッキングすることも確認します。
⑦ C1RichTextBoxコントロールをクリックし、プロパティウィンドウでContextMenuプロパティをクリックします。
そして、Itemsプロパティでコンテキストメニューを2つ組み込みます。
<c1:C1RichTextBox Height="310" HorizontalAlignment="Left" Margin="4,171,0,0" Name="c1RichTextBox1" VerticalAlignment="Top" Width="572">
<c1:C1RichTextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="リッチテキストボックスの縮小" Name="MenuItem1" />
<MenuItem Header="リッチテキストボックスの拡大" Name="MenuItem2" />
</ContextMenu>
</c1:C1RichTextBox.ContextMenu>
</c1:C1RichTextBox>
⑧ 作成した2つのコンテキストメニューの、Clickイベントハンドラを作成します。
⑨ アプリケーション実行時にツールバーをフローティング状態にしますので、C1DockTabControlコントロールのDockModeプロパティを「Floating」にします。
⑩ 最後に、MainWindowのLoadedイベントハンドラを作成します。以上で完成です。
アプリケーションを実行して、出来上がりを確認します。ツールバーがフローティング状態で表示され、2つのコンテキストメニューが表示されればOKです。
GUIの作成 2
ツールバーのサイズ調整とコンテキストメニューの作成
アプリケーション起動時にフローティング状態のツールバーのサイズを広げ、コンテキストメニューでツールバーのフローティング／ドッキング時のリッチテキストボックスのサイズ調節ができるようにします。
Class MainWindow
Private Sub Window_Loaded(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
C1DockTabControl1.DockWidth = 574
End Sub
Private Sub MenuItem1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem1.Click
C1RichTextBox1.VerticalAlignment = Windows.VerticalAlignment.Bottom
C1RichTextBox1.Height = 310
'c1RichTextBox1.Margin = New Thickness(0, 0, 5, 24)
End Sub
Private Sub MenuItem2_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MenuItem2.Click
C1RichTextBox1.VerticalAlignment = Windows.VerticalAlignment.Bottom
C1RichTextBox1.Height = 470
End Sub
End Class
namespace DockCont_WPF_cs
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MenuItem1_Click(object sender, RoutedEventArgs e)
{
c1RichTextBox1.Height = 310;
//c1RichTextBox1.Margin = new Thickness(0, 0, 5, 24);
}
private void MenuItem2_Click(object sender, RoutedEventArgs e)
{
c1RichTextBox1.Height = 470;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
c1DockTabControl1.DockWidth = 574;
}
}
}
コードが出来上がったらアプリケーションを実行し、ツールバーのサイズとコンテキストメニューの動作を確認します。
まとめ
多機能のアプリケーションを作成する場合、「いかにユーザーに機能を呼び出す操作を分かりやすくするのか」という点で悩んでしまいます。
フローティングウィンドウを使用すれば、カテゴリごとに操作用のパレットを作成して機能を整理・集約することができますので、C1DockControlコントロールが役に立つのではないでしょうか。
