.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名を設定します。
こちらを実行するとこのような画面が表示されます。
こちらを用いることでVisual Studioを用いたようなGUI上での編集が可能になります。
とても便利ですね!!
■画像挿入
こちらの通り、GtkBoxにてレイアウトが決めれれており、このままだと新しいウェジェットが挿入出来ないため追加します。
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);
と指定することで画像を再度設定できるので、ボタン押下で画像切り替えも可能になります。
■実際に動かしてみる
では、実際に動かしてみます!!
こんな感じになるかと思います!!
【押下前】
【押下後】