LinuxとVisual Studio CodeでC# Guiアプリを開発する

# LinuxとVisual Studio CodeでC# Guiアプリを開発する

[2024/10 Rider 非商用利用なら無償になりました。](https://qiita.com/iota_11/items/08dba299854c918bbac9)

### 準備

#### .net coreをインストール

https://qiita.com/iota_11/items/9497baa2f06f67337628

#### GTK+-3.0をインストール

```
 $ sudo apt install libgtk-3-dev
```

#### Gtk3デザイナー　gladeをインストール

```
 $ sudo apt install glade
```

#### GTKテンプレートをインストール

```
$ dotnet new -i "GtkSharp.Template.CSharp"
```
https://github.com/dotnet/templating/wiki/Available-templates-for-dotnet-new

#### プロジェクトファイルを生成する

```
$ dotnet new gtkapp
$ dotnet new gtkdialog
$ dotnet new gtkwidget
$ dotnet new gtkwindow
```

## Visual Studio Codeにプラグインをインストール
####  vscode-solution-explorerからソリューションを作る

<img width="500" alt="Screenshot from 2022-11-02 21-52-09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/3c08bdbe-a716-1f7b-3f39-56a30489bddb.png">


<img width="250" alt="Screenshot from 2022-11-02 21-50-20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/51f6555f-df04-c88c-89cd-0e232aca51ed.png">


Visual Studio のようなSolutionを作ることができます。その中にプロジェクトを作成します。
Visual Studioのプロジェクトも読むことができます。

https://marketplace.visualstudio.com/items?itemName=fernandoescolar.vscode-solution-explorer



インテリセンス や シンタックスハイライト、定義へ移動 などの開発に必要な一通りの機能を提供してくれるプラグインです。

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp


他のプラグインはこの方が参考になります

https://zenn.dev/midoliy/articles/9e3cff958ff89ba151de

####  ソリューションを作成

<img width="500" alt="Screenshot from 2022-11-02 21-07-00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2c96d314-5724-14b3-7345-50e402093382.png">


####  Gtkテンプレートプロジェクトファイルを生成


GtkテンプレートがインストールされているとGtk Appが表示されます。
<img width="500" alt="Screenshot from 2022-11-02 21-08-46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/b6790298-916d-cdd4-9aea-468a7a5eb4a3.png">

表示されない場合はコマンドからテンプレートを生成します。

```
$ dotnet new gtkapp
```

Gtkテンプレートプロジェクトファイルが生成された

<img width="500" alt="Screenshot from 2022-11-02 21-10-49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/37e56922-26c4-5867-a385-5a75ad44f8aa.png">

testAppの右クリックしRunを押すとアプリが起動します。
<img width="500" alt="Screenshot from 2022-11-02 21-13-03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/8d7ec1f1-dbc4-9457-fcc7-c77f7c34fb40.png">




### イベントハンドラー自動生成ツールを使う

Visual Studioのようなボタンを押してイベント文を自動生成するような機能がGladeにはないので作りました。

https://qiita.com/iota_11/items/4e4d77e91ca3e2223cfe

ターミナルから実行します。

```
$ GladeGeneratorGUI -projectName プロジェクト名 -fileDir グレードファイルのパス/MainWindow.glade
```

fileDir　グレードファイルのフルパスを指定します。

このようなGUIアプリが起動します。
<img width="500" alt="Screenshot from 2022-11-02 21-31-07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6605ff0d-9138-4060-e835-b5f93c1343e1.png">

指定したボタンにチェックを入れ、出力ボタンを押すとイベント文が自動生成されます。
<img width="500" alt="Screenshot from 2022-11-02 21-28-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6e194bd1-13f2-3bf2-e023-5199089fbd79.png">


### Gladeファイルを編集する

Gladeアプリを起動させ、Gladeファイルを開きます。

#### イベントハンドラー名を記入
**On**を押すとインテリセンスが効きます
<img width="500" alt="Screenshot from 2022-11-02 21-16-06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/7a4b2815-f4dc-d879-a1b4-c86e1063a0a1.png">

#### ボタンに名前を記入
変数として生成されます。
<img width="500" alt="Screenshot from 2022-11-02 21-16-24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/8e8b6740-3f2e-284f-786d-291b60446511.png">

#### Gladeファイルを指定す、ターミナルから起動
書き出したいものにチェックを入れ、OutPutボタンを押すと自動生成される
<img width="500" alt="Screenshot from 2022-11-02 21-31-07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6605ff0d-9138-4060-e835-b5f93c1343e1.png">

イベントハンドラーが自動生成される。
<img width="500" alt="Screenshot from 2022-11-02 21-28-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6e194bd1-13f2-3bf2-e023-5199089fbd79.png">

変数の定義のファイルが自動生成される。**Partial Class**で生成される
<img width="500" alt="Screenshot from 2022-11-02 21-28-19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/bef606a9-d2ed-7833-a8f6-969fd5ca6d5f.png">


元のクラスも拡張クラスにしてください
classの前に**partial**を追加してください
<img width="500" alt="Screenshot from 2022-11-02 21-32-40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/28e51009-f647-7d05-347a-b7566bdbc9bf.png">



ボタンを押すとイベントが実行される
<img width="500" alt="Screenshot from 2022-11-02 21-33-15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2d392984-2c8d-2cc2-4e51-7c4083cd7090.png">

TreeView生成はこのツールを使います

https://qiita.com/iota_11/items/7074e21bf99cc56b69ce

[LinuxとVsCodeでC# GTK GUIアプリをデバッグする](https://qiita.com/iota_11/items/77ef0f2947ba0023d57c)に続く