C# WPF 初級編（１）

目次

ボタン
チェックボックス
ラジオボタン
コンボボックス
テキストボックス

◆ボタン

記述例

<Button  Content="ボタン"Height="45" Width="120" Background="#1C7FD8" Foreground="#F7F7F7" 
         FontSize="20" FontWeight="Bold">
    <Button.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="CornerRadius" Value="3"/>
        </Style>
    </Button.Resources>
</Button>

ボタン解説

Content：ボタンに表示されるテキストまたはコンテンツを指定。
Height, Width：ボタンの高さと幅を指定。
Background：ボタンの背景色を指定。（ここでは #1C7FD8を使用しています。）
Foreground：テキストの色を指定。（ここでは #F7F7F7を使用しています。）
FontSize：フォントサイズを指定します。
FontWeight：ボタンのフォントの太さを指定します。ここでは太字 (Bold) に設定されています。
Button.Resources：TargetType="{x:Type Border}" によって、ボタンの境界に対するスタイルを定義。（ここでは、CornerRadius プロパティを使用してボーダーの角を丸くしています。）

◆チェックボックス

記述例

<CheckBox Content="チェックボックス" IsChecked="{Binding IsChecked}" />

チェックボックス解説

<CheckBox>：チェックボックスの開始タグ。
Content="チェックボックス"：チェックボックスに表示されるラベルやテキストを指定。
IsChecked="{Binding IsChecked}"：チェック状態をデータバインディング。（IsChecked プロパティは ViewModel のプロパティにバインドされており、このプロパティが変更されると、チェックボックスの表示も同期して変更されます。）

◆ラジオボタン

記述例

<RadioButton Content="ラジオボタン１" GroupName="RadioButton" 
     Command="{Binding RadioButton}" IsChecked="True" 
     CommandParameter="RadioButton">
</RadioButton>

ラジオボタン解説

<RadioButton>：ラジオボタンを作成するための開始タグ。
Content="ラジオボタン１"：ラジオボタンに表示されるラベルやテキストを指定。
GroupName="RadioButton": ラジオボタングループの識別名を指定。
Command="{Binding RadioButton}": ラジオボタンが選択されたときに実行されるコマンドをバインディング。
IsChecked="True": 初期状態で選択されているかどうかを指定。（この例では、「ラジオボタン１」が初期状態で選択されています。）
CommandParameter="RadioButton": コマンドが実行された際に渡されるパラメータを指定。
今回のテンプレートでは一つのラジオボタンしか例に挙げていませんが、一般的な UI デザインでは、同じグループ内で複数の選択肢が必要な場面が多いです。

◆コンボボックス

記述例

<ComboBox FontSize="20" Height="45" Width="120">
    <ComboBoxItem Content=" 00" />
    <ComboBoxItem Content=" 01" />
    <ComboBoxItem Content=" 02" />
    <ComboBoxItem Content=" 03" />
</ComboBox>

コンボボックス解説

<ComboBox>：コンボボックスを作成するための開始タグ。
FontSize="20"：コンボボックス内のテキストのフォントサイズを指定。
Height="45", Width="120"：コンボボックスの高さと幅を指定。
<ComboBoxItem>：コンボボックス内の各項目を表す要素。
Content=" 00", Content=" 01", Content=" 02", Content=" 03"：アイテムの表示テキストを指定。
選択結果は、バインディングやイベントハンドリングを使用してアプリケーション内で利用することも可能です。

▽アイテムをバインディングする

<ComboBox FontSize="20" Height="45" Width="120"
    ItemsSource="{Binding ItemList}" 
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
    DisplayMemberPath="PropertyNameToShow"
    SelectedValuePath="PropertyNameToUse"/>

FontSize="20", Height="45" Width="120": フォントサイズ、高さ、幅を指定。
ItemsSource="{Binding ItemList}"：コンボボックスに表示されるアイテムのコレクションを指定。（ItemList は ViewModel 内のプロパティで、このプロパティは ComboBox の表示アイテムを定義しています。）
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"：コンボボックスで選択されたアイテムをバインディング。（Mode=TwoWay は、ViewModel からの変更がコンボボックスにも反映されるようにするためのバインディングモードです。）
DisplayMemberPath="PropertyNameToShow"：アイテムが表示されるときに表示されるプロパティの名前を指定。
SelectedValuePath="PropertyNameToUse"：選択されたアイテムの値として使用されるプロパティの名前を指定。

◆テキストボックス

記述例

<TextBox x:Name="TextBox1" Background="#F7F7F7" Width="260" FontSize="20" Foreground="Black">
    <TextBox.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="CornerRadius" Value="2"/>
        </Style>
    </TextBox.Resources>
</TextBox>

テキストボックス解説

x:Name="TextBox1"：テキストボックスに名前を指定。（これにより、コードビハインドでこのコントロールにアクセスできます。）
Background: テキストボックスの背景色を指定。（ここでは #F7F7F7を使用しています。）
Foreground：テキストの色を指定。
<TextBox.Resources>：テキストボックス内のリソースを指定。（ここでは、Border コントロールに対するスタイルが定義されています。）
<Style TargetType="{x:Type Border}">：Border コントロールに対するスタイルが開始されています。
<Setter Property="CornerRadius" Value="2"/>：Border コントロールの角を丸くするためのスタイルの設定。
IsEnabled="False"により、編集不可の状態にすることも可能です。

参考

WPF Tips集（～するには）