グラフィックスとマルチメディア

  • [アーティクル]

更新 : 2010 年 12 月

Windows Presentation Foundation (WPF) では、マルチメディア、ベクター グラフィックス、アニメーション、およびコンテンツ構成のサポートが提供されるので、開発者はユーザーの関心を引くユーザー インターフェイスやコンテンツを簡単に開発できます。 Microsoft Visual Studio を使用して、ベクター グラフィックスまたは複雑なアニメーションを作成し、メディアをアプリケーションに統合することができます。

ここでは、アプリケーションにグラフィックス、遷移効果、サウンド、およびビデオを追加できるようにする WPF のグラフィックス、アニメーション、およびメディア機能について説明します。

メモメモ

Windows サービスで WPF 型を使用することは避けることを強くお勧めします。Windows サービスで WPF 型を使用しようとした場合、サービスが期待どおりに動作しないことがあります。

このトピックは、次のセクションで構成されています。

  • WPF 4 のグラフィックスとマルチメディアの新機能
  • グラフィックスおよび描画
  • 3-D レンダリング
  • アニメーション
  • メディア
  • 関連トピック

WPF 4 のグラフィックスとマルチメディアの新機能

グラフィックスとアニメーションに関するいくつかの変更点があります。

  • レイアウトの丸め

    オブジェクトの一方の端が 1 つのピクセル デバイスに位置する場合、DPI に依存しないグラフィック システムでは、不鮮明な表示 (半透明のエッジ) などのレンダリング アイテムを作成できます。 以前のバージョンの WPF には、このような場合の処理に役立つピクセル スナップが含まれています。 Silverlight 2 では、レイアウトの丸めが導入されたことで、端がピクセル境界全体に位置するように、要素を移動する別の方法が利用できます。 WPF では今回、FrameworkElement にアタッチされた UseLayoutRounding プロパティで、レイアウトの丸めがサポートされました。

  • キャッシュ済みコンポジション

    新しい BitmapCache クラスと BitmapCacheBrush クラスを使用すると、ビジュアル ツリーの複雑な部分をビットマップとしてキャッシュすることで、描画時間を大幅に短縮できます。 このビットマップに対しては、マウス クリックなどのユーザー入力ができるため、その他の要素上にブラシのように描画することができます。

  • Pixel Shader 3 のサポート

    WPF 4 は、WPF 3.5 SP1 で導入された ShaderEffect のサポートを基に、アプリケーションで Pixel Shader (PS) Version 3.0 を使用したエフェクトを記述できるようにします。 PS 3.0 のシェーダー モデルは、サポートされているハードウェア上でより多くのエフェクトを使用できるという点で、PS 2.0 より洗練されています。

  • イージング関数

    イージング関数を使用すると、アニメーションの動きを詳細に制御できるため、アニメーションが魅力的になります。 たとえば、ElasticEase をアニメーションに適用すると、アニメーションに弾むような動作を加えることができます。 イージングの種類の詳細については、System.Windows.Media.Animation 名前空間のドキュメントを参照してください。

グラフィックスおよび描画

WPF では、高品質 2D グラフィックスがサポートされます。 ブラシ、ジオメトリ、イメージ、変換などの機能が用意されています。 詳細については、「グラフィックス」を参照してください。 グラフィック要素の描画は、Visual クラスに基づいています。 画面のビジュアル オブジェクトの構造は、ビジュアル ツリーによって表されます。 詳細については、「WPF グラフィックス レンダリングの概要」を参照してください。

2-D 図形

WPF には、次の図に示すような四角形や楕円などの、一般的に使用されるベクター描画の 2-D 図形のライブラリが用意されています。

楕円と四角形

これらの固有の WPF 図形は単なる図形ではなく、キーボード入力やマウス入力を含む最も一般的なコントロールで得られる機能の多くを実装するプログラミング可能な要素です。 次の例は、Ellipse 要素をクリックすることによって発生した MouseUp イベントの処理方法を示しています。

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Window1" >
  <Ellipse Fill="LightBlue" MouseUp="ellipseButton_MouseUp" />
</Window>

public partial class Window1  : Window
{
    void ellipseButton_MouseUp(object sender, MouseButtonEventArgs e)
    {
        MessageBox.Show("You clicked the ellipse!");
    }
}

