指南针与箭头wpf

时间:2014-04-28 07:38:42

标签: wpf xaml

我必须在圆圈内显示带箭头的指南针

我有以下代码:

<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>

现在我必须根据输入角度改变整个指南针。 我知道的一件事是如果我将箭头形状移动到图像类型中,我可以使用以下

来形成这种形状
<Image.RenderTransform>
                <RotateTransform Angle="{Binding ElementName=root, Path=Angle}"/>
</Image.RenderTransform>

但是我无法在Image标签内绘制这个几何体。 怎么做到这一点?

2 个答案:

答案 0 :(得分:2)

为什么需要旋转Ellipse?当然只有箭头在指南针中移动。为了简化这项工作,为什么不在一个Path中创建箭头,而不是另外使用Line元素?你可以用这样的旋转定义相同的箭头:

<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>

答案 1 :(得分:1)

您可以将旋转应用于包含所有控件的整个网格。不要忘记在旋转的元素上设置RenderTransformOrigin="0.5,0.5",使其围绕中心而不是左上角旋转。

或者您可以为每个元素Path,Line和Ellipse添加RotationTransform。然而,在这种情况下,每个旋转中心可能会有所不同,这使得它更加复杂。