コントロールのコンテンツで見た目を変える
WPFのコントロールは、そのコンテンツに任意のコントロールを入れられます。例えば、Buttonコントロールのコンテンツには、通常は前回やったようにボタンの表面に表示される文字列を入れますが、他のコントロールを入れてもよいのです。コンテンツに入れるコントロールで、見た目（外観）を変えることが可能です。
ここでは、ごく簡単な例を紹介しておきましょう。詳しくは回を改めて解説します。
次の画像のWPFアプリは、ToggleButtonコントロールを表示しています。ToggleButtonとは、クリックするたびにON状態／OFF状態が切り替わるボタンです。上の段がOFF状態で、下の段はON状態になっています。そして、一番左の「通常」と表示しているボタンは、素のままのToggleButtonです。中央の「画像」ボタンには画像も表示しています。右の「角丸」ボタンでは、本来の枠線と背景色を消し、代わりに緑色の角を丸めた矩形をコンテンツにしています。また、黄色の円形は画像ではなく2D図形のコントロールです。
左は、コンテンツに文字列だけ。
中はコンテンツに画像と文字列。
右は、円と文字「i」と、文字列。
※中央の画像は「'I 愛チェス' タイポグラフィ」を使用
上の画像のToggleButtonは、そのコンテンツを工夫するだけで実現しています。
左の「通常」ボタンは、素のToggleButtonです（次のコード）。コンテンツは「通常」という文字列だけです。文字列の左右に空きを取るため、Padding属性を設定しています。
<ToggleButton Padding="10,0" >通常</ToggleButton>
中央の「画像」ボタンは、次のコードのようになっています。ToggleButtonのコンテンツにはコントロールを1つしか入れられないので、まずStackPanel（積み重ねパネル）コントロールを置いています。StackPanelには複数のコントロールを入れられるので、Image（画像）コントロールとTextBlockコントロールを並べています。
<ToggleButton Margin="5,0,0,0" Padding="3,0" >
<StackPanel Orientation="Horizontal">
<Image Source="Assets/ILoveChess.png" Height="18" />
<TextBlock VerticalAlignment="Center" Margin="2,0">画像</TextBlock>
</StackPanel>
</ToggleButton>
右の「角丸」ボタンはかなり複雑で、次のコードのようになっています。ToggleButtonの属性BorderThickness（枠線の太さ）とBackground（背景）の指定で、ボタン本来の枠線と背景を消しています。そしてToggleButtonのコンテンツとしてまずBorder（縁取り）コントロールを置き、その枠線を角を丸めた緑色の線に、背景色を半透明の緑色にしています。Borderのコンテンツとして「画像」ボタンと同様にStackPanelを置き、その中に、GridコントロールでひとまとめにしたEllipse（楕円）コントロールと斜体にした「i」を表示するTextBlock、および、「角丸」を表示するTextBlockとを並べています。
<ToggleButton Margin="5,0,0,0" Padding="0" BorderThickness="0" Background="Transparent">
<Border Background="#4030cc50" Padding="3,2"
BorderThickness="1" BorderBrush="Green" CornerRadius="2" >
<StackPanel Orientation="Horizontal">
<Grid>
<Ellipse Height="18" Width="18" Fill="Gold" />
<TextBlock Text="i" Width="18" Height="18"
TextAlignment="Center" Foreground="Black" FontSize="15"
FontFamily="Bodoni MT" FontStyle="Italic" FontWeight="Bold" />
</Grid>
<TextBlock VerticalAlignment="Center" Margin="2,0">角丸</TextBlock>
</StackPanel>
</Border>
</ToggleButton>
このようにコントロールに入れるコンテンツを工夫するだけで、いろいろと外観を変えられます。ただし、この例ではON状態などのハイライト（上の画像で下段のボタンの背景色が変わっています）の領域を変更していないので、よく見るとON状態の「角丸」ボタンの四隅にハイライト色がはみ出してしまっています。完璧にするには、スタイルやテンプレートといった仕組みを活用します。そのあたりは、また回を改めて解説します。
