Search code examples
c#silverlightwindows-phone-7xamlexpression-blend

Compass UI and Needle

I want to make some compass app and want to show needle deflection according to lat long of user. But I am unable to understand how I can give proper shape as compass. Currently I am using this code to show 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>

You can see my poor UI with this one code.

enter image description here

And I want this kind little bit better UI with atleast needle stuff like this.

enter image description here

I hope some one can help me in this UI Shape

Solution

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

    enter image description here

    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
    }