Windows GUIプログラミング入門8 画像、ボタン

# ■はじめに
今回は画像の表示と各種ボタンの使い方をやります。

キーワード：Image, Resources, ImageButton, 画像付きボタン, RepeatButton, 長押しボタン, HyperlinkButton, リンクボタン

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

# ■開発環境
* Windows 10
* Visual Studio Community 2015 Update 3
* .NET Framework 4.x

# ■作ってみる

## ◇Image

まずは画像の表示をやります。
![star.png](https://qiita-image-store.s3.amazonaws.com/0/142879/e3d31c2b-599b-e863-de5c-b3936f06ab1c.png) ←この画像を保存して使ってください。
ファイル名は `star.png` にします。


ソリューションエクスプローラーで「Properties」を開いて「Resources.resx」をダブルクリックします。
「リソースの追加」の`▼`でドロップダウンから「既存のファイルの追加」で `star.png` を選択します。
![wbg8-01.png](https://qiita-image-store.s3.amazonaws.com/0/142879/cae83a1c-fc4e-60ba-08dd-df9c902b9013.png)

画像が追加されました。
ソリューションエクスプローラーの方も`Resources`フォルダが作成され、`star.png` が追加されています。
![wbg8-02.png](https://qiita-image-store.s3.amazonaws.com/0/142879/1ede9733-0fab-1eb3-764b-6ec83c281d54.png)

`star.png` を選択し、プロパティの「ビルドアクション」を `Resource` に設定します。
![wbg8-03.png](https://qiita-image-store.s3.amazonaws.com/0/142879/5b5e8aba-16af-8705-ef5a-284da1b06231.png)

ツールボックスからImageコントロールを画面デザイナにドラッグ＆ドロップします。
Imageコントロールの`Source`プロパティのドロップダウンから `star.png` を選択します。
![wbg8-04.png](https://qiita-image-store.s3.amazonaws.com/0/142879/122e48a5-2178-b80e-0333-270a2102f5b8.png)

画面デザイナに反映されました。
![wbg8-05.png](https://qiita-image-store.s3.amazonaws.com/0/142879/779223e4-91de-bf28-3e57-4acca21f234d.png)

参考）Imageコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Source|共通|イメージファイル
Stretch|共通|イメージ引き伸ばし方法（None/Fill/Uniform/UniformToFill）[※参考](https://msdn.microsoft.com/ja-jp/library/system.windows.media.stretch.aspx "Stretch 列挙型 - MSDN")

## ◇Button

次はボタンです。普通のは散々使ってきたので画像付きボタンを作ります。

ドキュメントアウトラインの「Grid」を右クリックし、「レイアウトの種類の変更」 - 「StackPanel」を選択します。
![wbg8-06.png](https://qiita-image-store.s3.amazonaws.com/0/142879/630b2a5d-a710-18b0-5a85-0f741fafebfb.png)

ボタンを2つ追加し、以下のようにプロパティを設定します。

```Xml
<Button Content="Button" Height="30" Width="100" Margin="5"/>
<Button Content="Button" Height="30" Width="100" Margin="5"/>
```

下のボタンに `StackPanel`をドラッグ＆ドロップします。
![wbg8-07.png](https://qiita-image-store.s3.amazonaws.com/0/142879/7b7ab435-574d-ffe4-d307-20b4b79d48db.png)

StackPanel追加後
![wbg8-08.png](https://qiita-image-store.s3.amazonaws.com/0/142879/4ef3b19b-25d0-4c5b-f032-0b7e58bec577.png)

StackPanelの`Orientatil`を`Horizontal`に設定します。
![wbg8-09.png](https://qiita-image-store.s3.amazonaws.com/0/142879/ba3f548f-025d-6ad9-57e5-8574cd124852.png)

ボタンの中の`StackPanel`に`Image`をドラッグ＆ドロップします。
画面デザイナだとわかりづらいので、ドキュメントアウトラインの方にドロップします。
![wbg8-10.png](https://qiita-image-store.s3.amazonaws.com/0/142879/423e4c26-1177-5dfe-88b3-2e2a39e2e771.png)

`StackPanel`に`TextBlock`をドロップします。
![wbg8-11.png](https://qiita-image-store.s3.amazonaws.com/0/142879/dac4842c-2907-54ee-4a19-77fbcb4af504.png)

`Image`の`Source`プロパティに`star.png`を設定、不要なプロパティを削除。
`TextBlock`の方も以下のように設定します。

```Xml
<Button Content="Button" Height="30" Width="100" Margin="5"/>
<Button Height="30" Width="100" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Image Source="Resources/star.png"/>
        <TextBlock Text="ボタン" VerticalAlignment="Center"/>
    </StackPanel>
</Button>
```

画像付きボタンの出来上がり。
![wbg8-12.png](https://qiita-image-store.s3.amazonaws.com/0/142879/cc299ab7-6bb0-114e-7b5a-470d9a5b4ca8.png)

参考）Buttonコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Content|共通|ボタンに表示する内容
IsCancel|共通|キャンセルボタンにする（`Esc`キーで押した事になる）
IsDefault|共通|デフォルトボタンにする（`Enter`キーで押した事になる）


## ◇RepeatButton

押し続けることで連続的にクリックイベントが発生する長押しボタンです。
`RepeatButton`はツールボックスには無いのでタグ入力します。
![wbg8-13.png](https://qiita-image-store.s3.amazonaws.com/0/142879/db1de2cf-569e-8ec8-2b17-563472fca949.png)

3つのボタンに同じイベントハンドラを設定します。

```Xml
<RepeatButton Content="リピート1" Width="120" Click="RepeatButton_Click"/>
<RepeatButton Content="リピート2" Width="120" Delay="1000" Click="RepeatButton_Click"/>
<RepeatButton Content="リピート3" Width="120" Interval="500" Click="RepeatButton_Click"/>
<TextBlock x:Name="repeatText" Text="1" HorizontalAlignment="Center"/>
```

```CSharp
private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
    repeatText.Text = (int.Parse(repeatText.Text) + 1).ToString();
}
```

実行してみます。
ボタンを押し続けると下の数字がカウントアップしていきます。
「リピート2」ボタンはボタンを押してから1秒ぐらい経ってからカウントアップが開始します。
「リピート3」ボタンは1秒に2回ぐらいの間隔でカウントアップしていきます。
![wbg8-14.png](https://qiita-image-store.s3.amazonaws.com/0/142879/21b2516d-f47c-d56f-0507-46a55335cc72.png)

参考）RepeatButtonコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Content|共通|ボタンに表示する内容
Delay|共通|ボタンを押してから繰り返し開始までの時間
Interval|共通|繰り返し間隔

## ◇HyperlinkButton

そんなコントロールは無いですが、こんな感じで作れます。
`TextBlock`を配置し、その中に`Hyperlink`タグを記述します。
`NavigateUri`プロパティに起動するURLを、
`RequestNavigate`イベントにリンククリック時の処理を記述します。
`Hyperlink`タグの開始～終了タグの中に表示するテキストを記述します。

```Xml
<TextBlock Margin="5">
    <Hyperlink NavigateUri="http://help.qiita.com/" RequestNavigate="Hyperlink_RequestNavigate">Qiitaヘルプ</Hyperlink>
</TextBlock>
```

![wbg8-15.png](https://qiita-image-store.s3.amazonaws.com/0/142879/999bd4de-e6ab-ef5f-1d22-611111a49e72.png)

リンククリック時の処理を記述します。

```Csharp
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
    // 絶対URIを起動
    System.Diagnostics.Process.Start(e.Uri.AbsoluteUri);
    // イベントを処理済みとしてマークする
    e.Handled = true;
}
```


## ◇色々なコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Opacity|外観|不透明度率。100で通常表示、0で完全に見えなくなる。
Visibility|外観|表示/非表示
IsEnabled|共通|有効/無効
IsTabStop|共通|TABキーでフォーカス移動するか
ToolTip|共通|ツールチップ（ヒント）
Width|レイアウト|幅
Height|レイアウト|高さ
HorizontalAlignment|レイアウト|水平位置
VerticalAlignment|レイアウト|垂直位置
Margin|レイアウト|コントロール間の余白
Padding|レイアウト|コントロール内部の余白
FontFamily|テキスト|フォント名
FontSize|テキスト|フォントサイズ
FontWeight|テキスト|太字

おしまい

---

# ■参考サイト

* [Image クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.image.aspx)
* [Button クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.button.aspx)
* [RepeatButton クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.primitives.repeatbutton.aspx)
* [Hyperlink クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.documents.hyperlink.aspx)

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](http://qiita.com/Kosen-amai/items/3ca00ebdbdee7776b67b "Windows GUIプログラミング入門7 システムカラー、画面レイアウト(3)") 　 [次の記事 ＞](http://qiita.com/Kosen-amai/items/f7b6f5e4aa2cbd04db63 "Windows GUIプログラミング入門8.1 Visual Studio 2017インストール")