指南针 UI 和针答案

【问题标题】：Compass UI and Needle指南针 UI 和针
【发布时间】：2012-07-05 09:50:35
【问题描述】：

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

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

【问题讨论】：

我认为您可以使用箭头图像并根据纬度/经度或您喜欢的方式旋转它...
也许这篇MSDN Magazine 文章有帮助。有代码。
感谢马尔科的评论。但是你能告诉我如何旋转它吗？您能否提供任何示例或参考。您的帮助将受到高度赞赏
@HenkHolterman 答案确实是您所需要的。如果需要，您会在文章中找到“旋转”的代码。
@HenkHolterman。非常感谢人...

标签： c# silverlight windows-phone-7 xaml expression-blend

【解决方案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 绑定到您的指南针航向，它将指向正确的方向。

【讨论】：

嗨。我试过你的代码。而且我在我的 xaml 中给出了硬编码的角度，而不是 180 到 100。但它在页面上什么也没显示.. :(
@ArslanPervaiz - 我不知道。代码应该可以工作。首先尝试完全移除旋转，以确保获得箭头。或者将轮换添加到您的行代码中，看看您是否可以使其正常工作。
@ArslanPervaiz - “您要查找的 sn-p 要么已被其所有者删除，要么从一开始就不存在。”

【解决方案2】：

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

它还有一个名为 MyTransform 的命名成员，您可以简单地设置 Rotation 属性的角度（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 比例）。

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

例如根据您的 sn-p：

    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
    }

【讨论】：

我正在关注您的代码。请在此 URL 上查看我的 cmets 和代码。 snipt.org/vmX1
根据您的 sn-p 添加到示例并更新命名以简化转换。添加了新图像。它并不完美，需要调整（箭头不在中心），但你明白了。
我已经测试了您新更新的代码。我现在可以处理 UI 并将进行调整。但是你能告诉我如何像之前那样设置角度吗？ line.X2 = line.X1 - (200 * Math.Sin(MathHelper.ToRadians(100))); line.Y2 = line.Y1 - (200 * Math.Cos(MathHelper.ToRadians(100)));

【解决方案3】：

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

【讨论】：