WPFアプリケーションにフローティングツールバーを実装する

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

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>

C1DockTabControlコントロールの中にC1DockTabItem要素を作成

　③ C1DockTabItem要素の中に、C1RichTextBoxToolbarコントロールを組み込みます。

C1RichTextBoxToolbarコントロールを組み込む

　④ C1DockControlコントロールの下側に、C1RichTextBoxコントロールを配置します。

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です。

ここまでのアプリケーション作成を確認