2

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

 <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 形状中帮助我

4

3 回答 3

3

这有两个部分。

在第一个实例中，您需要定义一个箭头形状。以下是执行此操作的一些 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到您的指南针航向，它将指向正确的方向。

于 2012-07-05T09:58:25.603 回答
2

以下将为您提供所需的示例箭头，用于您的特定电话页面，中心位于底部，因此您可以将其放在指南针上。

它还有一个命名成员，MyTransform您可以简单地设置旋转属性的角度（0 = 北，180 = 南等）。

        <Path Data="M87.026947,24.16836 L102.66625,48.669857 L94.666451,48.669857 L94.666451,84.674995 L78.666855,84.674995 L78.666855,48.669857 L70.667053,48.669857 z" HorizontalAlignment="Right" Height="60.498" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="32" RenderTransformOrigin="0.5,1" Margin="0,0,208,191.502">
            <Path.RenderTransform>
                <CompositeTransform x:Name="MyTransform" Rotation="0" ScaleX="2.91" TranslateX="-16" TranslateY="-61" ScaleY="3.4"/>
            </Path.RenderTransform>
            <Path.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                    <GradientStop Color="#FEFEFEFE" Offset="0.58"/>
                    <GradientStop Color="#FEE22828" Offset="0.604"/>
                    <GradientStop Color="#FEE64C4C" Offset="0.795"/>
                    <GradientStop Color="#FEFFFFFF" Offset="0.826"/>
                </LinearGradientBrush>
            </Path.Fill>
        </Path>

示例图像：

在此处输入图像描述

它是通过导入您的示例图像并在顶部绘制而在 Expression blend 中创作的。然后缩放比例改变以匹配您的实际页面大小（因为显示的位图不是 1:1 比例）。

要使用从代码到所需角度的简单设置旋转

例如，根据您的代码段：

    void DrawCompass()
    {
       MyTransform.Rotation = 0.0;   // North
       MyTransform.Rotation = 180.0; // South
       MyTransform.Rotation = 90.0;  // East
       MyTransform.Rotation = 270.0; // West
       // Or any other angle in between
       // or simply bind the Rotation property to an angle property on your viewmodel
    }
于 2012-07-05T10:57:15.787 回答
0

使用 Blend SDK 中的 BlockArrow 形状。无需再次绘制自己的箭头。然后根据您希望显示的角度简单地旋转控件。您可能还必须转换原点，以便它围绕末端而不是中间旋转。

于 2012-07-07T23:14:28.637 回答