Compass UI和Needle

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。

​

​

我想要这种更好的UI，至少要有像这样的针一样的东西。

​

​

我希望有人能帮助我在这个UI形状

Answer 1

下面将给出你想要的示例箭头，用于你的特定电话页面，中心在底部，这样你就可以把它放在你的指南针上。

它还有一个名为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
    }

Answer 2

这里有两个部分。

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

Answer 3

使用Blend SDK中的BlockArrow shape。再也不需要自己画箭头了。然后只需根据您希望显示的角度旋转控件即可。您可能还需要变换原点，以便它围绕末端而不是中间旋转。