Eto.Formsで画像表示

今回は画像を表示してみます。Eto.Formsで画像を表示する主なクラスは、「Image」がつくクラスとDrawableクラスです。

  • Image~:画像表示のみ(画像であるImageインスタンス上では、ピクセル単位の色設定が可能)
  • Drawable:Graphicsインスタンスを取得することで、点や線、文字、画像などの描画処理が可能

今回は、前者のうちImageViewを使ってみます。

いつものようにテンプレートからプロジェクトを作ります。ファイルアクセスの都合上、アプリケーション・プロパティの設定ではFull .NETを選択します。

using System;
using Eto.Forms;
using Eto.Drawing;

namespace EtoSample3
{
    public class MainForm : Form
    {
        ImageView myImage = new ImageView {
            BackgroundColor = Color.FromRgb(0)
        };
        Scrollable container;

        public MainForm()
        {
            Title = "Image Viewer";
            MinimumSize = new Size(200, 100);
            BackgroundColor = myImage.BackgroundColor;

            container = new Scrollable
            {
                Content = myImage,
                BackgroundColor = myImage.BackgroundColor,
                MinimumZoom = 1F,
                MaximumZoom = 1F,
                ExpandContentHeight = false,
                ExpandContentWidth = false,
            };
            Content = container;
            //Content = myImage;

            var openCommand = new Command
            {
                MenuText = "Open...",
                ToolBarText = "Open",
                Shortcut = Application.Instance.CommonModifier | Keys.O
            };
            openCommand.Executed += (s, e) => {
                var dialog = new OpenFileDialog();
                if (dialog.ShowDialog(this) != DialogResult.Ok) return;
                try
                {
                    var img = new Bitmap(dialog.FileName);
                    if (img != null)
                    {
                        myImage.Image = img;
                        ClientSize = new Size(
                            img.Width + 2, img.Height + 2);
                        //ClientSize = img.Size;
                        return;
                    }
                }
                catch (Exception) { }
                MessageBox.Show("Error!");
            };

            var quitCommand = new Command { MenuText = "Quit" };
            quitCommand.Executed += (sender, e) => Application.Instance.Quit();

            Menu = new MenuBar
            {
                Items =
                {
                    new ButtonMenuItem {
                        Text = "&File",
                        Items = { openCommand }
                    },
                },
                QuitItem = quitCommand,
            };
        }
    }
}

上のコードには、一部コメントアウトした領域があります。 コメントの仕方によって、2種類の構造を作り分けるためです。

上のコードのまま起動すると、中が黒いウインドウがあらわれます。

f:id:mokake:20161228231954p:plain

メニューの「File」→「Open...」を選ぶと(またはCtrl+Oを押下すると)、ファイル選択ダイアログがあらわれます。 画像ファイルを選ぶと、その画像が表示されます(ここではVisual Studioのソリューション エクスプローラ部分のスクリーンショットです)。

f:id:mokake:20161228232008p:plain

今回のコードでは、ウインドウを縮小するとスクロールバーがあらわれ、拡大すると画像の外側は黒く塗られます。

f:id:mokake:20161228232052p:plain

f:id:mokake:20161228232101p:plain

ImageViewクラス

ImageViewは、Imageプロパティに画像インスタンスを設定すると表示する、シンプルなクラスです。

ちなみにBackgroundColorプロパティは、画像の外側の領域(拡大時に生じるもの)の色となります。

Imageクラス

Imageクラスは、Eto.Formsで画像を扱う、基本のクラスです。拡大縮小などの機能も、このクラス自体にはありません。唯一できる変更は、SetPixelメソッドによる点単位の色設定のみ。

なお、一般的な画像は派生クラスの1つであるBitmapクラスを使いますが、Windows BMPファイル以外に「よくある画像」は読み書き可能です。具体的な種類は、ImageFormat列挙体にあります。

Eto.Forms API : ImageFormat Enumeration

とりあえず読んで表示するだけなら、これでも十分ではないかと思います。

ScrollLayout

名前の通り、大きな中身をスクロールさせつつ表示できるコンテナです。

ソース中のcontainerコンストラクタにある設定を変えることで、挙動を変えられます。

なお、中身よりコンテナが大きくなった場合に「拡大しない」ためには、 ExpandContentWidth, ExpandContentHeight を false にする必要があります。 MaximumZone=1F だけでは拡大してしまいます。

一方、MinimumZoomを小さくすると、ウインドウ縮小時に中身も縮小します。設定値より小さくした場合のみ、スクロールバーが現れます。