В WPF измените размер круга внутри прямоугольника

Question

Я пытаюсь воссоздать стиль обратной связи кнопки Android Lollipop.

В WPF у нас есть прямоугольник с цветом фона синего цвета. Я хочу, чтобы при щелчке или касании прямоугольника кружок анимировал из центра прямоугольника, чтобы указать, что с пользователем произошло событие касания.

У нас есть раскадровка, чтобы сделать простое изменение цвета на «ударе», но как бы я сделал желаемый эффект с кругом, который исходит из центра прямоугольника.

Наша нынешняя простая раскадровка и XAML находятся ниже.

<UserControl.Resources> 
    <Storyboard x:Key="hit"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="bg"> 
      <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FFB92929"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="off"> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="bg"> 
      <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF2980B9"/> 
     </ColorAnimationUsingKeyFrames> 
    </Storyboard> 
</UserControl.Resources> 
<UserControl.Triggers> 
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown"> 
     <BeginStoryboard Storyboard="{StaticResource hit}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp"> 
     <BeginStoryboard x:Name="off_BeginStoryboard" Storyboard="{StaticResource off}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="Mouse.MouseLeave"> 
     <BeginStoryboard x:Name="off_BeginStoryboard1" Storyboard="{StaticResource off}"/> 
    </EventTrigger> 
</UserControl.Triggers> 

<Grid x:Name="LayoutRoot" Style="{StaticResource GlobalStyles}"> 
    <Rectangle x:Name="bg" Style="{StaticResource btnSquare}"/> 
    <TextBlock x:Name="btnText" HorizontalAlignment="Center" TextWrapping="Wrap" Text="-" VerticalAlignment="Center" Foreground="White" FontSize="64" FontWeight="Bold"/> 
    <Rectangle x:Name="hit" Fill="#FF2980B9" Stroke="Black" Opacity="0" d:IsHidden="True"/> 
    <!--Probably need an ellipses to position over Rectangle to create animated growing circle effect.--> 
</Grid> 

Answer 1

Вот как я имитирую анимацию Lollypop.

на эллипс:

1. Одушевленного ScaleTransform от 0 до FULLSIZE
2. Подождите, затем исчезает эллипс, установив непрозрачность до 0
3. После того, как эллипс был утрачен, сброс ScaleTransform до 0
4. Сброса непрозрачность до 50%

XAML в UserControl

<UserControl x:Class="SO_Questions.LollypopButton" 
      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" > 
    <UserControl.Resources> 

    <Storyboard x:Key="ShowEllipse"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
            Storyboard.TargetName="hit"> 
     <EasingDoubleKeyFrame KeyTime="0" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" 
           Value="1"> 
      <EasingDoubleKeyFrame.EasingFunction> 
      <CubicEase EasingMode="EaseOut" /> 
      </EasingDoubleKeyFrame.EasingFunction> 
     </EasingDoubleKeyFrame> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.5" 
           Value="1" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.5" 
           Value="1" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.7" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.8" 
           Value="0" /> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
            Storyboard.TargetName="hit"> 
     <EasingDoubleKeyFrame KeyTime="0" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" 
           Value="1"> 
      <EasingDoubleKeyFrame.EasingFunction> 
      <CubicEase EasingMode="EaseOut" /> 
      </EasingDoubleKeyFrame.EasingFunction> 
     </EasingDoubleKeyFrame> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.5" 
           Value="1" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.5" 
           Value="1" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.7" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.8" 
           Value="0" /> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="hit"> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.5" 
           Value="0.5" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.5" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.7" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2.8" 
           Value="0.5" /> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="FadeEllipse"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="hit"> 
     <EasingDoubleKeyFrame KeyTime="0" 
           Value="0.5" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" 
           Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.2" 
           Value="0" /> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
            Storyboard.TargetName="hit"> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" 
           Value="1" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.2" 
           Value="0" /> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
            Storyboard.TargetName="hit"> 
     <EasingDoubleKeyFrame KeyTime="0:0:1" 
           Value="1" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:1.2" 
           Value="0" /> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 

    </UserControl.Resources> 
    <UserControl.Triggers> 
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp" 
        SourceName="MainGrid"> 
     <BeginStoryboard Storyboard="{StaticResource ShowEllipse}" /> 
    </EventTrigger> 
    </UserControl.Triggers> 

    <Grid x:Name="MainGrid" 
     Background='Blue' 
     HorizontalAlignment='Stretch' 
     VerticalAlignment='Stretch'> 

    <TextBlock x:Name="btnText" 
       HorizontalAlignment="Center" 
       TextWrapping="Wrap" 
       Text="5" 
       VerticalAlignment="Center" 
       Foreground="White" 
       FontSize="64" 
       FontWeight="Bold" /> 
    <Ellipse x:Name="hit" 
      Fill="White" 
      Opacity=".5" 
      RenderTransformOrigin="0.5,0.5"> 
     <Ellipse.RenderTransform> 
     <TransformGroup> 
      <ScaleTransform ScaleX='0' 
          ScaleY='0' /> 
      <SkewTransform /> 
      <RotateTransform /> 
      <TranslateTransform /> 
     </TransformGroup> 
     </Ellipse.RenderTransform> 
    </Ellipse> 

    </Grid> 

</UserControl> 

Код для UserControl

public partial class LollypopButton : UserControl { 

    public LollypopButton() { 
    InitializeComponent(); 
    } 

    public static readonly DependencyProperty TextProperty = 
     DependencyProperty.Register("Text", typeof(string), typeof(LollypopButton), 
      new FrameworkPropertyMetadata((string)"", 
       new PropertyChangedCallback(OnTextChanged))); 

    public string Text { 
    get { return (string)GetValue(TextProperty); } 
    set { SetValue(TextProperty, value); } 
    } 

    private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { 
    LollypopButton target = (LollypopButton)d; 
    string oldText = (string)e.OldValue; 
    string newText = target.Text; 
    target.OnTextChanged(oldText, newText); 
    } 

    protected virtual void OnTextChanged(string oldText, string newText) { 
    btnText.Text = newText; 
    } 
} 

XAML для MainForm

<local:LollypopButton HorizontalAlignment='Stretch' 
         VerticalAlignment='Stretch' 
         Grid.Column='0' 
         Grid.Row='0' 
         Text='1' /> 
<local:LollypopButton HorizontalAlignment='Stretch' 
         VerticalAlignment='Stretch' 
         Grid.Column='1' 
         Grid.Row='0' 
         Text='2' /> 

<local:LollypopButton HorizontalAlignment='Stretch' 
         VerticalAlignment='Stretch' 
         Grid.Column='2' 
         Grid.Row='0' 
         Text='3' /> 

Скриншот MainForm