ホーム
C#で画像処理
C#で画像ファイルを表示してみた

C#で画像ファイルを表示してみた

いずれ画像処理をするアプリを作りたいと思い、まずは画像ファイルを表示してみました。なにしろ画像をいじるプログラムは初めてなので、MSDNのイメージングの概要を読みながら試行錯誤のメモです。試した環境は下記です。

Visual Studio 2015 Express for Windows Desktop

C#のWPFで読み込みできる画像フォーマット
処理の流れ
試してみた

お試し用アプリ
表示部分
コード部分
実行してみた

C#のWPFで読み込みできる画像フォーマット

MSDNによると、WPFがサポートするフォーマットはBMP、GIF、JPEG、PNG、TIFFです。よく使うフォーマットが標準サポートされてるのは嬉しいですね。

処理の流れ

ざっくり下記の様な流れで処理します。

ImageコントロールをXAMLで配置しておく。
BitmapImageクラスのインスタンスを作る。（デコード用のインスタンス）
BitmapImage.BeginInit()メソッドでBitmapImageのインスタンスの初期化を開始する。
BitmapImage.UriSourceプロパティにファイルのURIを設定する。
BitmapImage.EndInit()メソッドでインスタンスの初期化を終わる。
ImageコントロールのSourceプロパティに、BitmapImageのインスタンスを渡す。
画像が表示される。

試してみた

お試し用アプリ

ウインドウにImageコントロールだけを配置して、画像ファイルをドロップしたらその画像を表示し、さらにファイルの拡張子をウィンドウタイトルに表示するアプリを作ってみます。

表示部分

XAMLは下記の様にしました。

<Window x:Class="image_trial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:image_trial"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200" Background="LightGray" AllowDrop="True" DragEnter="event_DragEnter" Drop="event_Drop">
    <Grid>
        <Image Name="image" Stretch="Uniform" />
    </Grid>
</Window>

Grid要素の中にImage要素を置きました。ドラッグアンドドロップでファイルを入力するので、Window要素にAllowDrop属性とDragEnterイベントとDropイベントを設定しました。またウィンドウの背景色をLightGrayに変更しました。

コード部分

コードは下記の様にしました。

using System;
using System.Windows;
using System.Windows.Media.Imaging;

namespace image_trial
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void event_DragEnter(object sender, DragEventArgs e)
        {
            e.Effects = DragDropEffects.Copy; // ドラッグ中のカーソルを変える。
        }

        private void event_Drop(object sender, DragEventArgs e)
        {
            if (e.Data.GetDataPresent(DataFormats.FileDrop)) // ドロップされたものがファイルかどうか確認する。
            {
                string filename = ((string[])e.Data.GetData(DataFormats.FileDrop))[0]; // ドロップされた最初のファイルのファイル名を得る。

                BitmapImage bitmap = new BitmapImage(); // デコードされたビットマップイメージのインスタンスを作る。
                try
                {
                    bitmap.BeginInit();
                    bitmap.UriSource = new Uri(filename); // ビットマップイメージのソースにファイルを指定する。
                    bitmap.EndInit();
                    image.Source = bitmap; // Imageコントロールにバインディングする。

                    this.Title = System.IO.Path.GetExtension(filename); // ファイルの拡張子をウインドウタイトルに表示する。
                }
                catch (Exception ex)
                {
                    MessageBox.Show(ex.Message);
                }
            }
        }
    }
}

画像の表示部分については、前述の処理の流れのままのコードになってます。

実行してみた

ペイントで下図のファイルを作成しました。これをペイントでJPEG、BMP、GIF、TIFF形式で保存したバラエティを作りました。また、Illust Studio miniでこの画像の白色部分を透明に変換し、PNGとPSD形式で保存しました。それぞれのファイルをアプリにドロップすると、下図の様になります。