Windows GUIプログラミング入門20 NuGet(2), コントロール集

# ■はじめに

今回は`NuGet`で`Extended WPF Toolkit`というコントロール集をインストールして使います。

キーワード：NuGet, CheckListBox, CalculatorUpDown, NumericUpDown, TimePicker, WatermarkTextBox, Placeholder, プレースホルダ

[注意]
これまでの回で説明済みの操作方法等は、説明を省略したり簡略化している場合があります。

# ■開発環境

* Windows 10
* Visual Studio Community 2019
* .NET Framework 4.x

# ■作ってみる

## ◇ツールボックス表示用プロジェクトの作成

`Lib_ExtendedWPFToolkit`の名前でWPFプロジェクトを作成します。
ツールボックスのコントロール表示元になります。

![bg20-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c6b5dddb-4726-07ef-b2b9-633c826ff2cb.png)

NuGetで`Extended.WPF.Toolkit`をインストールします。

![bg20-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/304dcd3f-a5e4-1e48-e051-27699541af88.png)

ツールボックス内で右クリックし、「タブの追加」を選択します。

![bg20-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6f1fd475-f2bb-0c23-ab6f-c24cf01c85bc.png)

タブの名前を付けます。ここでは`Extended WPF Toolkit`にしました。

![bg20-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/35d6f1d6-f6b0-9af7-e1f2-068cece772c3.png)

追加したタブを右クリックし、「アイテムの選択」を選択します。

![bg20-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a8dd9aff-5b4b-b02b-fee1-e39034b9b2e4.png)

「ツールボックスアイテムの選択」画面の「WPFコンポーネント」タブで「参照」ボタンを押します。

![bg20-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b79965f5-a023-1f68-4325-3a12d027b2a3.png)

`Lib_ExtendedWPFToolkit\packages\Extended.Wpf.Toolkit.3.5.0\lib\net40`フォルダを開き、`Xceed.Wpf.Toolkit.dll`を選択します。

※パスはお使いのExtended WPF Toolkitのバージョンに読み替えてください。

![bg20-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/abafa4a2-3ea3-1ede-718c-0b80d9670b88.png)

OKで閉じます。

![bg20-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b1ad5353-f543-37f6-80de-a9ce80a0e7ef.png)

コントロールが表示されました。

![bg20-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b99986a2-8112-51eb-cc63-d77ab3fc1bad.png)

ツールボックスにコントロールを表示するためのプロジェクトでの作業はこれで完了です。
プロジェクトを保存して終了してください。

## ◇コントロール利用プロジェクトの作成

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

WPFプロジェクトを新規に作成します。ここでは`ToolkitSample`という名前にしました。

![bg20-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0da54091-9517-1df2-0165-27baac11c180.png)

### ◎コントロールの配置

Gridを2列に分割し、ツールボックスの「すべてのWPFコントロール」から「WrapPanel」をGridの右側に、先ほど追加した「Extended WPF Toolkit」から「CheckListBox」をGridの左側にドラッグ＆ドロップします。

![bg20-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/daa8c857-b93e-c353-f72f-85f73c42ee75.png)

画面デザイナでCheckListBoxとWrapPanelをそれぞれ右クリックし「レイアウト」 - 「すべてリセット」を選択します。

ツールボックスのExtended WPF Toolkitから`CalculatorUpDown`, `TimePicker`, `WatermarkTextBox`をWrapPanelの上にドラッグ＆ドロップします。

![bg20-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6e646260-d1e2-32c7-d2a7-28727bca0df8.png)

### ◎CheckListBoxの設定

CheckListBoxを選択し、プロパティの「共通」 - 「Items」の「...」ボタンを押します。

![bg20-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f3e79f9e-009b-fbbb-7094-e5782446b117.png)

追加する型で「その他の型」を選択します。

![bg20-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/02ca2674-7e55-1450-7208-208c4d422b3f.png)

検索ボックスに`selector`を入力し、`SelectorItem`を選択します。

![bg20-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6c61b7e0-d354-e285-7cdf-4bab862a243c.png)

3つ`SelectorItem`を追加し、「共通」 - 「Content」プロパティにそれぞれ`りんご`, `みかん`, `いちご`を設定します。
3つ目の「IsSelected」だけチェックを付けます。

![bg20-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/36811daa-eeb3-9528-3f0b-1e23ac65f46c.png)

![bg20-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1fee10c6-c5fe-3cb6-b176-5aa805234352.png)

### ◎テキスト系コントロールの設定

WrapPanelに配置したコントロールのプロパティを設定します。

![bg20-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/66a7a62f-b80a-0f97-aa9a-8a9724bf8883.png)

```Xml
<xctk:CalculatorUpDown Width="100" Watermark="数値"/>
<xctk:TimePicker Width="100" Watermark="時刻"/>
<xctk:WatermarkTextBox Height="23" Watermark="文字列" Width="120"/>
```

`Watermark`プロパティは未入力でフォーカスがない時に薄く表示されるテキストです。
プレースホルダテキストとも呼ばれます。
フォーカスがあるときは消えてしまうため、常に表示しておきたい内容はラベルとして別に用意しましょう。

**プレースホルダの使用例**
![bg20-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7230beb9-c2e3-e95e-212b-9d0fa53323cd.png)
![bg20-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d9859bbd-891f-5595-2090-e53c91d46519.png)

参考サイト)
* [入力フォームのプレースホルダを使ってはいけない – U-Site](https://u-site.jp/alertbox/form-design-placeholders)
* [プレースホルダーについて考える — Website Usability Info](https://website-usability.info/2013/03/entry_130309.html)



次に時刻の書式を設定します。
画面デザイナでTimePickerを選択し、プロパティの「その他の指定」 - 「Format」で`Custom`を選択し、「FormatString」に`HH:mm`を入力します。

![bg20-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/debe91a8-e0cb-bc33-3458-30ed3e7e7f73.png)

# ■動かしてみる

![bg20-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/f21fcf83-398b-84ee-4da3-99e5ec08a1c3.png)

CalculatorUpDownのドロップダウンを開くと電卓が表示されます。

![bg20-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/554914f6-b5b5-3225-1b06-dadd59c79875.png)

![bg20-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b64e0587-7beb-cd09-d384-047900db3789.png)

おしまい

---

# ■参考サイト
* [GitHub - xceedsoftware/wpftoolkit](https://github.com/xceedsoftware/wpftoolkit)

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](https://qiita.com/Kosen-amai/items/9533ce90e61b4873aafb "Windows GUIプログラミング入門19 NuGet(1), 通知領域（タスクトレイ）") 　 [次の記事 ＞](https://qiita.com/Kosen-amai/items/635897faa0c064d846c1 "Windows GUIプログラミング入門21 NuGet(3), ブラウザコントロール")