試してみよう : 四角形でないウィンドウの作成

このページは WPF プロジェクトにのみ適用されます。

Microsoft Expression Blend アプリケーションでは、実行時に四角形以外の形状で表示されるウィンドウを作成する場合があります。この一般的な例としては、デスクトップ アプレット、ウィジェット、メディア プレーヤーがあります。四角形以外のウィンドウを作成するには、アプリケーションの Window 要素のプロパティをいくつか変更し、タイトル バーを使用せずにウィンドウを移動できるイベント ハンドラ メソッドを作成します。

四角形以外のウィンドウを透明にする

  1. [ファイル] メニューの [新しいアイテム] をクリックし、Window1.xaml という名前の新しいウィンドウ ドキュメントを作成します。Window1.xaml に一致するコードビハインド ファイルを生成するには、[新しいアイテムの追加] ウィンドウで [コード ファイルを含める] チェック ボックスがオンになっていることを確認します。

  2. [組み合わせ] パネルの [オブジェクトとタイムライン] で Window 要素を選択し、[プロパティ] パネルの [外観] で WindowStyle プロパティを [None] に変更して、ウィンドウ シェル (タイトル バー) を削除します。F5 キーを押して、既定シェルのないウィンドウの外観を確認します。標準ボタンである [最小化]、[最大化]、[元に戻す]、または [閉じる] の各ボタンは表示されません。ウィンドウをドラッグすることもできません。Alt + F4 キーを押して、ウィンドウを閉じます。

    Cc295119.alert_note(ja-jp,Expression.10).gifメモ :

    その他の WindowStyle オプションについては、MSDN ライブラリの「WPF ウィンドウの概要」のトピックにある WindowStyle の説明を参照してください。

  3. [プロパティ] パネルの [外観] で [AllowsTransparency] チェック ボックスをオンにします。ウィンドウの境界が表示されなくなります。

  4. ウィンドウの透明度を高めるには、[プロパティ] パネルの [ブラシ] で Window 要素の Background プロパティを [ブラシなし] Cc295119.706bbd5c-c0e0-43a1-9604-297f019d0275(ja-jp,Expression.10).png に設定します。ユーザーがウィンドウの目に見えない領域をクリックできるようにする場合は、Background プロパティを [単色ブラシ] Cc295119.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,Expression.10).png に設定し、背景ブラシの Alpha プロパティを 1 に設定することもできます。こうすると、ウィンドウのクリック可能な領域を非表示のまま維持できます。

  5. 最後に、[オブジェクトとタイムライン] で LayoutRoot をダブルクリックして要素を有効化し、ツールボックスからアートボードに要素を追加します。要素で OpacityMask ブラシを設定して、さまざまな効果を作成できます (これを行う方法の詳細については、「不透明度マスクの作成」を参照してください)。[楕円] Cc295119.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,Expression.10).png や [ペン] Cc295119.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.10).png などの描画ツールを使用してシェイプやパスを描いたり、要素を他の要素の後ろに移動したりできます (要素を右クリックし、[順序] をクリックします)。LayoutRoot の内容によって、アプリケーションの概要が効果的に定義されます。

  6. もう一度 F5 キーを押して、ウィンドウの外観を確認します。まだ、ウィンドウをドラッグすることはできません。Alt + F4 キーを押して、ウィンドウを閉じます。

実行時にウィンドウのドラッグを有効にするコードの追加

ウィンドウを透明にすると、タイトル バーのないウィンドウの位置を変更できなくなります。ウィンドウを再び移動できるようにするには、ウィンドウにイベント ハンドラを追加し、関連するコードビハインド ファイルに小さなコードを追加する必要があります。

  1. [ファイル] メニューで [すべて保存] をクリックして、プロジェクトをハード ディスクに保存します(一度も保存されていないプロジェクトにイベント ハンドラ メソッドを追加することはできません)。

  2. [オブジェクトとタイムライン] で Window 要素を選択した状態で、[プロパティ] パネルの [イベント] Cc295119.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ja-jp,Expression.10).png ボタンをクリックします。

  3. MouseLeftButtonDown の横に「OnMouseLeftButtonDown」と入力し、Enter キーを押します。

    • Microsoft Visual Studio 2008 Standard Edition 以降がインストールされている場合、Enter キーを押した後に生成されるイベント ハンドラ コードがコードビハインド ファイル (Window1.xaml.cs) に自動的に追加され、コードビハインド ファイルは、編集のため、Visual Studio で開かれます。

    • Visual Studio がインストールされていない場合は、イベント ハンドラ メソッドのコードがクリップボードにコピーされるので、そのコードをコードビハインド ファイルに貼り付けることができます。[プロジェクト] パネルでコードビハインド ファイルをダブルクリックして開きます。生成されたイベント ハンドラ メソッド コードをコードビハインド ファイル内に貼り付けます。場所は、コードビハインド ファイルが C# の場合は最後から 2 番目の閉じかっこの直前、コードビハインド ファイルが VB.NET の場合は End Class ステートメントの直前です。

      Cc295119.alert_note(ja-jp,Expression.10).gifメモ :

      Expression Blend の [プロジェクト] パネルでコードビハインド ファイルをダブルクリックして開けない場合は、コードビハインド ファイルのファイル拡張子 (.cs または .vb) がアプリケーションに関連付けられておらず、Windows でファイルを開く方法が認識されていない可能性があります。.cs ファイルと .vb ファイルをメモ帳などのエディタに関連付ける方法については、「コードビハインド ファイルの編集」を参照してください。

  4. コードビハインド ファイル内に生成されたイベント ハンドラ メソッドを修正して、イベント ハンドラを次のようにします。

    private void OnMouseLeftButtonDown(object sender,
             System.Windows.Input.MouseButtonEventArgs e)
    {
      this.DragMove();
    }
    
    Private Sub OnMouseLeftButtonDown(ByVal sender As System.Object,
             ByVal e As System.Windows.Input.MouseButtonEventArgs)
      Me.DragMove()
    End Sub
    
  5. F5 キーを押してアプリケーションを実行します。

  6. その他のイベント ハンドラ メソッドも追加できます。たとえば、ボタンの Click イベントが発生したときにコードビハインド ファイル内の Close() メソッドを呼び出すメソッドを作成できます。イベント ハンドラ メソッドを作成する方法の詳細については、「イベント処理の概要」を参照してください。