お手軽Linux(Ubuntu) GUIアプリ開発　パーツサンプル集

#####各コントロールごとのサンプル

<img width="413" alt="スクリーンショット 2020-04-20 14.39.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/632971db-fd4a-5475-9d45-f96646360e08.png">

[Git Sourth](https://github.com/objcToScript/SqliteTest/tree/master/partsTest2)

コントロールの位置を指定する

```
Fixed fixed1 = new Fixed();
fixed1.Put(コントロールUI, x, y);
fixed1.Move(コントロールUI, x, y);
this.fixed1.Move(コントロールUI, x, y);
```

######ラベルにテキストを入力する

```
label1.Text = "testtest";
```

######チェックボタンをにイベントを追加する
GUIデザイナーからもクリックでイベント文を自動生成できます。

```
//チェックボックスをOnにする
checkbutton1.Active = true;
checkbutton1.Clicked += clickedCallback;

void clickedCallback(object obj, EventArgs args) {
	if(((ToggleButton)obj).Active) {

	}		
}
checkbutton2.Active = false;
checkbutton2.Clicked += delegate (object obj, EventArgs args) {
	if(((ToggleButton)obj).Active) {

	}
};
```
######ラジオボタンをにイベントを追加する
```
//ラジオボックスをOnにする
radiobutton1.Active = true;
radiobutton1.Clicked += radioBtnClickedCallback;
void radioBtnClickedCallback(object obj, EventArgs args) {
	if(((RadioButton)obj).Active) {

	}
}

radiobutton2.Active = false;
radiobutton2.Clicked += delegate (object obj, EventArgs args) {
	if(((RadioButton)obj).Active) {

	}
};
```
######イメージを表示する

他にもバイナリーデータを直接入れて表示することもできます

```
image1.Pixbuf = new Pixbuf("画像ファイル名");
```

######textViewを表示する
```
textview1.Buffer.Text = "testtest";
```

######spinボタンに数字を設定する
```
spinbutton1.Value = 1;
```

######TreeViewを表示する　Extensionを使用(gitにあがっています）
```
Gtk.TreeViewColumnEx artistColumn = new Gtk.TreeViewColumnEx();
artistColumn._mkCellRendererText();
artistColumn.Sizing = TreeViewColumnSizing.Fixed;
artistColumn.FixedWidth = 200;
artistColumn.Title = "Artist";
artistColumn.bindingPropertyName = "Artist";

Gtk.TreeViewColumnEx songColumn = new Gtk.TreeViewColumnEx();
songColumn._mkCellRendererText();
songColumn.Sizing = TreeViewColumnSizing.Fixed;
songColumn.FixedWidth = 200;
songColumn.Title = "Song Title";
songColumn.bindingPropertyName = "Title";

Gtk.TreeViewColumnEx deleteCheckColumn = new Gtk.TreeViewColumnEx();
CellRendererToggle toggleCell = deleteCheckColumn._mkCellRendererToggle();
deleteCheckColumn.Sizing = TreeViewColumnSizing.Fixed;
deleteCheckColumn.FixedWidth = 50;
deleteCheckColumn.Title = "削除";
deleteCheckColumn.bindingPropertyName = "Effective";

toggleCell.Toggled += delegate (object o, ToggledArgs args) {
	TreeIter iter;
	if(musicListStore.GetIterFromString(out iter, args.Path)) {
		Song Song1 = (Song)musicListStore.GetValue(iter, 0);		
	}
};

treeview2.AppendColumn(artistColumn);
treeview2.AppendColumn(songColumn);
treeview2.AppendColumn(deleteCheckColumn);

artistColumn._mkBinding();
songColumn._mkBinding();
deleteCheckColumn._mkBinding();

treeview2.Model = musicListStore;

this.ShowAll();
```
######Comoboxを表示する　Extensionを使用(gitにあがっています）

```
combobox20._mkCellRendererText("Artist");

combobox20._mkBinding();

combobox20.Model = musicListStore;
```

####MenuBar ToolBar StatusBarを表示する

[Git Sourth](https://github.com/objcToScript/SqliteTest/tree/master/menuTest)
<img width="354" alt="スクリーンショット 2020-04-20 18.52.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/75f9d37e-add4-4717-ae31-6d6eef47c60f.png">
VBoxを追加します。Boxを縦に４つにします
<img width="357" alt="スクリーンショット 2020-04-20 18.36.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/b7c1bae8-ec3b-eebb-3ba4-7631655c1421.png">
一番上のBoxにMenuBarを追加します。メニュー項目を追加していきます。プロパティのシグナルからToggledをクリックすることでイベント文が自動生成されます
<img width="413" alt="スクリーンショット 2020-04-20 18.39.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/c88de84f-09bc-6808-df78-48f880b3ce24.png">
２番目のBoxにToolBarを追加します。アイコンを追加していきます
<img width="688" alt="スクリーンショット 2020-04-20 18.40.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/fcc84186-b57f-34a6-9d9a-74771046fd07.png">
３番にFilxedを追加します。高さを追加します
<img width="560" alt="スクリーンショット 2020-04-20 18.40.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/262f70d8-e0d9-a814-4031-45f2a07afb6f.png">
4番目にStatusBarを追加します。

####UIコントロールのラップしたウェッジを作る

[Git Sourth](https://github.com/objcToScript/SqliteTest/tree/master/wegeTest1)

できること
UIControlを継承したUIControlExクラスを作成できる。OverRideもできるようです
ツールボックスにコントロールアイコンが登録されドラッグして使えます。

新しいプロジェクトを作ります。新しいウェッジを選択
<img width="360" alt="スクリーンショット 2020-04-19 10.41.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/35756fbb-82f4-ca6d-5dbc-b6cc6b57b956.png">

Widget.csファイルを開きます。デザイナータブを押します。
<img width="185" alt="スクリーンショット 2020-04-19 10.42.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2fa7b1fe-d2a8-ad26-bc9f-891ce8a2f30e.png">
ツールボックスからコントロールを選びデザイナーにドラッグします。ここではComboxを選択します
<img width="159" alt="スクリーンショット 2020-04-19 10.43.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/da9ecc1f-a39c-0c7a-5284-509a7e74cba9.png">
Conboがドラッグされた状態
<img width="322" alt="スクリーンショット 2020-04-19 16.20.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/7f43ae00-22c2-0fb1-72c1-91ef51783b2e.png">


全てビルドします
<img width="212" alt="スクリーンショット 2020-04-19 16.20.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/9bab5334-f0f8-7a97-0c5a-38f741535b9d.png">

ツールボックスにカスタムウェッジが表示されます
<img width="165" alt="スクリーンショット 2020-04-19 16.21.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/c9ccc946-085b-5183-9a91-44eb95f40831.png">

MainWindowのデザイナーに配置します。Widthの値を設定します。
<img width="699" alt="スクリーンショット 2020-04-19 16.22.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/98ce4be2-2bb9-6427-3023-d4300d7523cb.png">

ウェッジコンポーネントのprivateにCombBoxが生成されているので、Getterなどで取り出して使います。
ウェッジコンポーネントの中にプロパティを書くことで、UIControllを継承したクラスにプロパティを追加したような感じができます。

```
using Gtk;
namespace wegeTest1 {
	[System.ComponentModel.ToolboxItem(true)]
	public partial class ComboWidget : Gtk.Bin {
		public ComboWidget() {
			this.Build();
		}
		public string bindingProperyName = "";
		public ComboBox _mkComoboBox() {
			return combobox15;
		}
		public ComboBox Combo {
			get {
				return combobox15;
			}
		}
	}
}
```
OverRideのやりかた
https://stackoverflow.com/questions/20469706/loading-pixbuf-to-image-widget-in-gtk

熟練すればこのようなものが作れるようになります。
<img width="552" alt="スクリーンショット 2020-04-20 18.58.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/ef5eb602-1e85-5fcd-b55e-3d1a44ef2e43.png">
[GtkSharp](https://www.mono-project.com/docs/gui/)

[お手軽Linux Guiアプリ開発　入門](https://qiita.com/tana_/items/a5e72aa30053a54e931f)
[お手軽Linux GUIアプリ開発　初級　前編](https://qiita.com/tana_/items/1b6ab825ae27e4173b29)
[お手軽Linux GUIアプリ開発　初級　後編](https://qiita.com/tana_/items/8f6d563fd43289983fa3)