<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Resources> <PathGeometry x:Key="path" Figures="M 96 192 C 288 0, 400 400, 576 192 S 662 192 0 -100 S 400 576 96 192" /> </Canvas.Resources> <Path Stroke="Black" Data="{StaticResource path}" /> <Button Name="btn"> Button <Button.RenderTransform> <RotateTransform x:Name="xform" /> </Button.RenderTransform> </Button> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior="Forever"> <DoubleAnimationUsingPath Storyboard.TargetName="btn" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:10" PathGeometry="{StaticResource path}" Source="X" /> <DoubleAnimationUsingPath Storyboard.TargetName="btn" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:10" PathGeometry="{StaticResource path}" Source="Y" /> <DoubleAnimationUsingPath Storyboard.TargetName="xform" Storyboard.TargetProperty="Angle" Duration="0:0:10" PathGeometry="{StaticResource path}" Source="Angle" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> </Canvas>
Path Animated Button
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Resources> <PathGeometry x:Key="path" Figures="M 1 2 C 288 0, 400 400, 576 192" /> </Canvas.Resources> <Path Stroke="Black" Data="{StaticResource path}" /> <Button Name="btn">Button</Button> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard TargetName="btn"> <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2.5" AutoReverse="True" RepeatBehavior="Forever" PathGeometry="{StaticResource path}" Source="X" /> <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:2.5" AutoReverse="True" RepeatBehavior="Forever" PathGeometry="{StaticResource path}" Source="Y" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> </Canvas>
Squaring The Circle
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" RenderTransform="2 0 0 -2 300 300"> <Path StrokeThickness="3" Stroke="Blue" Fill="AliceBlue"> <Path.Data> <PathGeometry> <PathFigure x:Name="bez1" IsClosed="True"> <BezierSegment x:Name="bez2" /> </PathFigure> <PathGeometry.Transform> <RotateTransform Angle="45" /> </PathGeometry.Transform> </PathGeometry> </Path.Data> </Path> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior="Forever" AutoReverse="True" > <PointAnimation Storyboard.TargetName="bez1" Storyboard.TargetProperty="StartPoint" From="0 100" To="0 125" /> <PointAnimation Storyboard.TargetName="bez2" Storyboard.TargetProperty="Point1" From="55 100" To="62.5 62.5" /> <PointAnimation Storyboard.TargetName="bez2" Storyboard.TargetProperty="Point2" From="100 55" To="62.5 62.5" /> <PointAnimation Storyboard.TargetName="bez2" Storyboard.TargetProperty="Point3" From="100 0" To="125 0" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> </Canvas>
Single Bezier
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Fill="Red" Stroke="Blue" StrokeThickness="3"> <Path.Data> <GeometryGroup> <PathGeometry> <PathFigure x:Name="fig" StartPoint="50 150" IsFilled="False" > <BezierSegment Point1="25 25" Point2="400 300" Point3="450 150" /> </PathFigure> </PathGeometry> <EllipseGeometry Center="{Binding ElementName=fig, Path=StartPoint}" RadiusX="5" RadiusY="5" /> <EllipseGeometry Center="{Binding ElementName=fig, Path=Segments[0].Point1}" RadiusX="5" RadiusY="5" /> <EllipseGeometry Center="{Binding ElementName=fig, Path=Segments[0].Point2}" RadiusX="5" RadiusY="5" /> <EllipseGeometry Center="{Binding ElementName=fig, Path=Segments[0].Point3}" RadiusX="5" RadiusY="5" /> </GeometryGroup> </Path.Data> </Path> </Canvas>
Overlapping Stars
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Fill="Aqua" Stroke="Maroon" StrokeThickness="3"> <Path.Data> <PathGeometry> <PathFigure StartPoint="144 72" IsClosed="True"> <PolyLineSegment Points="200 246, 53 138, 235 138, 88 246" /> </PathFigure> <PathFigure StartPoint="168 96" IsClosed="True"> <PolyLineSegment Points="224 260, 77 162, 259 162, 112 270" /> </PathFigure> </PathGeometry> </Path.Data> </Path> </Canvas>
Path Mini Language
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Fill="Aqua" Stroke="Magenta" StrokeThickness="3" Data="M 50 75 L 250 75, 250 275, 50 275 Z" /> </Canvas>
Overlapping Rectangles
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Fill="Gold" Stroke="Red" StrokeThickness="3"> <Path.Data> <RectangleGeometry Rect="96 96 192 192" /> </Path.Data> </Path> <Path Fill="Blue" Stroke="Red" StrokeThickness="3"> <Path.Data> <RectangleGeometry Rect="192 192 192 192" /> </Path.Data> </Path> <Path Fill="Red" Stroke="Red" StrokeThickness="3"> <Path.Data> <GeometryGroup> <RectangleGeometry Rect="480 96 192 192" /> <RectangleGeometry Rect="576 192 192 192" /> </GeometryGroup> </Path.Data> </Path> </Canvas>