Windows GUIプログラミング入門9 ラベル、テキスト、選択系

# ■はじめに

引き続き色々なコントロールを使ってみます。

キーワード：Label, TextBox, TextBlock, CheckBox, ToggleButton, RadioButton, Expander, ComboBox, ListBox, CheckedListBox, アクセスキー

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

# ■開発環境
* Windows 10
* Visual Studio Community 2017  **※今回から2017です**
* .NET Framework 4.x

# ■作ってみる

## ◇新規プロジェクト作成

「Windowsクラシックデスクトップ」 - 「WPFアプリ」を選択します。
![wbg09-01.png](https://qiita-image-store.s3.amazonaws.com/0/142879/1562aabb-4f20-15de-d4e2-1ae51f19d57d.png)

`Grid`を`StackPanel`に変え、その中に`StackPanel`を2つ用意します。

```Xml:MainWindow.xaml
<Window x:Class="WpfApp09.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp09"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <StackPanel Orientation="Horizontal">
        </StackPanel>

        <StackPanel Orientation="Horizontal">
        </StackPanel>
    </StackPanel>
</Window>
```

## ◇ラベル, テキストボックス

`StackPanel`の中に`Label`と`TextBox`を配置します。
`Label`にはアクセスキーを設定することができます。
<kbd>Alt</kbd>を押しながらアクセスキーを押すと、指定したコントロールにフォーカスが移動します。
アクセスキーを設定するには、`Content`のアクセスキーにしたい文字の前にアンダースコアを追加します。
移動先のコントロールは`Target`で指定します。

書式: `Target="{Binding ElementName=`【移動先のコントロール名】`}"`

```Xml
<StackPanel Orientation="Horizontal">
    <Label Content="ユーザー(_U)" Target="{Binding ElementName=userName}" Width="80"/>
    <TextBox x:Name="userName" Text="たろう" Width="200" Margin="5"/>
</StackPanel>

<StackPanel Orientation="Horizontal">
    <Label Content="メモ(_M)" Target="{Binding ElementName=memo}" Width="80"/>
    <TextBox x:Name="memo" Text="ああああ" AcceptsReturn="True" AcceptsTab="True"
             TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" 
             Height="60" Width="200" Margin="5"/>
</StackPanel>
```

2つ目の`TextBox`は、複数行入力させるためのプロパティを指定しています。

■ Labelコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Content|共通|ラベルに表示する内容
Target|その他の設定|アクセスキー押下時にフォーカスを受け取るコントロール

■ TextBoxコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
HorizontalScrollBarVisibility|レイアウト|横スクロールバー
VerticalScrollBarVisibility|レイアウト|縦スクロールバー
AcceptsReturn|テキスト|Enterキーで改行するかどうか
AcceptsTab|テキスト|Tabキーでタブ文字を入力するかどうか
MaxLength|テキスト|入力可能な最大文字数
TextWrapping|テキスト|テキスト折り返し設定
Text|共通|テキストの内容

## ◇高機能ラベル, ON/OFF

続いて★の部分に以下を入力します。

```Xml
            ：
            ：
        </StackPanel>
        ★
    </StackPanel>
</Window>
```

```Xml:入力内容
<TextBlock Text="いいいいいいいい"/>
<TextBlock Text="太字 太字 太字" FontWeight="Bold" FontSize="16"/>
<TextBlock>ううううう</TextBlock>
<TextBlock Foreground="Blue">
    えええええええ<LineBreak/>
    おおおおおおおお
</TextBlock>
<TextBlock Text="かきくけこさしすせそ" TextWrapping="Wrap" Width="40"/>
<TextBlock>
    ABCD
    <Underline>EFGH</Underline>
    <Bold>IJKL</Bold>
    <Run Foreground="Green" FontWeight="Bold" FontSize="18">MNOP</Run>
    <Run Background="Pink" FontFamily="Meiryo">QRSTたちつてと</Run>
</TextBlock>

<StackPanel Orientation="Horizontal">
    <CheckBox Content="CheckBox" Margin="5"/>
    <CheckBox Content="CheckBox" IsChecked="True" Margin="5"/>
    <ToggleButton Content="トグルボタン" Margin="5"/>
    <ToggleButton Content="トグルボタン" IsChecked="True" Margin="5"/>
</StackPanel>

<Button x:Name="button" Content="次の画面"/>
```

`TextBlock`は文字装飾を設定できるラベルです。
太字にしたり改行したりできます。
`CheckBox`と`ToggleButton`はON/OFFを表せるコントロールです。
`ToggleButton`は標準ではツールボックスに表示されていないので、直接タグ入力してください。

![wbg09-02.png](https://qiita-image-store.s3.amazonaws.com/0/142879/15754552-8c1b-9b6c-bee7-abbea0135c4c.png)

■ TextBlockコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
FontWeight|テキスト|太字
TextWrapping|テキスト|折り返し
Text|共通|テキストの内容

■ CheckBoxコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Content|共通|チェックボックスの内容
IsChecked|共通|選択状態

■ ToggleButtonコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Content|共通|トグルボタンの内容
IsChecked|共通|選択状態

ここまでで実行してみます。
![wbg09-03.png](https://qiita-image-store.s3.amazonaws.com/0/142879/8a7eecf9-51d6-d842-e2f4-b870f921cc18.png)

<kbd><kbd>Alt</kbd> + <kbd>U</kbd></kbd>, <kbd><kbd>Alt</kbd> + <kbd>M</kbd></kbd>でそれぞれユーザーテキストボックス、メモテキストボックスにフォーカスが移動すること、メモテキストボックスの内容にタブ文字や改行を入力できることを確認してください。

画面を閉じて、プロジェクトに新しい項目「ウィンドウ(WPF)」を追加してください。
名前は`Window1.xaml`にします。

「次の画面」ボタンのクリック処理を作ります。

```Xml:MainWindow.xaml
<Button x:Name="button" Content="次の画面" Click="button_Click"/>
```

```CSharp:MainWindow.xaml.cs
private void button_Click(object sender, RoutedEventArgs e)
{
    new Window1().ShowDialog();
}
```

## ◇ラジオボタン, コンボボックス, リストボックス

`Window1`の画面を作ります。
`RadioButton`は、同じ`GroupName`の中で1つだけ選択状態にできるコントロールです。
`Expander`は、その中にあるコントロールを畳んで隠したり、展開したりできます。

`ComboBox`や`ListBox`の選択肢は`Items`プロパティのコレクションエディターから追加することができます。

`Items`プロパティの「`...`」ボタンを押します。
![wbg09-03_2.png](https://qiita-image-store.s3.amazonaws.com/0/142879/0ffafdf7-f37c-c086-1983-3f76cb6119f5.png)

コレクションエディターで追加するアイテムを選択し、「追加」ボタンを押します。
![wbg09-03_3.png](https://qiita-image-store.s3.amazonaws.com/0/142879/38d1686c-caa6-bf5c-61ee-6f4afae8d6e2.png)

右側でプロパティを設定します。
![wbg09-03_4.png](https://qiita-image-store.s3.amazonaws.com/0/142879/41036853-52aa-9478-611b-3acaf74927f2.png)

```Xml:Window1.xaml
<Window x:Class="WpfApp09.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp09"
        mc:Ignorable="d"
        Title="Window1" Height="300" Width="300">
    <StackPanel>
        <GroupBox Header="グループ1">
            <StackPanel Orientation="Horizontal">
                <RadioButton Content="ラジオボタン1" GroupName="A" IsChecked="True"/>
                <RadioButton Content="ラジオボタン2" GroupName="A"/>
                <RadioButton Content="ラジオボタン3" GroupName="A"/>
            </StackPanel>
        </GroupBox>
        
        <GroupBox Header="グループ2">
            <StackPanel Orientation="Horizontal">
                <RadioButton Content="ラジオボタン1" GroupName="B"/>
                <RadioButton Content="ラジオボタン2" GroupName="B" IsChecked="True"/>
                <RadioButton Content="ラジオボタン3" GroupName="B"/>
            </StackPanel>
        </GroupBox>
        
        <Expander Header="Expander" IsExpanded="True">
            <StackPanel Background="LightGreen">
                <ComboBox SelectedIndex="1" Margin="5">
                    <ComboBoxItem Content="あああ"/>
                    <ComboBoxItem Content="いいい"/>
                    <ComboBoxItem Content="うううううう"/>
                </ComboBox>
                <ListBox SelectedIndex="0" Height="60" Margin="5">
                    <ListBoxItem Content="かかか"/>
                    <ListBoxItem Content="きききき"/>
                    <ListBoxItem Content="くくく"/>
                    <ListBoxItem Content="けけけ"/>
                    <ListBoxItem Content="こここここ"/>
                </ListBox>

            </StackPanel>
        </Expander>

        <!-- CheckedListBox -->
        <ListBox SelectedIndex="1" Height="55" Margin="5">
            <CheckBox Content="さささ"/>
            <CheckBox Content="ししし"/>
            <CheckBox Content="すすすすす" IsChecked="True"/>
        </ListBox>
    </StackPanel>
</Window>
```

![wbg09-04.png](https://qiita-image-store.s3.amazonaws.com/0/142879/dd7d208a-3091-a815-6918-9873c3514aed.png)

■ RadioButtonコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Content|共通|ラジオボタンの内容
GroupName|共通|グループ名
IsChecked|共通|選択状態

■ ComboBoxコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
IsEditable|共通|編集可能かどうか
Items|共通|選択肢
SelectedIndex|共通|選択項目のインデックス。0が先頭。

■ ListBoxコントロールでよく使いそうなプロパティ

プロパティ|カテゴリ|備考
|:--|:--|:--|
Items|共通|選択肢
SelectedIndex|共通|選択項目のインデックス。0が先頭。
SelectionMode|その他の指定|単一選択や複数選択の設定

実行してみます。
MainWindowの「次の画面」ボタンを押してWindow1を表示します。
Expanderをクリックして中身を閉じることができます。
![wbg09-05.png](https://qiita-image-store.s3.amazonaws.com/0/142879/16cf1323-dc05-925a-77eb-4db1734e12ad.png)

おしまい

---

# ■参考サイト
* [Label クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.label.aspx)
* [TextBox クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.textbox.aspx)
* [TextBlock クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.textblock.aspx)
* [CheckBox クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.checkbox.aspx)
* [ToggleButton クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.primitives.togglebutton.aspx)
* [GroupBox クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.groupbox.aspx)
* [RadioButton クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.radiobutton.aspx)
* [Expander クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.expander.aspx)
* [ComboBox クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.combobox.aspx)
* [ListBox クラス - MSDN](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.listbox.aspx)

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](http://qiita.com/Kosen-amai/items/f7b6f5e4aa2cbd04db63 "Windows GUIプログラミング入門8.1 Visual Studio 2017インストール") 　 [次の記事 ＞](http://qiita.com/Kosen-amai/items/792c59392e72e65316bd "Windows GUIプログラミング入門10 設定保存(1)")