UWP xaml ripple Effect (android effect) animation

I try to code in UWP app an Android Effect (ripple). So I create an EllipseGeometry Inside a grid (in my usercontrol) but when RadiusX and RadiusY of my ellipseGeometry play their animation, my EllipseGeometry growth out of my grid... I have tried to bounds path with a visible area and clip it to the path, but no success.

Here my XAML code :

<UserControl
x:Class="UIComponents.POIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIComponents"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="650" Background="White">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <!--Animation Ellipse-->
    <Grid x:Name="ellipseContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="3">
        <Path x:Name="path" Fill="Red" Stroke="Black" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Path.Data>
                <EllipseGeometry x:Name="circleGeometry" Center="0,0" RadiusX="5" RadiusY="5" />
            </Path.Data>
        </Path>
    </Grid>
    <Rectangle x:Name="clickableRect" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  PointerPressed="clickableRect_PointerPressed"  Fill="Transparent" Tapped="clickableRect_Tapped"/>
</Grid>
<UserControl.Resources>
    <Storyboard x:Name="RipplePath">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="RadiusX" Storyboard.TargetName="circleGeometry">
            <EasingDoubleKeyFrame KeyTime="0" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:10" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="RadiusY" Storyboard.TargetName="circleGeometry">
            <EasingDoubleKeyFrame KeyTime="0" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:10" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

Here my Cs code :

private void clickableRect_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Point touchPosition = e.GetPosition(ellipseContainer);
        //RectangleGeometry visibleArea = new RectangleGeometry();
        //visibleArea.Rect = new Rect(0, 0, 650, 100);
        //path.Clip = visibleArea;
        Storyboard animation = this.FindName("RipplePath") as Storyboard;
        animation.Begin();

    }

Here, the result :

Thanks a lot for your help :)

============== Try Justin XL's solution : result :

Thanks Justin for your Help, It seems the rectanglegeometry is animed too :

But nothing is over the grid.

the Xaml code is :

<UserControl
x:Class="UIComponents.POIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIComponents"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="650" Background="White">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,650,100" />
    </Grid.Clip> ...

and CS code is :

public POIButton()
    {
        this.InitializeComponent();
        var visual = ElementCompositionPreview.GetElementVisual(this);
        visual.Clip = visual.Compositor.CreateInsetClip();
    }

================ XAML Result :

This XAML code not produce correct effect :

<UserControl
x:Class="UIComponents.POIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIComponents"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="100"
Width="650" Background="White">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,650,100" />
    </Grid.Clip>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <!--Animation Ellipse-->
    <Grid x:Name="ellipseContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="3">
        <Path x:Name="path" Fill="Red" Stroke="Black" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Path.Data>
                <EllipseGeometry x:Name="circleGeometry" Center="0,0" RadiusX="5" RadiusY="5" />
            </Path.Data>
        </Path>
    </Grid>...

Result :

But CS Code works fine (with comment the line RectangleGeometry in XAML code) :

this.InitializeComponent();
        var visual = ElementCompositionPreview.GetElementVisual(this);
        visual.Clip = visual.Compositor.CreateInsetClip();

Produce this :

Thanks @Justin XL for it help :)

UWP xaml ripple Effect (android effect) animation

1 Answers