Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

.NET Core + Gtk#でGUIに画像を表示する

前回、.NET Core + Gtk#でのGUI環境構築方法について載せました。
elsammit-beginnerblg.hatenablog.com

今回は、.NET Core + Gtk#でjpgファイル表示について記載いたします。



GUI修正方法

前回インストールしたmingw-w64-x86_64-gladeを用いていきます。

dotnet new --install GtkSharp.Template.CSharp
dotnet new gtkapp

にて作成したGUIアプリの配下にて、
コマンドでこちらを実行。

glade MainWindow.glade

MainWindow.gladeには変更するGUI名を設定します。

こちらを実行するとこのような画面が表示されます。
f:id:Elsammit:20201115171420j:plain

こちらを用いることでVisual Studioを用いたようなGUI上での編集が可能になります。
とても便利ですね!!

■画像挿入

こちらの通り、GtkBoxにてレイアウトが決めれれており、このままだと新しいウェジェットが挿入出来ないため追加します。
f:id:Elsammit:20201115171654j:plain

GtkBoxを選択すると左タグにBox数が設定できる項目があります。
こちらを1増やして、3つにします。

そして、追加した領域にGtkImageを挿入します。
※GtkImageはDisplayタグにて選択できます。

ここで新規挿入したGtkImageのIDを_image1に設定します。

そして、MainWindow.csを開き

[UI] private Image _Image1 = new Image();

をGlobalで追加します。

そして、MainWindowにてこちらの通り追加します。

        private MainWindow(Builder builder) : base(builder.GetObject("MainWindow").Handle)
        {
            builder.Autoconnect(this);

            DeleteEvent += Window_DeleteEvent;
            _button1.Clicked += Button1_Clicked;

            _Image1.Pixbuf = Gdk.Pixbuf.NewFromFileAtSizeUtf8(@"画像パス", 100,100);
        }

重要なのは、

_Image1.Pixbuf = Gdk.Pixbuf.NewFromFileAtSizeUtf8(@"画像パス", 100,100);

でPixbufメンバに対して、NewFromFileAtSizeUtf8で画像サイズ+画像を指定します。

さらに、ボタン押下に対しても、

_Image1.Pixbuf = Gdk.Pixbuf.NewFromFileAtSizeUtf8(@"画像パス", 100, 100);

と指定することで画像を再度設定できるので、ボタン押下で画像切り替えも可能になります。

■実際に動かしてみる

では、実際に動かしてみます!!
こんな感じになるかと思います!!

【押下前】
f:id:Elsammit:20201115173116j:plain

【押下後】
f:id:Elsammit:20201115173134j:plain

■最後に

ここまでは出来たのですが、OpenCVとの連携が出来ていないです泣
どうやるのかな??
最終的にはOpenCVと連携したいので、もう少し調べてみます。
また分かったらブログにて備忘録残しておこうと思います!!