我喜欢 Android 的新动画，您可以在其中触摸控件(listviewitem、按钮等)，它会产生像这样的简洁动画:

我想知道如何以一种很好的方式全局实现 WPF 中所有“可点击”控件。

我特别需要帮助的是如何在控件上创建圆圈。我唯一想到的是为每个其他控件(按钮、单选按钮等)创建自己的用户控件，其中我有椭圆的父项以及原始控件本身。

<UserControl>
   <Grid MouseLeftButtonDown="handler">
      <Button/> <--- this would be the button which you normally would place
   </Grid >
</UserControl>

然后在 handler-method 中使用 margin-properties 在点 e.GetPosition(handler) 上创建一个椭圆，然后对其进行动画处理。此解决方案会有效。但是对于我想要链式 react 的每个控件都这样做会很麻烦。基本上是这样的:

void handler(object sender, MouseButtonEventArgs e)
{
   Grid parent = (Grid)sender;
   Ellipse ellipse = new Ellipse();
   ellipse.Height = 10; // would be animated
   ellipse.Width = 10; // would be animated

   Point p = e.GetPosition(parent);

   ellipse.Margin = new Thickness(p.X, p.Y, 0, 0);

   parent.Children.Add(ellipse);

   // do the animation parts to later remove the ellipse
}

除了我之前演示的方式之外，是否有更清晰、更具可扩展性的方式在我的控件上放置省略号，因为并非所有控件都支持有 child ？

最佳答案

更新: 这个问题对我来说很有趣，所以我实现了它。您可以在我的 Github 页面上找到它:https://github.com/Domysee/WpfCustomControls .有多个自定义控件，您正在寻找的是 RippleEffectDecorator。

现在我解释一下我做了什么:

我创建了一个继承自 ContentControl 的自定义控件 RippleEffectDecorator。它定义了一个附加的依赖属性 HighlightBackground，用于单击元素后的背景。

RippleEffectDecorator的ControlTemplate由Grid、Ellipse和ContentPresenter组成。

<ControlTemplate TargetType="{x:Type l:RippleEffectDecorator}">
    <Grid x:Name="PART_grid" ClipToBounds="True" Background="{TemplateBinding Background}"
            Width="{Binding ElementName=PART_contentpresenter, Path=ActualWidth}"
            Height="{Binding ElementName=PART_contentpresenter, Path=ActualHeight}">
        <Ellipse x:Name="PART_ellipse"
                        Fill="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" 
                        Width="0" Height="{Binding Path=Width, RelativeSource={RelativeSource Self}}" 
                        HorizontalAlignment="Left" VerticalAlignment="Top"/>

        <ContentPresenter x:Name="PART_contentpresenter" />
    </Grid>
</ControlTemplate>

我使用了 Grid 而不是 Border，这样我就可以添加多个子元素(必要时 Ellipse 和 ContentPresenter 可以重叠)。椭圆将其 Height 属性绑定(bind)到它自己的宽度，因此它始终是一个圆。

现在到了重要的部分:动画。

Grid 在其资源中定义了一个 Storyboard，它在每个 MouseDown 事件上播放。

<Storyboard x:Key="PART_animation" Storyboard.TargetName="PART_ellipse">
    <DoubleAnimation Storyboard.TargetProperty="Width" From="0" />
    <ThicknessAnimation Storyboard.TargetProperty="Margin" />
    <DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.25" Storyboard.TargetProperty="Opacity"
                From="1" To="0" />
    <DoubleAnimation Storyboard.TargetProperty="Width" To="0" BeginTime="0:0:1.25" Duration="0:0:0" />
    <DoubleAnimation BeginTime="0:0:1.25" Duration="0:0:0" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>

Storyboard对椭圆的宽度属性进行动画处理，使其完全填满整个区域。它还必须为边距设置动画，因为椭圆相对于左上角(而不是围绕其中心)定位自身。

椭圆的起始位置、它的目标宽度以及它在整个效果中在容器中的位置必须以编程方式设置。 我覆盖了 OnApplyTemplate() 方法以将事件处理程序添加到鼠标按下事件，该事件启动 Storyboard并设置所有必要的值。

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    ellipse = GetTemplateChild("PART_ellipse") as Ellipse;
    grid = GetTemplateChild("PART_grid") as Grid;
    animation = grid.FindResource("PART_animation") as Storyboard;

    this.AddHandler(MouseDownEvent, new RoutedEventHandler((sender, e) =>
    {
        var targetWidth = Math.Max(ActualWidth, ActualHeight) * 2;
        var mousePosition = (e as MouseButtonEventArgs).GetPosition(this);
        var startMargin = new Thickness(mousePosition.X, mousePosition.Y, 0, 0);
        //set initial margin to mouse position
        ellipse.Margin = startMargin;
        //set the to value of the animation that animates the width to the target width
        (animation.Children[0] as DoubleAnimation).To = targetWidth;
        //set the to and from values of the animation that animates the distance relative to the container (grid)
        (animation.Children[1] as ThicknessAnimation).From = startMargin;
        (animation.Children[1] as ThicknessAnimation).To = new Thickness(mousePosition.X - targetWidth / 2, mousePosition.Y - targetWidth / 2, 0, 0);
        ellipse.BeginStoryboard(animation);
    }), true);
}

注意: AddHandler() 的最后一个参数决定了您是否要接收已处理的事件。将此设置为 true 很重要，因为某些 UiElement 会处理鼠标事件(例如 Button)。否则，MouseDownEvent 不会触发，因此动画不会执行。

要使用它，只需添加您想要在其上产生此效果的元素作为 RippleEffectDecorator 的子元素，并将背景设置为透明:

<cc:RippleEffectDecorator Background="Green" HighlightBackground="LightGreen">
    <Button FontSize="60" Background="Transparent">stuff</Button>
</cc:RippleEffectDecorator>

注意 2: 一些元素包括在鼠标悬停时设置模板的触发器(例如 Button)，因此隐藏了效果。如果您不想要，您必须设置按钮的模板并删除这些触发器。最简单的方法是使用 Blend，从中获取按钮的模板，删除所有触发器并将其添加为按钮的模板。

关于c# - Android在WPF中的涟漪效应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29857608/