既存ボタンのスタイルを継承しながら、カスタムボタン作成
ボタンとスタイルを定義
※StyleにBasedOnを指定しないと、既存のスタイルした表示してくれなかったので注意
<Button x:Class="CustomButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:App1" mc:Ignorable="d" > <Button.Style> <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"> <Setter Property="Background" Value="White" /> <Setter Property="Foreground" Value="#E50012" /> <Setter Property="BorderBrush" Value="#E50012" /> <Setter Property="BorderThickness" Value="2" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> </Style> </Button.Style>
ControlTemplateを設定する。
今回はVisualStateManagerを使いVisualState単位で状態を変更する。 Storyboardは基本アニメーション効果があるため、時間やFrom・Toの指定で変更効果を表示することが可能
<Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <!--ボタンは基本四角い状態であるため、せっかく丸いBorderにしてもはみ出て角が見えていたため透明にした--> <Grid x:Name="MenuButton" Background="Transparent"> <!--ボタンの枠線:CornerRadiusで丸みを設定できる。--> <Border x:Name="MenuBorder" BorderBrush="#E50012" BorderThickness="3" CornerRadius="10" Background="{TemplateBinding Background}"/> <!--ボタン内の本体?--> <ContentPresenter x:Name="Presenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> <VisualStateManager.VisualStateGroups> <VisualStateGroup Name="CommonStates"> <VisualState Name="Normal" /> <VisualState Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="MenuBorder" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="00:00:00.1" To="LightPink" /> <ColorAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Duration="00:00:00.1" To="#E50012" /> </Storyboard> </VisualState> <VisualState Name="Pressed"> <Storyboard> <ColorAnimation Storyboard.TargetName="MenuBorder" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="00:00:00.1" To="#E50012" /> <ColorAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Duration="00:00:00.1" To="white" /> <ThicknessAnimation Storyboard.TargetName="MenuBorder" Storyboard.TargetProperty="Margin" Duration="00:00:00.1" To="0,0,0,0" /> </Storyboard> </VisualState> <VisualState Name="Disabled"> <Storyboard> <ColorAnimation Storyboard.TargetName="MenuBorder" 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> </Button.Template>
VisualState関連参考
以下のリンクから、全コントロール分のスタイルテンプレートを参照可能 コントロールのスタイルとテンプレート | Microsoft Docs