I am wanting to make an eye. I am wanting two circles, one for the pupil and one for the actual eye. When I decrease the outer circle, I am wanting the pupil to hide behind it and not change shape. I have tried using clip in Blend, but cannot get the affect I am wanting. How would I go about doing this? Thanks. 

--
Gamewolf

The order in which controls are displayed on a canvas is set by their ZIndex property, so you could decrease the ZIndex property to less than the outer circles to hide it and increase to more when you want it to reappear. Hope it helps.

The only thing im not sure how to do it make the inside of the circle transparent and everything around it opaque.

--
Gamewolf

You can define a ellipse stroke color and thickness, then if you don't define a fill for the ellipse you will get a "ring" and you can see everything that is "behind" and "inside" the ring. 

Ok, I know that. But how do I hide the things on the outside of the rings. 

--
Gamewolf

Yes, I think clipping path is the way to go. Try something like this:

<UserControl
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Eye.Page"
Width="640" Height="480" Loaded="UserControl_Loaded">
<UserControl.Resources>
<Storyboard AutoReverse="True" RepeatBehavior="Forever" x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.002"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="path1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-7.76984262466431,-30.2011585235596"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="-14.9990921020508,35.9473876953125"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="46.2302780151367,-24.8916645050049"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="45.0000076293945,37"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="100.230415344238,-19.5821704864502"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="102.000007629395,38"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point2)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="150.000091552734,19.6028385162354"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="130.000015258789,39"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point3)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="154.000106811523,28.4519004821777"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="155.000015258789,38"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point1)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="158.000106811523,37.3009643554688"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="164.703384399414,37.6118659973145"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point2)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="92.9999618530273,97.4745635986328"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="99.000129699707,40.5396041870117"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point3)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="38.9998397827148,93.9349594116211"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="45.0000076293945,37"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[3].(BezierSegment.Point1)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-15.0002822875977,90.3953247070313"/>
<SplinePointKeyFrame KeyTime="00:00:01" Value="-9.00011444091797,33.4603652954102"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" >
<Canvas Margin="188.729995727539,181.317001342773,221.324005126953,178.414993286133" x:Name="canvas" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Path Height="120.268" Width="229.946" Data="M85.230423,109.8596 C85.230423,109.8596 152.23042,70.859596 206.23042,73.859596 C260.23044,76.859596 310,99.00013 314,104.00008 C318,109.00002 253,142.99965 199,140.99968 C145,138.99969 85.230423,109.8596 85.230423,109.8596 z" Fill="#FFE7F5FF" Stretch="Fill" Stroke="#FF000000" x:Name="path1" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Ellipse Height="77" Width="77" Canvas.Left="75.27" Canvas.Top="25.683" x:Name="ellipse">
<Ellipse.Clip>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="-74.7699966430664,38.8222618103027">
<BezierSegment Point1="-74.7699966430664,38.8222618103027" Point2="-7.76984262466431,-30.2011585235596" Point3="46.2302780151367,-24.8916645050049"/>
<BezierSegment Point1="100.230415344238,-19.5821704864502" Point2="150.000091552734,19.6028385162354" Point3="154.000106811523,28.4519004821777"/>
<BezierSegment Point1="158.000106811523,37.3009643554688" Point2="92.9999618530273,97.4745635986328" Point3="38.9998397827148,93.9349594116211"/>
<BezierSegment Point1="-15.0002822875977,90.3953247070313" Point2="-74.7699966430664,38.8222618103027" Point3="-74.7699966430664,38.8222618103027"/>
</PathFigure>
</PathGeometry>
</Ellipse.Clip>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
</Grid>
</UserControl>

Of course you need to begin the Storyboard in code:

For more information on how to animate clipping paths in Expression Blend, please refer to http://blogs.msdn.com/expression/archive/2008/01/21/clip-path-editing-and-animating-in-blend-2.aspx.

shanaolanxing - This posting is provided "AS IS" with no warranties, and confers no rights.

I have tried to replicate what you did, but cannot seem to figure it out. I have looked at the link, but it didn't help. 

--
Gamewolf

Here're the basic steps.

• Create a Path or an Ellipse for the eyelid.
• Make a copy of the eyelid, so you have two Paths overlay with each other now.
• Create a circle(Ellipse) as the pupil.
• Select one Path first, and then hold down Ctrl and select the Ellipse of pupil. The selection order matters.
• From Object menu, select Path, and choose "Make Clipping Path".
• Create a new Storyboard. Add a key frame for both the Path of eyelid and the Ellipse of pupil at time 00:00:00.
• Move the timeline to 00:00:01, and resize the Path of eyelid so that it looks like a line.
• At 00:00:01, use the technique on that blog to modify the clipping path of the Ellipse, so it also looks like a line. By doing so, the Ellipse will be completely clipped.
• You can set the Storyboard's RepeatBehavior to Forever and AutoReverse to true.
• Begin the Storyboard in code, and you can see the effect.

Hope it helps.

shanaolanxing - This posting is provided "AS IS" with no warranties, and confers no rights.

I did what you said, but the pupil won't get clipped. I tried everything. 

--
Gamewolf