Buttonレイアウト拡張(画像つきButton)

Buttonのコンポーネントに画像を表示させると
Buttonを押した時の動作をイメージしやすく出来る等の効果が得られる。

WPFではXAMLを使用する事でコンポーネントのレイアウトを自身で定義
する事が容易に出来る。

拡張に当たり、

• ContentTemplate
• DataTemplate

を使用する方法を以下に示す。

<Button>
	<Button.ContentTemplate>
		<DataTemplate>
			<StackPanel Orientation="Horizontal">
				<Ellipse Fill="Red" Width="20" Height="20"/>
				<TextBlock Text="Sample"/>
			</StackPanel>
		</DataTemplate>
	</Button.ContentTemplate>
</Button>

上記の例では
赤い丸と「Sample」の文字から構成されるButtonを表示させる事が出来る。
Ellipseの要素をImageにし、Sourceへ任意の画像を指定する事で画像つき
Buttonを表示させる事も出来る。

DataTemplate内に任意のレイアウトを記述する事で自由にレイアウトを拡張
出来てしまうのは魅力的な機能だと思う。