This article is currently in the process of being translated into Japanese (~90% done).

Basic controls:

The Button control

Buttonコントロールを持たないGUIはありえません。もちろんWPFにも他のフレームワークと同じような優れたButtonコントロールがあります。これは非常に柔軟で、ほとんど何でも出来ます。それでは基本的な例から始めましょう。

シンプルなButton

WPFの他のコントロールと同じように、単純にWindowにButtonタグを書けばButtonを表示することが出来ます。タグの間にテキスト（もしくは他のコントロール）を書けばそれがButtonのコンテンツになります。

<Button>Hello, world!</Button>

かなり簡単ですよね？もちろんこのボタンはまだ実質的に何もしません。しかし、マウスでポイントすると何の設定もなしに素晴らしいホバーエフェクトが現れます。このButtonにClickイベントをサブスクライブして何かさせてみましょう。（この処理について詳しくは、XAMLにおけるイベントのサブスクライビングの記事で説明します。）

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

コードビハインドでクリックをハンドルするために適合するメソッドを書く必要があります。

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

最も基本的なボタンです。これをクリックすればメッセージが表示されます！

書式化されたコンテンツ

Buttonのコンテンツの内部の単純文字列は、内部的にTextBlockコントロールに変換されます。これはテキストの書式設定が使えることを意味します。Buttonコントロールで書式設定を行うためForeground, Background, FontWeight 等のいくつかのプロパティがあります。言い換えれば、Buttonコントロール内部のテキスト書式を変えることは大変簡単です。

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Buttonに直接これらのプロパティを指定すると、コンテンツ全部に同じ書式しか設定できないという制限があります。それで十分ではない場合は更に高度なコンテンツの書式設定に進んで下さい。

高度なコンテンツのButton

既に何度か話していますが、WPFの大変優れたところは、コントロール内部の単純文字列をWPFの他のコントロールに置き換える事ができる能力です。これはボタンの単純文字列の書式が全部同じになる制限を受けないということをも意味します。つまりテキストに異なる書式を設定できます。WPFのボタンはただ一つの子コントロールしかサポートしていませんが、子コントロールをPanelにすれば必要とするだけのコントロールをホストできます。これを使っていろいろな書式のボタンを作ることが出来ます。

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

しかしもちろん、テキストだけに制限されません。あなたの好きなものをボタンの中に置くことが出来ます。それは人々が求めているものに繋がります。イメージを持ったボタンです！

イメージを持ったボタン(ImageButton)

多くのUIフレームワークでは正規のボタンの他に、追加の機能を持ったいくつかの種類のボタンを持っています。最も一般的に使われているボタンの一つはImageButtonで、名前が示すとおりに、通常、テキストの前にイメージのあるボタンです。しかしWPFではこれを作るためにコントロールを分ける必要はありません。先程見たように、ボタンの中にいくつかのコントロールがおけるので、次のように簡単にイメージコントロールを追加できます。

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

WPFでImageButtonを作るのは本当に簡単です。そしてもちろんイメージを移動するのも自由にできます。例えば、テキストをイメージの前ではなく後ろに置きたい場合など。

Buttonのパディング

WPFのボタンはデフォルトでパディングを持っていない事に気づいているかもしれません。これはテキストが境界線に密接していて少し変異見えます。何故なら他（ウェブやアプリケーションなど）で使われているほとんどのボタンは少なくとも少しはパディングを持っているからです。しかし、心配はいりません。ボタンにはPaddingプロパティがあります。

<Button Padding="5,2">Hello, World!</Button>

これは左右５ピクセル、上下２ピクセルのパディングを適用します。しかし全てのボタンに一定ポイントのパディングを設定するのは少し面倒かもしれません。しかしちょっとした助言があります。Styleを使えばアプリケーション全体やと特定のWindow全体にパッディングを設定できます（Styleについては後で出てきます）。この例ではWindow.Resourcesプロパティを使ってWindowに設定しています。

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

今回、このパディングが全てのボタンに設定されましたが、もちろんボタンのパッディングプロパティを別の値に上書きすることも出来ます。次の例では全てのボタンを共通のパッディング設定した時どのように見えるか示します。

まとめ

この記事からわかるように、WPFフレームワークでボタンを使うのは非常に簡単で、この重要なコントロールをほとんど無制限にカスタマイズできます。

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata