Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

WPFで、マウスポインタを外すと自動的に隠れるウィンドウを実装する

WPFでツールウィンドウを作成する - AutoHide編

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/01/30 14:00

本稿では、WPFのカスタムコントロールで「Visual Studioに似たツールウィンドウ」を作成する例を通して、依存関係プロパティの定義方法、コントロール内でのリストの利用方法などを紹介します。

目次

はじめに

 WPFはかなり柔軟なカスタマイズができるUIプラットフォームのため、標準で用意されているコントロールだけで事足りるケースが多いと思います。しかし、より複雑なUIを構築しようとすると、カスタムコントロールを作る必要があるでしょう。

 本記事では、カスタムコントロールで「Visual Studioに似たツールウィンドウ」を作成する例を通して、依存関係プロパティの定義方法、コントロール内でのリストの利用方法などを紹介します。

 なお、ここで作成するツールウィンドウはAutoHide(自動的に隠れる)機能だけを持たせたものです。フローティングウィンドウにしたり、ドラッグして場所を移動したりすることはできません。

対象読者

  • C# 3.0のコードが読める。
  • WPFとXAMLについて理解している。

必要な環境

 本記事では、次の環境で開発/テストを行いました。

  • 開発環境: Visual Studio 2008
  • 言語: C# 3.0
  • テスト環境1: Windows XP SP3(RC)/Windows Vista、1.6GHz Sempron、1,280MB RAM
  • テスト環境2: Windows Vista、Intel Core 2 Duo CPU E6550 @ 2.33GHz、2,048MB RAM

プロジェクトファイル一式

 記事の添付ファイルには、今回使用するすべてのファイルが入っています。特別な設定は必要なく、プロジェクトファイルを開くだけで使えます。

作成するプログラムの概要

 コントロールの内部の実装を見ていく前に、コントロールの使い方を知り、大体のイメージを掴んでおきましょう。

 まず、簡単な使用例を示します。

リスト1:使用例
<Window x:Class="WpfApplicationSubWindow1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfApplicationSubWindow1"
  Title="Window1" Height="600" Width="800">

  <local:SubWindows x:Name="SubWindow1">
    <local:SubWindows.LeftContents>
      <local:TitleAndPage Title="ツールウィンドウ左1"
        PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>
      <local:TitleAndPage Title="ツールウィンドウ左2"
        PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>
    </local:SubWindows.LeftContents>

    <local:SubWindows.RightContents>
      <local:TitleAndPage Title="ツールウィンドウ右1"
        PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>
      <local:TitleAndPage Title="ツールウィンドウ右2"
        PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>
    </local:SubWindows.RightContents>
    
    <local:SubWindows.BottomContents>
      <local:TitleAndPage Title="ツールウィンドウ下1"
        PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>
      <local:TitleAndPage Title="ツールウィンドウ下2"
        PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>
    </local:SubWindows.BottomContents>
    
    <Border BorderBrush="Black" BorderThickness="1">
      <TextBlock Text="メインコンテンツ部分"
        FontSize="32" Foreground="Red"/>
    </Border>
  </local:SubWindows>
</Window>

 実行すると、次のようなウィンドウが表示されます。左右下にあるタブにマウスポインタを合わせると、ツールウィンドウが出現します。

図1 実行画面
図1 実行画面
図2 タブにマウスポインタを合わせると、ツールウィンドウがスライドしてくる
図2 タブにマウスポインタを合わせると、ツールウィンドウがスライドしてくる

 最初のXAMLに戻って見ていきましょう。

<local:SubWindows x:Name="SubWindow1">
    ・・・
</local:SubWindows>

 ここで、SubWindowsというコントロールを作っています。これが今回作成していくカスタムコントロールの名前です。

<local:SubWindows.LeftContents>
    ・・・
</local:SubWindows.LeftContents>
<local:SubWindows.RightContents>
    ・・・
</local:SubWindows.RightContents>
<local:SubWindows.BottomContents>
    ・・・
</local:SubWindows.BottomContents>

 SubWindowsはLeftContentsRightContentsBottomContentsという3つのプロパティを持ちます。ツールウィンドウを追加する場合は、表示する場所に応じてこれらのどこかにTileAndPageクラスを格納していくことになります。

<local:TitleAndPage Title="ツールウィンドウ左1"
  PageUri="Page1.xaml" IconUri="Image\arrow.PNG"/>

 TitleAndPageが一つのツールウィンドウを表します。Titleにウィンドウタイトル、PageUriにページのURI、IconUriにタブに表示するアイコンのURIを指定します。ツールウィンドウには、PageUriで指定されたページが表示されます。

 図に表すと次のようになります。

図3 配置とプロパティ
図3 配置とプロパティ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5