Posted in:

Here's a XAML football pitch, potentially the beginnings of a Silverlight football application. I've used metres as coordinates, and drawn a pitch of the maximum allowed size. For the second penalty area, I just reflected the first one. Unfortunately there is no simple way of reusing the same item twice in the same XAML file.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="525" Height="400" Background="#00b000">
    <Canvas x:Name="Pitch" Canvas.Left="20" Canvas.Top="20" >
        <Canvas.RenderTransform>
            <ScaleTransform ScaleX="4" ScaleY="4" />
        </Canvas.RenderTransform>
        <!-- http://en.wikipedia.org/wiki/Football_pitch -->
        <!-- dimensions in metres -->
        <Polygon Points="0,0 120,0, 120,90, 0,90 " Stroke="White" StrokeThickness="1" />

        <Canvas x:Name="PenaltyArea" Canvas.Top="24.85" >
            <Polyline Points="0,0 16.5,0 16.5,40.3, 0,40.3" Stroke="White" StrokeThickness="1" />
            <Polyline Points="0,11 5.5,11 5.5,29.3, 0,29.3" Stroke="White" StrokeThickness="1" />
            <Polyline Points="0,16.5 -2.44,16.5 -2.44,23.8, 0,23.8" Stroke="White" StrokeThickness="1" />
            <Ellipse Canvas.Left="2.15" Width="18.3" Height="18.3" Canvas.Top="11" Stroke="White" StrokeThickness="1" Clip="M 14.35,0 h 10 v 20 h -10 Z" />
            <Ellipse Canvas.Left="10.5" Width="1" Height="1" Canvas.Top="19.65" Fill="White" />
        </Canvas>

        <Canvas x:Name="PenaltyArea2" Canvas.Top="24.85" Canvas.Left="120" >
            <Canvas.RenderTransform>
                <ScaleTransform ScaleX="-1.0" />
            </Canvas.RenderTransform>
            <Polyline Points="0,0 16.5,0 16.5,40.3, 0,40.3" Stroke="White" StrokeThickness="1" />
            <Polyline Points="0,11 5.5,11 5.5,29.3, 0,29.3" Stroke="White" StrokeThickness="1" />
            <Polyline Points="0,16.5 -2.44,16.5 -2.44,23.8, 0,23.8" Stroke="White" StrokeThickness="1" />
            <Ellipse Canvas.Left="2.15" Width="18.3" Height="18.3" Canvas.Top="11" Stroke="White" StrokeThickness="1" Clip="M 14.35,0 h 10 v 20 h -10 Z" />
            <Ellipse Canvas.Left="10.5" Width="1" Height="1" Canvas.Top="19.65" Fill="White" />
        </Canvas>

        <Ellipse Canvas.Left="50.5" Width="19" Height="19" Canvas.Top="35.5" Stroke="White" />

        <Line X1="60" Y1="0" X2="60" Y2="90" Stroke="White" StrokeThickness="1" />
    </Canvas>
</Canvas>