バージョン

WPF でグラフィックス画像をビジュアルから作成

トピックの概要

目的

このトピックは、WPF 組み込み機能を使用して、ビジュアルまたはビジュアル派生のオブジェクトを PNG または JPEG 画像にエクスポートする方法を示します。

必要な背景

このトピックのコード例は、 xamDataChart™ を使用しているので、このコントロールの基本知識が必要です。

xamDataChart を画像にエクスポート

概要

内蔵機能を使用して、Visual クラスから派生しているクラスのインスタンスから簡単に画像を作成できます。このプロセスは、ビットマップの作成および PNG または JPEG などの一般的な圧縮画像フォーマットへのエクスポートで構成されます。以下のブロックは、この手順を概念的に説明しています。概念レベルのプロセスを理解しているのであれば、最後のコード例に進んでください。

要件

手順を完了するには、以下が必要です:

  • xamDataChart コントロールが使用される WPF アプリケーション。

  • Click イベントのイベント ハンドラーがあるボタン。イベント ハンドラーで、ビットマップ データをキャプチャし、画像ファイルをエンコードおよび保存するためのコードを配置します。

概要

以下はプロセスの概念的概要です。

1. ビジュアルをビットマップに変換 2. ビットマップを画像ファイルにエンコードします。

手順

以下の表で、手順を詳細に説明します。

1.ビジュアルをビットマップに変換します。

1. RenderTargetBitmap を作成します。

ビジュアルをビットマップに変換するには、ビットマップへの変換を実行するクラスのインスタンスを作成する必要があります。これは RenderTargetBitmap クラスです。この Class のコンストラクターでは、5 つの引数を使用できます。

  • 高さ

  • 水平方向の DPI

  • 垂直方向の DPI

  • ピクセル形式

すべての引数は、RenderTargetBitmap インスタンスの作成に必要です。

以下は、引数の使用についての考慮点です。

  • FrameworkElement 派生オブジェクトからビットマップを作成する場合、幅と高さ用に、ActualWidth/ActualHeight プロパティの値を取得します。

  • 水平方向と垂直方向の DPI 値は 96 である必要があります。これは WPF ではネイティブ DPI 値です。

  • ピクセル形式は、System.Windows.Media.PixelFormats.Pbgra32 である必要があります。

2. Visual オブジェクトを RenderTargetBitmap に描画します。

これは、RenderTargetBitmap クラスの Render メソッドを呼び出すことで実行されます。

コード例:

以下のコード例は、コントロールのコンテンツを画像にエクスポートする方法を示します。(実際のコードでは、ControlName をコントロールの Name プロパティの実際の設定で置き換えます。たとえば、dataChart。

C# の場合:

RenderTargetBitmap bitmap = new RenderTargetBitmap((int)this.ControlName.ActualWidth, (int)this.ControlName.ActualHeight, 96, 96, PixelFormats.Pbgra32);
bitmap.Render(this.ControlName);

Visual Basic の場合:

Dim bitmap As New RenderTargetBitmap(CInt(Me.ControlName.ActualWidth), CInt(Me.ControlName.ActualHeight), 96, 96, PixelFormats.Pbgra32)
bitmap.Render(Me.ControlName)

2.ビットマップ データを画像ファイルにエンコードします。

1. ファイル ストリームを作成します。

File クラスの静的 Create メソッドを、引数として出力ファイルへのパスで呼び出します。これによって FileStream … が作成され、エンコードされた画像データが書き込まれます。

C# の場合:

using (FileStream stream = File.Create(@"[path to file]\[file name].jpeg")) // または .png

Visual Basic の場合:

Using stream As FileStream = File.Create(@"[path to file]\[file name].jpeg") ' または .png

2. JpegBitmapEncoder または PngBitmapEncoder を作成します。

画像をエクスポートしたいファイル形式に基づいて、JpegBitmapEncoder または PngBitmapEncoder オブジェクトを作成します。JPEG にエクスポートする場合、QualityLevel プロパティを 1 から 100 の範囲の整数に設定することによって、画像品質を管理するオプションもあります (数値を高くすればするほど品質が良くなります。デフォルトは 75)。

コード例: 画像品質を 90 に設定:

C# の場合:

JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.QualityLevel = 90;

Visual Basic の場合:

Dim encoder As New JpegBitmapEncoder()
                  encoder.QualityLevel = 90

3. RenderTargetBitmap のビットマップをエンコーダーの Frames コレクションに追加します。

C# の場合:

encoder.Frames.Add(BitmapFrame.Create(bitmap));

Visual Basic の場合:

encoder.Frames.Add(BitmapFrame.Create(bitmap))

4. エンコードされた画像を保存します。

メソッド マラメーターとしてストリームを渡すエンコーダーの Save メソッドを呼び出します。これは、エンコードされた画像を指定ファイルに保存します。

C# の場合:

encoder.Save(stream);

Visual Basic の場合:

encoder.Save(stream)

コード例: xamDataChart から画像を作成

説明

以下のコードは、ユーザーがボタンをクリックしたときに jpg/png エンコード画像として xamDataChart コントロールでチャートをエクスポートできる方法を示します。

コード

XAML の場合:

…
<ig:XamDataChart xmlns:ig="http://schemas.infragistics.com/xaml"
 x:Name="dataChart">
…
</ig:XamDataChart>
<Button Click="SaveButton_Click" Content="Export Image"/>
…

C# の場合:

using System.IO;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
…
private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    RenderTargetBitmap bitmap =
        new RenderTargetBitmap((int)this.dataChart.ActualWidth,
            (int)this.dataChart.ActualHeight,
                  96, 96, PixelFormats.Pbgra32);
    bitmap.Render(this.dataChart);
    using (FileStream stream = File.Create(@"[file path]\[file name].[extension]"))
    {
        JpegBitmapEncoder encoder = new JpegBitmapEncoder();
        encoder.QualityLevel = (int)this.qualitySlider.Value;
        encoder.Frames.Add(BitmapFrame.Create(bitmap));
        encoder.Save(stream);
        // JPEG の代わりに、xamDataChart を PNG にエクスポートしたい場合
        // このコード ブロックを使用します
        // PngBitmapEncoder encoder = new PngBitmapEncoder();
        // encoder.Frames.Add(BitmapFrame.Create(bitmap));
        // encoder.Save(stream);
        }
    }
}

Visual Basic の場合:

Imports System.IO
…
Private Sub SaveButton_Click(sender As Object, e As RoutedEventArgs)
      Dim bitmap As New RenderTargetBitmap(CInt(Me.SaveButtonButton.ActualWidth), CInt(Me.SaveButtonButton.ActualHeight), 96, 96, PixelFormats.Pbgra32)
      bitmap.Render(Me.SaveButtonButton)
      Using stream As Stream = File.Create((@"[file path]\[file name].[extension]")
            Dim encoder As New JpegBitmapEncoder()
            encoder.QualityLevel = 90
            encoder.Frames.Add(BitmapFrame.Create(bitmap))
                  encoder.Save(stream)
            'JPEG の代わりに、xamDataChart を PNG にエクスポートしたい場合
            'このコード ブロックを使用します
            'Dim encoder As New PngBitmapEncoder()
            'encoder.Frames.Add(BitmapFrame.Create(bitmap))
            'encoder.Save(stream)
      End Using
End Sub

関連コンテンツ

トピック

以下のトピックでは、このトピックに関連する情報を提供しています。

トピック 目的

Microsoft® Visual Studio® および Expression Blend® で単純なデータ バインディングを使用して xamDataChart コントロールを追加する方法を学習します。