Windows GUIプログラミング入門19 NuGet(1), 通知領域（タスクトレイ）

# ■はじめに

今回は`NuGet`のライブラリを使って通知領域（タスクトレイ）にアイコンを表示するサンプルを作ります。
`NuGet`はライブラリの管理システムです。

キーワード：NuGet, タスクトレイ, 通知領域, トレイアイコン, Grid分割, レイアウト, 右クリックメニュー

# ■開発環境

* Windows 10
* Visual Studio Community 2019 **※今回から2019です**
* .NET Framework 4.x

# ■作ってみる

## ◇プロジェクトの作成

「新しいプロジェクトの作成」 - 「WPFアプリ」でプロジェクト名は`NotifySample`にしました。

![bg19-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/dfc3277f-214c-bf5d-231e-c9f9690dd44d.png)

![bg19-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2dcadff4-ceb1-da8d-fbc0-0c6092cd207c.png)

![bg19-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7e59e818-eb46-e8d6-f7da-6fb81bb555c1.png)

![bg19-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7a1797a7-ed62-5895-d893-d3eed5919b3a.png)

## ◇NuGetでライブラリをインストール

NuGetで通知領域にアイコンを表示するためのライブラリをインストールします。
プロジェクトを右クリックし、「NuGetパッケージの管理」を選択します。

![bg19-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d546c597-7566-92e1-d618-d16acf700e98.png)

「参照」タブを選択し、検索ボックスに`Hardcodet.NotifyIcon.Wpf`を入力し、`Hardcodet.NotifyIcon.Wpf`をインストールします。
依存関係の部分は要チェック。必要な.NET Frameworkのバージョンや、動作するために必要な他のライブラリが書いてあったりします。

![bg19-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c8cdc737-934b-0be6-1fa0-aca8e852bb90.png)

![bg19-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9e5995dc-6741-9dfd-ae04-b484faca4d0f.png)

インストールしたライブラリは「インストール済み」のタブに表示されます。
インストール済みのライブラリで新バージョンがある場合は「更新プログラム」のタブに表示されます。下の図では1つ更新があることがわかります。

![bg19-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fa594a8e-a57f-c019-daa6-f4f469d14e76.png)

## ◇画面の作成

画面の白い部分をクリックして`Grid`を選択状態にします。
画面の左端付近にマウスカーソルを置き、`+`マークが出たらクリックしてGridを分割します。

![bg19-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/dda1f10b-1e2c-a0ca-8c95-aac90a3581cd.png)

![bg19-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c63f669f-6d95-d73e-4561-73c937f039ec.png)

`Button`をGridの上の行に、`Border`をGridの下の行にドラッグ＆ドロップします。

![bg19-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cf0bbc74-3b34-5bb3-fdbb-b28f68901e70.png)

`Button`と`Border`をそれぞれ右クリック、「レイアウト」 - 「すべてリセット」を実行します。

![bg19-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/180ecb97-4467-775e-3b63-de60edb877c4.png)

## ◇トレイアイコンの追加

Windowの定義に`xmlns:tb="http://www.hardcodet.net/taskbar"`を追加します。

```Xml
<Window x:Class="NotifySample.MainWindow"
:
        xmlns:tb="http://www.hardcodet.net/taskbar"
:
```

`<tb:TaskbarIcon/>`を追加します。

```Xml
:
</Grid.RowDefinitions>

<tb:TaskbarIcon/>

<Button Content="Button"/>
:
```

ソリューションエクスプローラーの`Properties`を開き、`Resources`をダブルクリックします。

![bg19-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e724d22e-5991-2be7-e163-1153532b587d.png)

「リソースの追加」のドロップダウンを開き、「新しいアイコンの追加」を選択します。

![bg19-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/32f78642-23cb-4f82-7c8e-d99c89d915f1.png)

そのまま追加します。

![bg19-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d5d9fd34-66d3-a195-8b81-67b16c853091.png)

![bg19-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2f5cbc05-0e74-09d5-e1d3-44d30d9462e2.png)

ソリューションエクスプローラーで「Resources」の「Icon1.ico」を選択し、プロパティウィンドウの「ビルドアクション」に「Resource」を選択します。

![bg19-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f3998a25-c4c9-803e-10d8-dc89ebb91a50.png)

XAMLエディタで`<tb:TaskbarIcon/>`を選択し、プロパティウィンドウで「NotifyIcon」 - 「IconSource」から`Icon1.ico`を選択します。
「ToolTipText」に`たすくとれい`を入力します。

![bg19-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d33497fa-352c-dcf9-c73e-c284d10705c3.png)

「その他の指定」 - 「ContextMenu」の「新規作成」ボタンを押します。

![bg19-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0f3d6d4c-f4ac-0f2b-9032-4dddf6080a33.png)

「ContextMenu」 - 「Items」の「...」ボタンを押します。

![bg19-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cc182885-8c71-4f74-f761-b5cf943907bd.png)

コレクションエディターで選択肢から「MenuItem」を選択し、「追加」ボタンを押します。
プロパティから「Header」に`表示/隠す`を入力して「OK」ボタンを押します。

![bg19-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d7e7db04-3ea5-d72b-e957-175fab5d1d01.png)

ここまででTaskbarIconのXAMLは以下のようになっています。

```Xml
<tb:TaskbarIcon IconSource="Resources/Icon1.ico" ToolTipText="たすくとれい">
    <tb:TaskbarIcon.ContextMenu>
        <ContextMenu>
            <MenuItem Header="表示/隠す"/>
        </ContextMenu>
    </tb:TaskbarIcon.ContextMenu>
</tb:TaskbarIcon>
```

XAMLエディタでMenuItemを選択し、プロパティウィンドウで稲妻マークを選択し、「Click」の欄をダブルクリックします。

![bg19-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/2aa02537-b4d3-a12b-ecfb-08852f814146.png)

メニュークリック時の処理を書きます。

```CSharp
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
    if (this.Visibility == Visibility.Hidden)
    {
        this.Show();
    }
    else
    {
        this.Hide();
    }
}
```


# ■動かしてみる

実行してみます。

![bg19-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/eb93a344-d454-043c-e9ba-e88f0dd83dee.png)

アイコンを右クリックします。

![bg19-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/3f898aa3-ed21-b8df-1e66-0df646359b9f.png)

メニューの「表示/隠す」をクリックします。

![bg19-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/55c8d8c0-e9d2-c991-1cd2-894d9748a05b.png)

画面が隠れました。

![bg19-28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a89f4d89-aaa1-8cb4-6e4f-480fbb2bb286.png)

おしまい

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](https://qiita.com/Kosen-amai/items/966bcbe2b0652cd512cc "Windows GUIプログラミング入門18 電卓") 　 [次の記事 ＞](https://qiita.com/Kosen-amai/items/c5cecf81240407693cda "Windows GUIプログラミング入門20 NuGet(2), コントロール集")