XAMLで下記のようにボタンを配置すると、OSの種類によって見た目が変わってきてしまいます。
<Button Content="Button1" Margin="20" Height="100" Background="#1570A6" Foreground="White"/>
特にWindows7ではボタンが中途半端に立体的に表示されるため、マウスオーバーとボタンダウン時の表示が絶望的にダサい・・・
Windows7での表示は次のようになります。
通常時
マウスオーバー
マウスダウン
今どきWindows7に対しては、そこまで考慮しなくてもよいのかもしれませんが、他のOSでも使えるので独自のボタンを実装してみましょう。
ボタン用のスタイル定義
ボタン用のスタイルを定義します。次のコードを「App.xaml」内の<Application.Resources>に記載します。
Buttonを使用するとWindows7では角に丸みが出てしまうため、ControlTemplate内ではGridを使用しています。このGridに対してMouseOverなどの各イベントでStoryboardを使用して色を変化させます。
<!--ボタンのデフォルトスタイル--> <Style TargetType="Button" > <Setter Property="Background" Value="White" /> <Setter Property="Foreground" Value="#FF056096" /> </Style> <!--フラットボタン用のコントロールテンプレート--> <ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> <!--角の丸みを取りたいためGridを使用--> <Grid x:Name="MyButton" Background="{TemplateBinding Background}"> <!--ボタンの枠線--> <Border x:Name="MyBorder" BorderBrush="#1570A6" BorderThickness="1"/> <!--ボタン内のコンテンツ(テキストなど)--> <ContentPresenter x:Name="Presenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="5" /> <!--各イベントで表示を変えたいためVisualStateManagerを使用する--> <VisualStateManager.VisualStateGroups> <VisualStateGroup Name="CommonStates"> <!--通常時(これが無いとマウスが外れても表示が戻らない)--> <VisualState Name="Normal" /> <!--マウスオーバー時--> <VisualState Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="MyButton" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="00:00:00.1" To="#1570A6" /> <ColorAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Duration="00:00:00.1" To="white" /> </Storyboard> </VisualState> <!--ボタン押下時--> <VisualState Name="Pressed"> <Storyboard> <ColorAnimation Storyboard.TargetName="MyButton" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="00:00:00.1" To="#2580B6" /> <ColorAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Duration="00:00:00.1" To="white" /> <ThicknessAnimation Storyboard.TargetName="MyButton" Storyboard.TargetProperty="Margin" Duration="00:00:00.1" To="0,0,0,0" /> </Storyboard> </VisualState> <!--ボタン無効化時--> <VisualState Name="Disabled"> <Storyboard> <ColorAnimation Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)" To="Gray"/> <ColorAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Gray"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate>
使用方法
使用するには、各WindowのXAMLでButtonに対してTemplateを指定します。
<Button Content="Button1" Template="{StaticResource ButtonTemplate}" Margin="20" Height="100"/>
表示は次のようになります。
通常時
マウスオーバー
マウスダウン
プロジェクト全体は下記リンクからダウンロードできます。
※Visual Studio 2017で作成しています。