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

  • [アーティクル]

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

このトピックでは、アプリケーションにグラフィックス、画面切り替え効果、サウンド、ビデオを追加できるようにする WPF のグラフィックス、アニメーション、メディア機能を紹介します。

Note

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

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

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

  • レイアウトの丸め

    オブジェクトの端が 1 ピクセル デバイスの中間に位置する場合、DPI に依存しないグラフィックス システムでは、端がぼやけたり半透明になったりするなどのレンダリング アーティファクトが発生することがあります。 以前のバージョンの WPF には、このような場合の処理に役立つピクセル スナップが含まれていました。 Silverlight 2 では、端がピクセル境界全体に位置するように要素を移動する別の方法としてレイアウトの丸めが導入されました。 WPF で FrameworkElement の UseLayoutRounding 添付プロパティを使用したレイアウトの丸めがサポートされるようになりました。

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

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

  • Pixel Shader 3 のサポート

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

  • イージング関数

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

グラフィックスとレンダリング

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

2D シェイプ

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

Diagram showing ellipses and rectangles.

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

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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 マークアップとコードビハインドの出力を次の図に示します。

A message box saying

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

2D ジオメトリ

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

Screenshot showing how you can use geometries to create shapes.

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

2D 効果

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

Illustration showing the different WPF brushes and paint elements.

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

3D レンダリング

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

Screenshot of a sample showing 3D shapes with different textures.

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

アニメーション

アニメーションを使用すると、コントロールや要素を拡大、振動、回転、フェードさせることができ、魅力的なページ遷移なども作成できです。 WPF ではほとんどのプロパティをアニメーション化できるため、ほとんどの WPF オブジェクトをアニメーション化できるだけでなく、WPF を使用して作成するカスタム オブジェクトをアニメーション化することもできます。

Screenshot of an animated cube.

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

Media

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

Images

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

Styling sample screenshot

詳しくは、「 イメージングの概要」をご覧ください。

ビデオとオーディオ

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

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

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

詳しくは、「マルチメディアの概要」をご覧ください。

関連項目