ハロの外部記憶インターフェイス

そろそろ覚える努力が必要かも…

既存ボタンのスタイルを継承しながら、カスタムボタン作成

ボタンとスタイルを定義

※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