c# - 指南针 UI 和指针

Question

我想制作一些指南针应用程序，并希望根据用户的经纬度显示指针偏转。但我无法理解我如何才能像指南针一样给出正确的形状。目前我正在使用此代码来显示指南针。

 <Ellipse StrokeThickness="2" x:Name="circle" Width="400" Height="400" 
                  Margin="0,90,0,0" Fill="Black">
                <Ellipse.Stroke>
                    <SolidColorBrush Color="{StaticResource PhoneAccentColor}" />
                </Ellipse.Stroke>
            </Ellipse>

 <Line  x:Name="line" X1="240" Y1="350" X2="240" Y2="270"  Stroke="{StaticResource  PhoneForegroundBrush}" StrokeThickness="4"></Line>

你可以用这段代码看到我糟糕的用户界面。

我想要这种更好一点的用户界面，至少要有像这样的东西。

我希望有人能帮助我完成这个 UI Shape

Answer 1

这有两个部分。

首先，您需要定义一个箭头形状。以下是执行此操作的一些 XAML:

    <system:String x:Key="ArrowData">
        M7.7314458,3.052578
        L13.998698,9.3155994
        L13.998698,14.038256
        L9.4029951,9.445858
        L9.4029951,18.633959
        L6.059896,18.633959
        L6.059896,9.445858
        L1.4641927,14.038256
        L1.4641927,9.3155994
        z
    </system:String>

你可以这样使用它:

<Path Data="{StaticResource ArrowData}" RenderTransformOrigin="0.5,1.0" Stretch="Uniform" UseLayoutRounding="False" Fill="Black"/>

在第二种情况下，您需要旋转它以使其指向正确的方向:

<Path Data="{StaticResource ArrowData}" RenderTransformOrigin="0.5,1.0" Stretch="Uniform" UseLayoutRounding="False" Fill="Black">
    <Path.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="180"/>
        </TransformGroup>
    </Path.RenderTransform>
</Path>

显然，在这种情况下，它会上下颠倒并固定显示，但如果您将 RotateTransform Angle 绑定(bind)到您的罗盘航向，它将指向正确的方向。