【Windows 10アプリ】スタイルを適用してボタンの外観をカスタマイズする

今回はボタンにスタイルを適用して見た目をカスタマイズする方法をご紹介します。

まずはボタンをいくつか並べましょう。 新規でユニバーサルアプリのプロジェクトを作成した際にデフォルトで存在するGridの中に3つボタンを配置しました。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.307,0.5">
    <Button x:Name="button1" Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button2" Content="Button 2" HorizontalAlignment="Left" Margin="10,47,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button3" Content="Button 3" HorizontalAlignment="Left" Margin="10,84,0,0" VerticalAlignment="Top"/>
</Grid>

プレビュー画面の見た目はこんな感じ。

味気ないですね...それではこれらのボタンの背景色と文字色を変更してみましょう！ とは言っても簡単で、PageのResourcesプロパティにスタイルを定義するだけです。

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Page.Resources>

ポイントとしてはStyleのTargetTypeでスタイルを適用するコントロールの型（今回はボタン）を指定する必要があります。 型を指定しないとSetterで指定しているコントロールのプロパティが認識されずにエラーとなります。

上記のスタイルではボタンの背景色を緑、前面色（文字色）を白にしてみました。 スタイルを適用した結果下記のようになります。

ちゃんとスタイルが適用されていますね！