次の方法で共有


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

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

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

手記

Windows サービスで WPF 型を使用することは強くお勧めしません。 Windows サービスで WPF 型を使用しようとすると、サービスが期待どおりに動作しない可能性があります。

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

グラフィックスとアニメーションに関連するいくつかの変更が行われました。

  • レイアウトの丸め

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

  • キャッシュされたコンポジション

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

  • ピクセル シェーダー 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 図形のライブラリが用意されています。

楕円と四角形を示す図。

これらの組み込みの 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 マークアップとコードビハインドの出力を示しています。

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

2D ジオメトリ

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

ジオメトリを使用して図形を作成する方法を示すスクリーンショット。

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

2D 効果

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

さまざまな WPF ブラシとペイント要素を示す図。

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

3D レンダリング

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

テクスチャが異なる 3D 図形を示すサンプルのスクリーンショット。

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

アニメーション

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

アニメーションキューブのスクリーンショット。

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

メディア

画像、ビデオ、オーディオは、メディアに富んだ情報とユーザー エクスペリエンスを伝える方法です。

画像

アイコン、背景、アニメーションの一部を含む画像は、ほとんどのアプリケーションの中核となる部分です。 イメージは頻繁に使用する必要があるため、WPF ではさまざまな方法で操作する機能が公開されています。 次の図は、これらの方法の 1 つだけを示しています。

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

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

ビデオとオーディオ

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

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

MediaElement はビデオとオーディオの両方を再生でき、カスタム UI を簡単に作成できるように十分に拡張可能です。

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

関連項目