Partial Public Class Window1
    Inherits Window
    Private Sub ellipseButton_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
        MessageBox.Show("You clicked the ellipse!")
    End Sub
End Class

上記の XAML マークアップおよび分離コードの出力を次の図に示します。

"you clicked the ellipse!" というテキストを含むウィンドウ

詳細については、「WPF での図形と基本描画の概要」を参照してください。 入門用のサンプルについては、図形要素のサンプルを参照してください。

2-D ジオメトリ

WPF で提供される 2-D 図形では不十分な場合は、WPF でのジオメトリおよびパスのサポートを利用して独自の図形を作成します。 ジオメトリを使用して図形を描画ブラシとして作成し、他の WPF 要素をクリップする方法を次の図に示します。

パスのさまざまな使用

詳細については、「ジオメトリの概要」を参照してください。 入門用のサンプルについては、ジオメトリのサンプルを参照してください。

2-D 効果

WPF には、さまざまな効果を作成するために使用できる 2-D クラスのライブラリが用意されています。 WPF の 2-D レンダリング機能を使用すると、グラデーション、ビットマップ、描画、およびビデオを持つ UI 要素を塗りつぶすことができます。また、回転、拡大縮小、および傾斜を使用して要素を操作できます。 WPF ブラシを使用して得られる多くの効果の例を次の図に示します。

さまざまなブラシの図

詳細については、「WPF のブラシの概要」を参照してください。 入門用のサンプルについては、ブラシのサンプルを参照してください。

3-D レンダリング

WPF には、さらに人目を引くレイアウト、UI、およびデータの視覚化を実現するために WPF の 2-D グラフィックス サポートと統合された一連の 3-D レンダリング機能が用意されています。 たとえば、WPF では、次の図に示すように 3-D 図形のサーフェイスに 2-D イメージを描画できます。

Visual3D サンプルのスクリーンショット

詳細については、「3-D グラフィックスの概要」を参照してください。 入門用のサンプルについては、3-D ソリッドのサンプルを参照してください。

アニメーション

アニメーションを使用すると、コントロールおよび要素の拡張、振動、回転、およびフェード効果を実現できます。また、人の関心を引くページの遷移なども作成できます。 WPF ではほとんどのプロパティをアニメーション化できるため、ほとんどの WPF オブジェクトをアニメーション化できるだけでなく、WPF を使用して作成するカスタム オブジェクトをアニメーション化することもできます。

アニメーション キューブのイメージ

詳細については、「アニメーションの概要」を参照してください。 その他の入門用のサンプルについては、アニメーション サンプル ギャラリーを参照してください。

メディア

イメージ、ビデオ、およびオーディオは、情報およびユーザー エクスペリエンスを伝えるメディア リッチな手段です。

イメージ

アイコン、背景、およびアニメーションのパーツを含むイメージは、ほとんどのアプリケーションの中核です。 イメージは頻繁に使用する必要があるため、WPF ではさまざまな方法でイメージを処理できます。 その方法の一例を次の図に示します。

スタイル サンプル スクリーンショット

詳細については、「イメージングの概要」を参照してください。

ビデオとオーディオ

WPF のグラフィックス機能の主要な特性は、ビデオやオーディオを含むマルチメディアの処理をネイティブにサポートすることです。 次の例は、アプリケーションにメディア プレーヤーを挿入する方法を示しています。

<MediaElement Source="media\numbers.wmv" Width="450" Height="250" />

MediaElement はビデオとオーディオの両方を再生でき、カスタム UIs を簡単に作成できる拡張性を備えています。

詳細については、「マルチメディアの概要」を参照してください。

参照

参照

System.Windows.Media

System.Windows.Media.Animation

System.Windows.Media.Media3D

概念

パフォーマンスの最適化 : 2D グラフィックスとイメージング

WPF での図形と基本描画の概要

純色およびグラデーションによる塗りつぶしの概要

イメージ、描画、およびビジュアルによる塗りつぶし

その他の技術情報

アニメーションとタイミング

3-D グラフィックス

マルチメディア

履歴の変更

日付

履歴

理由

2010 年 12 月

Visual Basic の例を補足。

コンテンツ バグ修正