📢 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>