📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。(旧サイトでは記事を追加しておりません)
| 84行目: | 84行目: | ||
* テスト自動化 | * テスト自動化 | ||
*: 自動化テストツールでUIコントロールを特定する場合にも使用されることがある。 | *: 自動化テストツールでUIコントロールを特定する場合にも使用されることがある。 | ||
<br> | |||
==== Content ==== | |||
ボタン内に表示されるコンテンツを指定する。<br> | |||
テキスト、画像、その他のUIエレメントを含めることができる。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Content="Click me" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== Command ==== | |||
ボタンがクリックされた時に実行されるコマンドを指定する。<br> | |||
一般的に、ビューモデルと連携して使用する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Command="{Binding MyCommand}" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== CommandParameter ==== | |||
Command属性で指定されたコマンドに渡されるパラメータを指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Command="{Binding MyCommand}" CommandParameter="SomeValue" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== IsDefault ==== | |||
<code>true</code>を指定する場合、このボタンがフォーム内のデフォルトボタンになる。<br> | |||
[Enter]キーを押下した時に自動的にクリックされる。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button IsDefault="True" Content="OK" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== IsCancel ==== | |||
<code>true</code>に指定する場合、このボタンがキャンセルボタンになる。<br> | |||
[Escape]キーを押下した時に自動的にクリックされる。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button IsCancel="True" Content="Cancel" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== ClickMode ==== | |||
ボタンがクリックされたと見なされるタイミングを指定する。<br> | |||
<br> | |||
以下に示すいずれかを選択することができる。<br> | |||
* Press (押下された時) | |||
* Release (離された時) | |||
* Hover (ホバー時) | |||
<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button ClickMode="Press" Content="Click Me" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== Background ==== | |||
ボタンの背景色を指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Background="Blue" Content="Blue Button" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== Foreground ==== | |||
ボタンのテキスト色を指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Foreground="White" Content="White Text" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== BorderBrush ==== | |||
ボタンの境界線の色を指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button BorderBrush="Red" Content="Red Border" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== BorderThickness ==== | |||
ボタンの境界線の太さを指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button BorderThickness="2" Content="Thick Border" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== CornerRadius ==== | |||
ボタンの角の丸みを指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button CornerRadius="10" Content="Rounded Corners" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== Padding ==== | |||
ボタンの内部余白を指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Padding="10,5" Content="Padded Button" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== HorizontalContentAlignment ==== | |||
ボタン内のコンテンツの水平方向の配置を指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button HorizontalContentAlignment="Center" Content="Centered" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== VerticalContentAlignment ==== | |||
ボタン内のコンテンツの垂直方向の配置を指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button VerticalContentAlignment="Center" Content="Centered" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== FontFamily ==== | |||
ボタンのテキストのフォントファミリーを指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button FontFamily="Arial" Content="Arial Font" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== FontSize ==== | |||
ボタンのテキストのフォントサイズを指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button FontSize="16" Content="16pt Text" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== FontWeight ==== | |||
ボタンのテキストのフォントの太さを指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button FontWeight="Bold" Content="Bold Text" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== IsEnabled ==== | |||
ボタンの有効 / 無効状態を指定する。<br> | |||
<code>false</code>に指定する場合、ボタンは非活性 (クリックが無効) となる。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button IsEnabled="False" Content="Disabled Button" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== Opacity ==== | |||
ボタンの不透明度を0.0 (透明) から 1.0 (不透明) の間で指定する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Opacity="0.5" Content="Semi-transparent" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== Tag ==== | |||
ボタンに関連付けられた任意のデータを格納するために使用する。<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Tag="CustomData" Content="Tagged Button" /> | |||
</syntaxhighlight> | |||
<br> | |||
==== 使用例 ==== | |||
以下の例では、緑色の背景に白いテキストを持つSubmitボタンを定義している。<br> | |||
ボタンは丸みを帯びており、太字のテキストを使用している。<br> | |||
また、ビューモデルのSubmitCommandにバインドされており、CanSubmitプロパティに基づいて有効 / 無効が切り替わる。<br> | |||
<br> | |||
<syntaxhighlight lang="xml"> | |||
<Button Content="Submit" | |||
Command="{Binding SubmitCommand}" | |||
IsEnabled="{Binding CanSubmit}" | |||
Background="Green" | |||
Foreground="White" | |||
Padding="10,5" | |||
CornerRadius="5" | |||
FontWeight="Bold"> | |||
</Button> | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||