Question

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

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

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

enter image description here

我想用这样的至少针头的东西来获得更好的UI。

enter image description here

我希望有人可以在这个UI形状中帮助我

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绑定到指南针标题，它将指向正确的方向。

Answer 2

以下内容将为您提供所需的示例箭头，针对您的特定电话页面，中间位于底部，以便您可以将其放在指南针上。

它还有一个名为MyTransform的命名成员，您可以简单地设置Rotation属性的角度（0 = North，180 = South等）。

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

示例图片：

enter image description here

通过导入样本图像并在顶部绘图，在Expression混合中创作了它。然后更改缩放以匹配您的实际页面大小（因为显示的位图不是1：1比例）。

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

e.g。根据你的片段：

    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 3

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

指南针UI和针

3 个答案:

示例图片：

e.g。根据你的片段：