Vector Graphics : The Path Markup Syntax

Here’s an example:

<Grid Background="LightCyan">
    <Path Stroke="Maroon"
          StrokeThickness="4"
          Data="M 160 140 L 150 50 220 103
                M 320 140 L 330 50 260 103
                M 215 230 L 40 200
                M 215 240 L 40 240
                M 215 250 L 40 280
                M 265 230 L 440 200
                M 265 240 L 440 240
                M 265 250 L 440 280
                M 240 100
                A 100 100 0 0 1 240 300
                A 100 100 0 0 1 240 100
                M 180 170
                A 40 40 0 0 1 220 170
                A 40 40 0 0 1 180 170
                M 300 170
                A 40 40 0 0 1 260 170
                A 40 40 0 0 1 300 170" />
</Grid>

The Arc is probably the most complex syntax. It begins with the size of the ellipse, followed by a rotation angle, and then two flags, 1 for IsLargeArc and 1 for Clockwise, and concluding with the point. When drawing complete circles, you’ll want to separate the circle into two halves and use two Arc commands (or two ArcSegment objects).

Besides using geometries for drawing you can use geometries for clipping. Here’s the famous KeyholeOnTheMoon image:

This program makes use of the Clip property of type Geometry. Clip is defined by FrameworkElement so you can use the property to make any element or control visually non-rectangular in shape, and the Path Markup Syntax makes it look trivial:

Example 1. Silverlight Project: KeyholeOnTheMoon File: MainPage.xaml (excerpt)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"
      Background="{StaticResource PhoneAccentBrush}">
    <Image Source="Images/BuzzAldrinOnTheMoon.png"
           Stretch="None"
           Clip="M 120 95 L 90 265 L 220 265 L 190 95
                          A 50 50 0 1 0 120 95" />
</Grid>

I’ve also used Path Markup Syntax in the Analog Clock program. Here’s what it looks like:

The visuals consist of five Path elements. The curves on the hour and minute hand are Bézier splines. The tick marks are dotted arc segments.

The XAML file defines a Style that’s used for all five Path elements:

Example 2. Silverlight Project: AnalogClock File: MainPage.xaml (excerpt)

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="pathStyle"
           TargetType="Path">
        <Setter Property="Fill" Value="{StaticResource PhoneAccentColor}" />
        <Setter Property="Stroke" Value="{StaticResource PhoneForegroundColor}" />
        <Setter Property="StrokeThickness" Value="2" />
        <Setter Property="StrokeStartLineCap" Value="Round" />
        <Setter Property="StrokeEndLineCap" Value="Round" />
        <Setter Property="StrokeLineJoin" Value="Round" />
        <Setter Property="StrokeDashCap" Value="Round" />
    </Style>
</phone:PhoneApplicationPage.Resources>

					  

In an attempt to keep the graphics simple, I devised an arbitrary coordinate system. The clock graphics are drawn as if the width and height of the clock were 200 pixels, and the center were the point (0, 0). The clock graphics are thus bounded by X coordinates of –100 on the left and 100 on the right, and Y coordinates of –100 on the top and 100 on the bottom.

These arbitrary coordinates of the clock are in part defined by the explicit Width and Height settings of this nested Grid:

Example 3. Silverlight Project: AnalogClock File: MainPage.xaml (excerpt)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"
      SizeChanged="OnContentPanelSizeChanged">

    <!-- Draw clock on Grid with center at (0, 0) -->
    <Grid Width="200" Height="200">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="scaleClock" />
                <TranslateTransform X="100" Y="100" />
            </TransformGroup>
        </Grid.RenderTransform>

        . . .

    </Grid>
</Grid>

The TranslateTransform shifts the whole Grid to the right and down. The upper-left coordinate of (–100, –100), for example, becomes (0, 0), and a coordinate of (100, 100) becomes (200, 200).

Notice the SizeChanged event handler set on the normal content grid. The code portion uses the actual size of the content area to set the ScaleTransform applied to the nested Grid. That scales the 200-pixel dimension to the actual size:

Example 4. Silverlight Project: AnalogClock File: MainPage.xaml.cs (excerpt)

void OnContentPanelSizeChanged(object sender, SizeChangedEventArgs args)
{
    double scale = Math.Min(args.NewSize.Width, args.NewSize.Height) / 200;
    scaleClock.ScaleX = scale;
    scaleClock.ScaleY = scale;
}

Here are the five paths:

Example 5. Silverlight Project: AnalogClock File: MainPage.xaml (excerpt)

<!-- Tick marks (small and large). -->
<Path Data="M 0 -90 A 90 90 0 1 1 0 90
                    A 90 90 0 1 1 0 -90"
      Style="{StaticResource pathStyle}"
      Fill="{x:Null}"
      StrokeDashArray="0 3.14159"
      StrokeThickness="3" />

<Path Data="M 0 -90 A 90 90 0 1 1 0 90
                    A 90 90 0 1 1 0 -90"
      Style="{StaticResource pathStyle}"
      Fill="{x:Null}"
      StrokeDashArray="0 7.854"
      StrokeThickness="6" />

<!-- Hour hand pointing up. -->
<Path Data="M 0 -60 C 0 -30, 20 -30, 5 -20 L 5 0
                    C 5 7.5, -5 7.5, -5 0 L -5 -20
                    C -20 -30, 0 -30 0 -60"
      Style="{StaticResource pathStyle}">
    <Path.RenderTransform>
        <RotateTransform x:Name="rotateHour" />
    </Path.RenderTransform>
</Path>

<!-- Minute hand pointing up. -->
<Path Data="M 0 -80 C 0 -75, 0 -70, 2.5 -60 L 2.5 0
                    C 2.5 5, -2.5 5, -2.5 0 L -2.5 -60
                    C 0 -70, 0 -75, 0 -80"
      Style="{StaticResource pathStyle}">
    <Path.RenderTransform>
        <RotateTransform x:Name="rotateMinute"  />
    </Path.RenderTransform>
</Path>

<!-- Second hand pointing up. -->
<Path Data="M 0 10 L 0 -80"
      Style="{StaticResource pathStyle}">
    <Path.RenderTransform>
        <RotateTransform x:Name="rotateSecond"  />
    </Path.RenderTransform>
</Path>

					  

The StrokeDashArray settings on the first two Path elements were carefully calculated to produce the pattern of 1-second and 5-second tick marks around the face of the clock. The other three Path elements have RotateTransform objects set to their RenderTransform properties. These RotateTransforms are reset every second from the code-behind file:

Example 6. Silverlight Project: AnalogClock File: MainPage.xaml.cs (excerpt)

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();

        DispatcherTimer tmr = new DispatcherTimer();
        tmr.Interval = TimeSpan.FromSeconds(1);
        tmr.Tick += new EventHandler(OnTimerTick);
        tmr.Start();
    }

    void OnTimerTick(object sender, EventArgs args)
    {
        DateTime dt = DateTime.Now;

        rotateSecond.Angle = 6 * dt.Second;
        rotateMinute.Angle = 6 * dt.Minute + rotateSecond.Angle / 60;
        rotateHour.Angle = 30 * (dt.Hour % 12) + rotateMinute.Angle / 12;
    }
    . . .
}