MochiuWiki : SUSE, EC, PCB

「Avalonia UI - Button」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集
ビジュアルウィキテキスト
編集の要約なし
細 文字列「__FORCETOC__」を「{{#seo: |title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki |keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板 |description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{…
 
(同じ利用者による、間の3版が非表示)
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>


220行目: 368行目:


== プロパティ ==
== プロパティ ==
Buttonコントロールのプロパティにおいて、使用される頻度の高いプロパティを以下に示す。<br>
Buttonコントロールには多くのプロパティが存在する。<br>
<br>
ボタンコントロールのプロパティを使用することにより、C#のコードからAvalonia UIのボタンの外観や動作を動的に操作することができる。<br>
例えば、ユーザのアクションやアプリケーションの状態に応じてボタンの外観や機能を変更することができる。<br>
<br>
視覚的な要素から機能的な面まで、幅広い調整が可能である。<br>
特に重要なのは、Content、Command、IsEnabled、Background、Foregroundのプロパティである。<br>
これらは頻繁に使用され、ボタンの基本的な外観と機能を定義するのに役立つ。<br>
<br>
<br>
* <code>ClickMode</code>プロパティ
<center>
*: ボタンが押下された時、どのように反応するかを記述する。
{| class="wikitable" style="background-color:#fefefe;"
* <code>Command</code>プロパティ
|+ Buttonコントロールのプロパティ
*: ボタンが押下された時、呼び出される<code>ICommand</code>インターフェースのインスタンス。
|-
! style="background-color:#00ffff;" | プロパティ名
! style="background-color:#00ffff;" | データ型
! style="background-color:#00ffff;" | 説明
|-
| Content || object || ボタン内に表示されるコンテンツを取得または設定する。<br><br>例: <code>myButton.Content = "Click Me";</code>
|-
| Command || ICommand || ボタンが押下された時に実行されるコマンドを取得または設定する。<br>ボタンが押下された時、呼び出される<code>ICommand</code>インターフェースのインスタンス。<br><br>例: <code>myButton.Command = new RelayCommand(ExecuteMethod);</code>
|-
| CommandParameter || object || コマンドに渡されるパラメータを取得または設定する。<br><br>例: <code>myButton.CommandParameter = someObject;</code>
|-
| IsDefault || bool || ボタンがデフォルトボタンであるかどうかを示す値を取得または設定する。<br><br>例: <code>myButton.IsDefault = true;</code>
|-
| IsCancel || bool || ボタンがキャンセルボタンであるかどうかを示す値を取得または設定する。<br><br>例: <code>myButton.IsCancel = true;</code>
|-
| ClickMode || ClickMode || ボタンが押下されたと見なされるタイミングを取得または設定する。<br>(ボタンが押下された時、どのように反応するかを記述する。)<br><br>例: <code>myButton.ClickMode = ClickMode.Press;</code>
|-
| IsPressed || bool || ボタンが現在押されているかどうかを示す値を取得する。<br>(読み取り専用)<br><br>例: <code>bool isPressed = myButton.IsPressed;</code>
|-
| Background || IBrush || ボタンの背景を取得または設定する。<br><br>例: <code>myButton.Background = Brushes.Blue;</code>
|-
| Foreground || IBrush || ボタンの前景 (主にテキスト) の色を取得または設定する。<br><br>例: <code>myButton.Foreground = Brushes.White;</code>
|-
| BorderBrush || IBrush || ボタンの境界線の色を取得または設定する。<br><br>例: <code>myButton.BorderBrush = Brushes.Black;</code>
|-
| BorderThickness || Thickness || ボタンの境界線の太さを取得または設定する。<br><br>例: <code>myButton.BorderThickness = new Thickness(2);</code>
|-
| CornerRadius || CornerRadius || ボタンの角の丸みを取得または設定する。<br><br>例: <code>myButton.CornerRadius = new CornerRadius(5);</code>
|-
| Padding || Thickness || ボタンの内部余白を取得または設定する。<br><br>例: <code>myButton.Padding = new Thickness(5, 10);</code>
|-
| HorizontalContentAlignment || HorizontalAlignment || ボタン内のコンテンツの水平方向の配置を取得または設定する。<br><br>例: <code>myButton.HorizontalContentAlignment = HorizontalAlignment.Center;</code>
|-
| VerticalContentAlignment || VerticalAlignment || ボタン内のコンテンツの垂直方向の配置を取得または設定する。<br><br>例: <code>myButton.VerticalContentAlignment = VerticalAlignment.Center;</code>
|-
| FontFamily || FontFamily || ボタンのテキストのフォントファミリーを取得または設定する。<br><br>例: <code>myButton.FontFamily = new FontFamily("Arial");</code>
|-
| FontSize || double || ボタンのテキストのフォントサイズを取得または設定する。<br><br>例: <code>myButton.FontSize = 16;</code>
|-
| FontWeight || FontWeight || ボタンのテキストのフォントの太さを取得または設定する。<br><br>例: <code>myButton.FontWeight = FontWeight.Bold;</code>
|-
| IsEnabled || bool || ボタンが有効かどうかを示す値を取得または設定する。<br><br>例: <code>myButton.IsEnabled = false;</code>
|-
| Opacity || double || ボタンの不透明度を取得または設定する。<br><br>例: <code>myButton.Opacity = 0.5;</code>
|-
| Tag || object || ボタンに関連付けられた任意のデータを取得または設定する。<br><br>例: <code>myButton.Tag = someObject;</code>
|}
</center>
<br>
==== 使用例 ====
以下の例では、ボタンの外観を初期化して、クリックイベントを設定している。<br>
ボタンが押下された時、そのコンテンツが変更されて無効化している。<br>
<br>
<syntaxhighlight lang="c#">
public class MainWindow : Window
{
    private Button myButton;
    public MainWindow()
    {
      InitializeComponent();
      myButton = this.FindControl<Button>("MyButton");
      // ボタンのプロパティを設定
      myButton.Content      = "Click Me";
      myButton.Background  = Brushes.Blue;
      myButton.Foreground  = Brushes.White;
      myButton.FontSize    = 16;
      myButton.Padding      = new Thickness(10);
      myButton.CornerRadius = new CornerRadius(5);
      // クリックイベントを設定
      myButton.Click += MyButton_Click;
    }
    private void MyButton_Click(object sender, RoutedEventArgs e)
    {
      // ボタンがクリックされた時の処理
      myButton.Content = "Clicked!";
      myButton.IsEnabled = false;
    }
}
</syntaxhighlight>
<br><br>
<br><br>


330行目: 567行目:
<br><br>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}


__FORCETOC__
__FORCETOC__
[[カテゴリ:C_Sharp]]
[[カテゴリ:C_Sharp]]
「http://mochiuwiki.e2.valueserver.jp/index.php?title=Avalonia_UI_-_Button」から取得