How to expand shape to 2x screen width

How-to Discussions
1

I have a Circle, it has Width="0", and I need the Width to be equal to the width of the screen x 2

The problem is that the Circle is in a panel in a panel in another panel so I can’t just do Width="200%",

I can’t use Scale because the Circle won’t scale up as a vector which causes pretty bad distortion around the edges.

I’m trying to replicate the ripple effect that we see a lot in Material-style animation, a solution would be to just use a really large fixed value, but then on some screens the animation would be way too fast, while on others it would be just right. The goal is to have the Circles expansion slow down, and ease out as its about to fill the space.

How do I do this?

Cheers

2

Do you have an example of the effect you wish to create? Like, a link to somewhere we can see this particular animation?

3

Sure, here it is.

Here I used a fixed value which works nicely (a bit too fast) on the local preview.

UPDATE: So I messed around with the controls to get the circle in a parent which has the screen width. The problem is the <Circle> has Width and Height not Radius, which means that when i do:


<Panel Height="250" >
	<Circle ux:Name="bgCircle" Fill="#00E676" Width="0%" Height="0%" Alignment="BottomRight" Anchor="50%, 50%" TransformOrigin="Anchor">
		<LayoutAnimation>
			<Resize RelativeTo="SizeChange" X="1" Y="1" Duration="0.5" Easing="CircularIn" />
			<Move RelativeTo="PositionChange" Vector="1" Duration="0.5" Easing="CircularIn" />
		</LayoutAnimation>
	</Circle>
	<WhileTrue ux:Name="AddingNewWeight">
		<Change bgCircle.Width="300%" />
		<Change bgCircle.Height="300%" />
		...
	</WhileTrue>
</Panel>

The circles Width is limited by the height, which has nothing to do with the width.
To explain further, since the above panel has a height of 250 and I can’t do something like Height="Width", I’m only doing 300% of 250 (750).