SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

複数機能を表示するタブページを持ったWPFアプリケーションの作成

ComponentOne Studio Enterprise 2011JのC1TabControlコントロールを使ったWPFアプリケーションの作成

  • X ポスト
  • このエントリーをはてなブックマークに追加

C1TabControlコントロールについて

 C1TabControlコントロールは、WPF上のページに複数のタブページを提供するコンテナコントロールで、各タブページにコントロールを配置して使用します。

C1TabControlコントロールの要素

 C1TabControlコントロールは、タブ、タブストリップ、タブページで構成されています。

C1TabControlコントロールの各要素(ヘルプファイルより抜粋)
C1TabControlコントロールの各要素(ヘルプファイルより抜粋)

 C1TabControlコントロールの各タブは、C1TabItemクラスによって表します。タブに表示するヘッダー文字列は、C1TabItemクラスのHeaderプロパティで設定します。C1TabControlコントロールのタブストリップは、1つ以上のC1TabItemオブジェクトをコントロールに追加すると作成されます。ストリップ内の各タブは、それぞれのタブページに関連付けられています。

 C1TabControlコントロールはコンテナコントロールなので、タブページを追加した時点では中身は空白です。コントロールを配置する場合は、Contentプロパティにコントロールを組み込みます。ただし、C1TabItemクラスは子要素を一度に1つだけ受け入れることができるようになっているので、そのままコントロールを配置した場合は1つのコントロールしか配置できません。複数のコントロールを使用したい場合は、GridやStackPanelコントロールなどと組み合わせて配置します。

<c1:C1TabItem>
    <c1:C1TabItem.Content>
        <StackPanel>
            <TextBlock Text="Hello"/>
            <TextBlock Text="World"/>
        </StackPanel>
    </c1:C1TabItem.Content>
</c1:C1TabItem>
GridやStackPanelコントロールを使って複数のコントロールをタブに配置できる(ヘルプファイルより抜粋)
GridやStackPanelコントロールを使って複数のコントロールを1つのタブページに配置できる(ヘルプファイルより抜粋)

C1TabControlコントロールの主な特徴

  • スクロール要素

     C1TabControlコントロールでは、タブがコントロールで指定した幅または高さを超えたとき、スクロールボタンが自動的に挿入されます。

  • タブストリップの配置

     デフォルトで、タブストリップはC1TabControlコントロールの上部に表示されます。ただし、TabStripPlacementプロパティによって、コントロールの上下左右のいずれにも配置できます。

    コントロールの上下左右のいずれにも配置可能(ヘルプファイルより抜粋)
    コントロールの上下左右のいずれにも配置可能(ヘルプファイルより抜粋)
  • タブクローズオプション

     ユーザーがタブを閉じることができるかどうかを設定できます。また、[閉じる]ボタンを表示する場所を、各タブ項目内またはタブストリップ外のグローバルな場所に指定できます。

    「閉じる」ボタンの位置を選べる(ヘルプファイルより抜粋)
    「閉じる」ボタンの位置を選べる(ヘルプファイルより抜粋)
  • メニューでのタブの表示

     C1TabControlコントロールでは、複数のタブページが作られると自動的にページのリストを作成し、ドロップダウンメニューからタブページを開くことができるようになります。

    ドロップダウンメニューからタブページを開くことができる(ヘルプファイルより抜粋)
    ドロップダウンメニューからタブページを開くことができる(ヘルプファイルより抜粋)
  • ヘッダーの形状をカスタマイズします

     C1TabControlコントロールのTabItemShapeプロパティをRounded、Rectangle、Slopedから選択し、タブヘッダーの形状を変更できます。

    タブ形状を変更できる(ヘルプファイルより抜粋)
    タブ形状を変更できる(ヘルプファイルより抜粋)
  • 新しいタブページの表示

     Internet Explorer 8のように新しいタブページを開くための機能を実装しています。ユーザーは専用のタブをクリックするだけで、新しいタブページを追加できます。

    新しいタブページを開くための専用タブ
    新しいタブページを開くための専用タブ
  • ヘッダーの重ね合わせの方法を選べる

     タブを重ね合わせる際に、右側を奥にするか、左側を奥にするか、あるいは選択した位置から左右に奥まっていくか設定できます。選択されているタブは一番手前に表示されます。

    ヘッダーを重ね合わせる位置を設定できる
    ヘッダーを重ね合わせる位置を設定できる
  • 背景の変更

     タブの外観を維持しながら、その背景を変更できます。簡単な機能のように見えますが、テンプレート全体をカスタマイズすることなく背景のみを変更できるタブコントロールは、現在、C1TabControl以外に存在しません。

  • ヘッダーの重なり

     タブ項目のヘッダー間の重なりをカスタマイズすることにより、Microsoft Visual Studioの[ドキュメント]タブのような階段状のタブを表示できます。

次のページ
WPFアプリケーションの作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6226 2011/10/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング