Expanding Circles : Path « Windows Presentation Foundation « VB.Net

1. VB.Net
2. Windows Presentation Foundation
3. Path

Expanding Circles

     

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Expanding Circles">
    <Canvas Width="400" Height="400"
          HorizontalAlignment="Center" VerticalAlignment="Center" >
        <Path Name="pathInner" Stroke="Red" StrokeThickness="12.5">
            <Path.Data>
                <EllipseGeometry x:Name="elips1" Center="200 200" RadiusX="0" RadiusY="0" />
            </Path.Data>
        </Path>
        <Path Stroke="Red" StrokeThickness="12.5">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry x:Name="elips2" Center="200 200" RadiusX="25" RadiusY="25" />
                </GeometryGroup>
            </Path.Data>
        </Path>

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetName="pathInner"
                             Storyboard.TargetProperty="StrokeThickness"
                             From="0" Duration="0:0:5" />

                        <DoubleAnimation Storyboard.TargetName="elips1" 
                             Storyboard.TargetProperty="RadiusX" 
                             From="0" To="25" IsAdditive="True"  
                             Duration="0:0:5" />

                        <DoubleAnimation Storyboard.TargetName="elips1" 
                             Storyboard.TargetProperty="RadiusY" 
                             From="0" To="25" IsAdditive="True"  
                             Duration="0:0:5" />

                        <DoubleAnimation Storyboard.TargetName="elips2" 
                             Storyboard.TargetProperty="RadiusX" 
                             From="0" To="25" IsAdditive="True"  
                             Duration="0:0:5" />

                        <DoubleAnimation Storyboard.TargetName="elips2" 
                             Storyboard.TargetProperty="RadiusY" 
                             From="0" To="25" IsAdditive="True"  
                             Duration="0:0:5" />


                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
    </Canvas>
</Page>

   
    
    
    
    
  

Related examples in the same category

1.	Trivial Path
2.	Path Data
3.	A Path based on Path.Data, PathGeometry and LineSegment
4.	Path StrokeDashArray
5.	Sample Arc
6.	Four Overlapping Circles
7.	Path Intersect
8.	Closed PathFigure
9.	PathGeometry Figure
10.	Path with OuterGlowBitmapEffect
11.	Path with M, C and Z
12.	Path and PolyLineSegment.Points
13.	Double animation with path
14.	Matrix animation with path
15.	Create a polyline with a PathGeometry
16.	Simple Arc
17.	Draw a Curved Line with PathFigure, LineSegment, ArcSegment
18.	LineSegment inside a PathFigure
19.	ArcSegment inside a PathFigure
20.	Set SweepDirection=Clockwise for ArcSegment
21.	PathFigure and BezierSegment
22.	Path with BlurBitmapEffect
23.	Path with DropShadowBitmapEffect
24.	Path based on GeometryGroup
25.	Set for RenderTransformOrigin Path
26.	Use TransformGroup to group transformations
27.	Transform Path
28.	Grouped Shapes
29.	FileRule = Nonzero for Path
30.	FileRule = EvenOdd for Path
31.	Path with EllipseGeometries
32.	One Path with two EllipseGeometries
33.	Path with Shadow
34.	Dotted Path