Compass with an arrow wpf - wpf

Question

I have to show a compass with an arrow inside a circle
I have the following code:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Pen x:Key="BlackPen1" Thickness="1" Brush="Black"></Pen>
</Page.Resources>
<Grid>
<!-- Image for the Circle -->
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Pen="{StaticResource BlackPen1}" >
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="50" RadiusY="50"></EllipseGeometry>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<Path Grid.Row="1" Data="M15,0 L30,40 L0,40Z" Stroke="Black" Fill="Black" StrokeThickness="1" HorizontalAlignment="Center" />
<Line Grid.Row="0" Y1="40" Y2="400" X1="0" X2="0" Stroke="Black" StrokeThickness="5" HorizontalAlignment="Center" />
</Grid>
</Page>
Now I have to transform this whole compass based on the input angle.
One thing I know is If I move my arrow shape into Image type I can tans form this using the following
<Image.RenderTransform>
<RotateTransform Angle="{Binding ElementName=root, Path=Angle}"/>
</Image.RenderTransform>
But I am not able to draw this geometry inside the Image tag.
How to achieve this?

Answer 1

Why would you need to rotate the Ellipse? Surely only the arrow moves in a compass. In order to make that job easier, why don't you create the arrow in just one Path, instead of additionally using a Line element? You could define the same arrow with rotation like this:
<Path Grid.Row="1" Data="M15,0 30,40 18,40 18,400 12,400 12,40 0,40Z" Stroke="Black"
Fill="Black" StrokeThickness="1" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=root}" />
</Path.RenderTransform>
</Path>

Answer 2

You can apply the rotation to the whole Grid That contains all of your controls. Don't forget to set RenderTransformOrigin="0.5,0.5" on the element you rotate so it rotates arround the center and not the top left corner.
Or you could add a RotationTransform to each of the elements Path, Line and Ellipse. However in this case Rotation centers will probably be different for each one and it makes it more complicated.