C# WPF 初級編(1)
目次
◆ボタン
記述例
<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="ラジオボタン1" GroupName="RadioButton"
Command="{Binding RadioButton}" IsChecked="True"
CommandParameter="RadioButton">
</RadioButton>
ラジオボタン解説
-
<RadioButton>
:ラジオボタンを作成するための開始タグ。 -
Content="ラジオボタン1"
:ラジオボタンに表示されるラベルやテキストを指定。 -
GroupName="RadioButton"
: ラジオボタングループの識別名を指定。 -
Command="{Binding RadioButton}"
: ラジオボタンが選択されたときに実行されるコマンドをバインディング。 -
IsChecked="True"
: 初期状態で選択されているかどうかを指定。(この例では、「ラジオボタン1」が初期状態で選択されています。) -
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"
により、編集不可の状態にすることも可能です。