创建一个点击后背景有扩散效果的按钮

概要

创建一个点击后背景有扩散效果的按钮。

效果展示

主要步骤

1、自定义控件样式
2、自定义Convert
3、使用ScaleTransform

主要代码

• 按钮自定义样式

<Style x:Key="buttonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Canvas x:Name="canvas">
                    <Border x:Name="border"
                            BorderBrush="#18A058"
                            BorderThickness="1"
                            CornerRadius="3"
                            Background="#18A058"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            Opacity="0">
                        <Border.RenderTransform>
                            <ScaleTransform x:Name="st"
                                            CenterX="{Binding ElementName=canvas,Path=ActualWidth,Converter={StaticResource bcc} }"
                                            CenterY="{Binding ElementName=canvas,Path=ActualHeight,Converter={StaticResource bcc}}" />
                        </Border.RenderTransform>
                    </Border>
                    <Border
                        Width="{Binding ElementName=canvas,Path=ActualWidth}"
                        Height="{Binding ElementName=canvas,Path=ActualHeight}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="3"
                        Margin="0"
                        Background="{TemplateBinding Background}">
                        <TextBlock Text="{TemplateBinding Content}"
                                    Margin="0"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Foreground="{TemplateBinding Foreground}"/>
                    </Border>
                </Canvas>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard FillBehavior="Stop">
                                <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" From="0.6" To="0" Duration="0:0:0.3" />
                                <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX" To="1.2" Duration="0:0:0.3" />
                                <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY" To="1.2" Duration="0:0:0.3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

• Convert代码

public class ButtonCenterConvert : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double size)
        {
            return size / 2;
        }
        return 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is double size))
        {
            return 0;
        }
        else
        {
            return (double)value * 2;
        }
    }
}

• 创建按钮并引用Style

<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest"
        Name="win"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:ButtonCenterConvert x:Key="bcc"/>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Canvas x:Name="canvas">
                            <Border x:Name="border"
                                    BorderBrush="#18A058"
                                    BorderThickness="1"
                                    CornerRadius="3"
                                    Background="#18A058"
                                    Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    Opacity="0">
                                <Border.RenderTransform>
                                    <ScaleTransform x:Name="st"
                                                    CenterX="{Binding ElementName=canvas,Path=ActualWidth,Converter={StaticResource bcc} }"
                                                    CenterY="{Binding ElementName=canvas,Path=ActualHeight,Converter={StaticResource bcc}}" />
                                </Border.RenderTransform>
                            </Border>
                            <Border
                                Width="{Binding ElementName=canvas,Path=ActualWidth}"
                                Height="{Binding ElementName=canvas,Path=ActualHeight}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="3"
                                Margin="0"
                                Background="{TemplateBinding Background}">
                                <TextBlock Text="{TemplateBinding Content}"
                                           Margin="0"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Foreground="{TemplateBinding Foreground}"/>
                            </Border>
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Button.Click">
                                <BeginStoryboard>
                                    <Storyboard FillBehavior="Stop">
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" From="0.6" To="0" Duration="0:0:0.3" />
                                        <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX" To="1.2" Duration="0:0:0.3" />
                                        <DoubleAnimation Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY" To="1.2" Duration="0:0:0.3" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button x:Name="growButton" Width="200" Height="60" Content="Click Me" Foreground="#333639" BorderBrush="#E0E0E6" Background="#FFF" Style="{StaticResource buttonStyle}"/>
    </Grid>
</Window>

小结

可参考这种模式自定义更多样式。