C#WPFの道#13！Buttonに画像と文字を並べる方法とRepeatButtonとToggleButton

WPF

2019.01.022020.03.21

ボタンとは？
通常のボタン
1. ボタンのContentにStackPanelを設置し、画像とテキストをならべて表示する例
RepeatButton
ToggleButton
1. サンプルコード
各種ボタンサンプルコード全体

ボタンとは？

ボタンはこれまでも使ってきました。基本的にはクリックイベントを実装し、押されたときにデータを保存する処理などを記述します。ここでは、そのボタンの使い方の詳細と種類を見ていきます。

通常のボタン

通常のボタンは基本的にContentに「保存」などの文言を表示して、Clickイベントを実装するという使い方になりますが、WindowsFormsのボタンコントロールとは異なり、Contentが文字だけでなく、StackPanel等を設定できるため、ボタンの文言表示の場所に、画像と文字を並べて表示するという事が、簡単にできるようになりました。

ボタンのContentにStackPanelを設置し、画像とテキストをならべて表示する例

<Button Margin="10"
        x:Name="NormalButton"
        Click="NormalButton_Click">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Ellipse Fill="Red"
                     Width="15"
                     Height="15"
                     Margin="0,0,30,0"/>
            <TextBlock Text="AAA"/>
        </StackPanel>
    </Button.Content>
</Button>

この例では、通常

<Button Content="AAA"/>

と定義していた書き方とは異なり、Button.Contentのエリアを作り、その中にStackPanel設置して、横向きに赤丸マークとTextBlockにテキストを”AAA”と表示しています。このXamlのレイアウトは次のようになります。

RepeatButton

RepeatButtonはボタンを押下している間中、クリックイベントを通知するボタンです。

RepeatButtonを押下し続けると、最初に1回クリックイベントが通知され、その後、Delayに設定されているミリ秒間なにもせず待機されます。Delayミリ秒が経過するとクリックイベントが通知され、その後はIntervalに設定されている値ミリ秒間隔で、クリックイベントが通知され、ボタンの押し下げを止めると、クリックイベントも通知されなくなります。

Interval	クリックイベントが通知される間隔（ミリ秒）
Delay	リピートを開始するまでの待機時間（ミリ秒）

次の例で、RepeatButtonを押し続けると、最初に1回クリックイベントが通知され、その5秒後から、2秒間隔でクリックイベントが通知され続けます。

<RepeatButton Content="repeat"
              FontSize="20"
              x:Name="RepeatButton"
              Click="RepeatButton_Click"
              Interval="2000"
              Delay="5000"/>

private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine(DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss") + "RepeatButton");
}

ToggleButton

ToggleButtonとは、ボタンを押し下げている状態と押し上げている（何もしていない）状態の2つの状態を表すボタンです。見た目はボタンですが、CheckBoxのチェックありとチェックなしの状態のボタン版と考えていただいてOKです。

サンプルコード

次の例では、ボタンを押すたびに、MyToggleBtton.IsCheckedがTureとFalseに変化し、ボタンはTrueのときは押したままの描画となります。

<ToggleButton Content="toggle"
              FontSize="20"
              x:Name="MyToggleBtton"
              Click="MyToggleBtton_Click"/>

private void MyToggleBtton_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("toggle button click:" + MyToggleBtton.IsChecked);
}

各種ボタンサンプルコード全体

3種類のボタンのサンプルコードをまとめます。

<Window x:Class="WPF013.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF013"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <StackPanel>
            <Button Margin="10"
                    x:Name="NormalButton"
                    Click="NormalButton_Click">
                <Button.Content>
                    <StackPanel Orientation="Horizontal">
                        <Ellipse Fill="Red"
                                 Width="15"
                                 Height="15"
                                 Margin="0,0,30,0"/>
                        <TextBlock Text="AAA"/>
                    </StackPanel>
                </Button.Content>
            </Button>

            <RepeatButton Content="repeat"
                          FontSize="20"
                          x:Name="RepeatButton"
                          Click="RepeatButton_Click"
                          Interval="2000"
                          Delay="5000"/>

            <ToggleButton Content="toggle"
                          FontSize="20"
                          x:Name="MyToggleBtton"
                          Click="MyToggleBtton_Click"/>
        </StackPanel>
    </Grid>
</Window>

using System;
using System.Windows;

namespace WPF013
{
    ///
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void NormalButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Normal button click!!");
        }

        private void RepeatButton_Click(object sender, RoutedEventArgs e)
        {
            Console.WriteLine(DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss") + "RepeatButton");
        }

        private void MyToggleBtton_Click(object sender, RoutedEventArgs e)
        {
            Console.WriteLine("toggle button click:" + MyToggleBtton.IsChecked);
        }
    }
}

Xamlレイアウトイメージ