WPF XAML Border CornerRadius Animation

Question

Есть круглая кнопка. Хочу сделать анимацию, при наведении мыши на кнопку она становилась менее скругленной, т.е. CornerRadius стал к примеру 20 за 0.4 сек. Как такое реализовать?

<Style x:Key="Button" TargetType="Button" BasedOn="{StaticResource Button.AnimationCircle}">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="Foreground" Value="#FFD7DDF2"/>
        <Setter Property="Background" Value="#FF697EC9"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Padding" Value="7"/>
        <Setter Property="Border.CornerRadius" Value="500"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" CornerRadius="{TemplateBinding Border.CornerRadius}"
                            Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}"
                            Cursor="Hand">
                        <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <Border.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                          ???
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Border.Triggers>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

 <Style x:Key="Button" TargetType="Button" BasedOn="{StaticResource Button.AnimationCircle}">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="Foreground" Value="#FFD7DDF2"/>
        <Setter Property="Background" Value="#FF697EC9"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Padding" Value="7"/>
        <Setter Property="Border.CornerRadius" Value="500"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" CornerRadius="{TemplateBinding Border.CornerRadius}"
                            Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}"
                            Cursor="Hand">
                        <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <Border.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="CornerRadius">
                                                <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.03">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="19" BottomRight="19" TopLeft="19" TopRight="19" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.06">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="18" BottomRight="18" TopLeft="18" TopRight="18" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.09">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="17" BottomRight="17" TopLeft="17" TopRight="17" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="16" BottomRight="16" TopLeft="16" TopRight="16" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.12">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="15" BottomRight="15" TopLeft="15" TopRight="15" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames.KeyFrames>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="CornerRadius">
                                                <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.03">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="16" BottomRight="16" TopLeft="16" TopRight="16" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.06">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="17" BottomRight="17" TopLeft="17" TopRight="17" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.09">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="18" BottomRight="18" TopLeft="18" TopRight="18" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="19" BottomRight="19" TopLeft="19" TopRight="19" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.12">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <CornerRadius BottomLeft="20" BottomRight="20" TopLeft="20" TopRight="20" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames.KeyFrames>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Border.Triggers>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

БЛОГ НА HUSL

WPF XAML Border CornerRadius Animation

Ответы (1 шт):