Bamba news

WinUI3のButtonの使い方

WinUI3でButtonを用いた様々なボタンの表現を解説します。

Tags:#WinUI3

基本的なボタン

実装例

ボタンをクリックすると文字が表示される

buttonShowText.png

##　1.　XAML（ボタンのUI定義）

<Button x:Name="Button1" Content="ここをクリック" Click="Button_Clicked" Width="150" Height="40"/>
<TextBlock x:Name="ResultText" FontSize="16"/>

解説（XAML部分）：

  • <Button>：ボタン本体。押すことで Click イベントが発生。
  • Content：ボタン上に表示されるテキストや要素。
  • Click：クリック時に実行されるイベントハンドラーの指定。
  • TextBlock：クリック後にメッセージを表示する部分。

2. C#（ボタンの動作を定義）

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    ResultText.Text = "クリックされました";
}

解説（C#部分）：

  • Button_Clicked：XAMLで設定した、ボタンをクリックした時に実行されるメソッド。
  • ResultText.Text：XAMLで設定した変更後のテキスト。

ボタンを押せない状態にする

実装例

ボタンを再度クリックできなくする

ButtonDisabled.png

##　1.　XAML（ボタンのUI定義）

基本的なボタンと同じなので省略

2. C#（ボタンの動作を定義）

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    ResultText.Text = "クリックされました";
    Button1.IsEnabled = false;
}

解説（C#部分）：

  • IsEnabled：ボタンの利用可能状態（XAMLでも設定可）

Buttonでラップする

実装例

ボタンに表示される文章をContent以外で表現する

ButtonWrapText.png

##　1.　XAML（ボタンのUI定義）

<Button>これはとても長い文章ですこれはとても長い文章ですこれはとても長い文章ですこれはとても長い文章です</Button>

<Button HorizontalAlignment="Center" MaxWidth="240">
    <TextBlock Text="これはとても長い文章ですこれはとても長い文章ですこれはとても長い文章ですこれはとても長い文章です" TextWrapping="WrapWholeWords"/>
</Button>

解説（XAML部分）：

  • ボタンの横幅は文章の長さによって自動的に伸縮します。
  • ボタンの横幅を指定するときはTextWrapping="WrapWholeWords"を指定すると縦幅が伸びるようになります。

2. C#（ボタンの動作を定義）

動作は同じなので省略

Buttonにスタイルを適用する

実装例

スタイルを適用したボタンを表示する

ButtonStyle.png

##　1.　XAML（ボタンのUI定義）

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="12">
    <StackPanel.Resources>
        <Style x:Key="NewButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="LightBlue" />
        </Style>
    </StackPanel.Resources>
        
    <Button Style="{StaticResource AccentButtonStyle}" Content="強調" />
    <Button Style="{StaticResource NewButtonStyle}" Content="新しいスタイル"/>
</StackPanel>

解説（XAML部分）：

  • AccentButtonStyleは元々入っているスタイルです。
  • StackPanel.Resourcesで新しいスタイルを定義しています。
  • スタイルの定義はWindowでは定義できないので注意してください。

2. C#（ボタンの動作を定義）

動作は同じなので省略

まとめ

Buttonは基本となるUIですので、基本の使い方を抑えつつ、スタイルの適用などで華やかな画面をつくってみましょう。

参考：WinUI 3 Gallery（リンクはアプリのダウンロードページに飛びます）

関連する記事

WinUI3のDropDownButtonでコンテキストメニューが簡単に！

WinUI3でしか使えない、DropDownButtonを使ったメニューの作り方を解説します。

WinUI3のCheckBoxの使い方

WinUI3でCheckBoxを用いた様々な形のチェックボックスの使い方を解説します。

WinUI3のAutoSuggestBoxを使った検索ボックスの作り方【日本語読み対応】

日本語の「読み（ひらがな）」に対応した検索機能付きボックスの作り方を、実際のコードとともに解説します

WinUI 3｜XAMLで使えるレイアウトパネルの基本と配置方法

XAMLコードエディターでレイアウトパネルを用いた配置方法を解説します。

WinUI3のインストール手順とプロジェクトテンプレートの選び方

WinUI3をVisualStudioで開発するためのインストール手順と、プロジェクトテンプレートの選び方について解説します。

Bamba news