XAMLの共通スタイルでButtonの背景色・文字配置を一括で設定したい

前提・実現したいこと

XAMLにてGUIを作っています。
ボタンをすべて角丸にしたかったので、そのための共通スタイルをApp.xamlに定義し、
各ボタンのStyleプロパティから共通スタイルを指定するようにしています。

発生している問題・エラーメッセージ

しかし、共通スタイルを指定すると、そちらが優先されてボタンそれぞれの固有スタイルが失われてしまう（？）のか
以下の事象が発生します。
①ボタンをマウスオーバーした時に背景色が変わらない
②ボタンのContentsで指定した文字が左上揃いになってしまう
共通スタイルを適用したボタンにも、マウスオーバー時の背景色変化と文字の中央ぞろえを施すにはどうしたらよいのでしょうか？

該当のソースコード

App.xaml内

XAML
1   <Application.Resources>
2		<!-- 色の指定 -->
3		<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
4		<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
5		<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
6		<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
7		<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
8		<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
9		<!-- ボタン用共通スタイル -->
10		<Style TargetType="Button" x:Key="CornerRadiusButton">
11			<!-- Contentsの左右方向align -->
12			<Setter Property="HorizontalContentAlignment" Value="Center">
13			</Setter>
14			<!-- Contentsの上下方向align -->
15			<Setter Property="VerticalContentAlignment" Value="Center">
16			</Setter>
17			<!-- 角丸と背景色の設定 -->
18			<Setter Property="Template">
19				<Setter.Value>
20					<ControlTemplate TargetType="Button">
21						<!-- 角丸と通常背景色の設定 -->
22						<Border CornerRadius="6" Background="{StaticResource Button.Static.Background}" BorderBrush="{StaticResource Button.Static.Border}" BorderThickness="1">
23							<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
24						</Border>
25						<!-- マウスオーバー時背景色の設定 -->
26						<ControlTemplate.Triggers>
27							<Trigger Property="IsMouseOver" Value="True">
28								<Setter Property="BorderBrush" Value="{StaticResource Button.MouseOver.Border}"/>
29								<Setter Property="Background" Value="{StaticResource Button.MouseOver.Background}"/>
30							</Trigger>
31						</ControlTemplate.Triggers>
32					</ControlTemplate>
33				</Setter.Value>
34			</Setter>
35		</Style>
36	</Application.Resources>

ボタンのコード例

XAML
1<Button Content="保存" HorizontalAlignment="Left" Height="26" Margin="397,211,0,0" VerticalAlignment="Top" Width="98" Style="{DynamicResource CornerRadiusButton}"/>

補足情報（FW/ツールのバージョンなど）

●環境
・VisualStudio2019 Professional Version 16.7.6

行動規範の内容に同意します

回答1件

ベストアンサー

うまく説明できているか自信がないのですが、Button自体のプロパティとTemplateは直接は関連しません。
連動して見えるのは連動するように作っているからで、すべて無視することもできてしまいます。

現状ContentとContentTemplateだけが連動（TemplateBinding）している状態で、他は無視している形になっています。

①ボタンをマウスオーバーした時に背景色が変わらない

ButtonのBorderBrush・Backgroundは変わっているが、それをだれも使っていない。

②ボタンのContentsで指定した文字が左上揃いになってしまう

HorizontalContentAlignment・VerticalContentAlignmentを設定したが、それをだれも使っていない。

素直に書くとこんな感じでしょうか。

xml
1<Application.Resources>
2  <!--  色の指定  -->
3  <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD" />
4  <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
5  <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />
6  <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
7  <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />
8  <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
9  <!--  ボタン用共通スタイル  -->
10  <Style x:Key="CornerRadiusButton" TargetType="Button">
11    <!--  Contentsの左右方向align  -->
12    <Setter Property="HorizontalContentAlignment" Value="Center" />
13    <!--  Contentsの上下方向align  -->
14    <Setter Property="VerticalContentAlignment" Value="Center" />
15    <!--  角丸と背景色の設定  -->
16    <Setter Property="Template">
17      <Setter.Value>
18        <ControlTemplate TargetType="Button">
19          <!--  角丸と通常背景色の設定  -->
20          <Border
21            Background="{TemplateBinding Background}"
22            BorderBrush="{TemplateBinding BorderBrush}"
23            BorderThickness="1"
24            CornerRadius="6">
25            <ContentPresenter
26              x:Name="contentPresenter"
27              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
28              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
29              Content="{TemplateBinding Content}"
30              ContentTemplate="{TemplateBinding ContentTemplate}" />
31          </Border>
32          <!--  マウスオーバー時背景色の設定  -->
33          <ControlTemplate.Triggers>
34            <Trigger Property="IsMouseOver" Value="True">
35              <Setter Property="BorderBrush" Value="{StaticResource Button.MouseOver.Border}" />
36              <Setter Property="Background" Value="{StaticResource Button.MouseOver.Background}" />
37            </Trigger>
38          </ControlTemplate.Triggers>
39        </ControlTemplate>
40      </Setter.Value>
41    </Setter>
42  </Style>
43</Application.Resources>

デザイナでコントロールを右クリックすると、「テンプレートの編集」ー「コピーして編集...」というメニューが出ます。
それで出力したスタイルをベースにいじると楽です^^

単に角丸にしたいだけならこれだけで十分です。

xml
1<Style TargetType="Button" x:Key="CornerRadiusButton">
2  <Style.Resources>
3    <Style TargetType="Border">
4      <Setter Property="CornerRadius" Value="6" />
5    </Style>
6  </Style.Resources>
7</Style>