WPF鼠标滑过Button时放大

    预期效果:鼠标滑过Button时有放大效果,并且改变背景色;点击Button时改变背景色,释放鼠标还原;鼠标离开Button时还原。

    Button的Content是文字或者图片都适用,代码如下:

  • xaml代码
<Window x:Class="WPF_ButtonStyle.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:WPF_ButtonStyle"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard1">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Storyboard2">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Label Name="lbl" Content="{TemplateBinding Content}" Background="Transparent" Height="{TemplateBinding Height}"
                           Width="{TemplateBinding Width}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="lbl" Value="#330091FF"/>
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="Storyboard_Copy1_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="lbl" Value="#000000FF"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
        <Button Content="Button" FontSize="20" Style="{StaticResource ButtonStyle}"/>
        <Button Height="80" Width="80" Style="{DynamicResource ButtonStyle}">
            <Button.Content>
                <Image Source="qq.png"/>
            </Button.Content>
        </Button>
    </StackPanel>
</Window>

猜你喜欢

转载自blog.csdn.net/u012366767/article/details/80689650