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>

この1つのコードで私の貧弱なUIを見ることができます。

ここに画像の説明を入力してください

そして、私はこの種の少し良いUIと少なくともこのような針のものが欲しいです。

ここに画像の説明を入力してください

誰かがこのUIシェイプで私を助けてくれることを願っています

4

3 に答える 3

3

これには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"/>

2番目の例では、正しい方向を向くようにこれを回転させる必要があります。

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

Obviously in this case it will be displayed upside down and fixed, but if you bind the RotateTransform Angle to your compass heading it will point in the right direction.

于 2012-07-05T09:58:25.603 に答える
2

The following will give you your desired example arrow, for your specific phone page, with the centre at the bottom so you can just place it on your compass.

It also has a named member called MyTransform you can simply set the angle of the Rotation property (0 = North, 180 = South etc).

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

Example Image:

ここに画像の説明を入力してください

It was authored in Expression blend by importing your sample image and drawing over the top. Then the scaling altered to match your actual page size (as the bitmap shown was not 1:1 scale).

To use this simple set rotation from code to the desired angle

e.g. as per your snippet:

    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

BlendSDKのBlockArrowシェイプを使用します。自分の矢印をもう一度描く必要はありません。次に、表示したい角度に基づいてコントロールを回転させます。原点を変換して、中央ではなく端を中心に回転させる必要がある場合もあります。

于 2012-07-07T23:14:28.637 に答える