CODEWITHSUNDEEP
wpfxaml
Ahmed_mag
Ahmed_mag

Reputation: 260

Drawing Left and Right arrow with XAML

I would like to draw a left and right arrows like the following up and bottom arrows:

//up arrow
        <Path Data="m 4 14 4 0 0 -9 3 0 -5 -5 -5 5 3 0 z"
            Fill="#571CB61C"
            Stroke="#FF00B400"
            StrokeThickness="1" />
//bottom arrow
      <Path Data="m 3.5 0 4 0 0 8 3 0 -5 5 -5 -5 3 0 z"
            Fill="#571CB61C"
            Stroke="#FF00B400"
            StrokeThickness="1" />

Any help will be appreciated

Upvotes: 0

Views: 3406

Answers (2)

Joseph
Joseph

Reputation: 1536

Here is a way so you don't have to rely on anyone in the future

1) first download Inkscape then install it then go to flaticon.com.

2) second search for the icon that you like then download its svg format.

3) now, open the icon in Inkscape and after you select it.

4) go to the menu bar then Path -> Object to Path

5) then go to File -> Save As then change the save type to .xaml

all what you have to do now is copy the results from the .xaml file and paste it in your app.

here is a sample of my results using the following icons left arrow icon, right arrow icon

enter image description hereenter image description here

<!--thin left arrow-->
<Path Data="M 401.166 478.097 113.178 245.004 401.166 11.903 391.536 0 88.834 245.004 391.536 490 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>
<!--thick left arrow-->
<Path Data="M 410.312 454.729 151.767 244.996 410.312 35.271 381.693 0 79.688 244.996 381.693 490 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>

enter image description hereenter image description here

<!--thin right arrow-->
<Path Data="M 96.536 490 403.019 244.996 96.536 0 86.981 11.962 378.496 244.996 86.981 478.038 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>
<!--thick right arrow-->
<Path Data="M 106.601 490 412.15 245.004 106.601 0 77.85 35.856 338.702 245.004 77.85 454.159 Z" Fill="Black" Stretch="Fill" Height="20" Width="10"/>

PS: i believe this can work on any svg icon.

Upvotes: 1

Ahmed_mag
Ahmed_mag

Reputation: 260

I'm using the arrows in chart with zoom function and I need them to be precise, here are the final arrows:

        <!--  Left Arrow  -->
       <Path
            HorizontalAlignment="Center"
            Data="m 290 10 5 -5 0 2.5 8 0 0 4 -8 0 0 3  z"
            Fill="#571CB61C"
            Stroke="#FF00B400"
            StrokeThickness="1" />
    <!--  Right Arrow  -->
    <Path
        HorizontalAlignment="Center"
        Data="m 4 14 4 0 0 -9 3 0 -5 -5 -5 5 3 0 z"
        Fill="#571CB61C"
        Stroke="#FF00B400"
        StrokeThickness="1">
        <Path.RenderTransform>
            <RotateTransform Angle="90" CenterX="2" CenterY="8" />
        </Path.RenderTransform>
    </Path>

it is quite easy and it is explained here : https://wpf.2000things.com/tag/streamgeometry/ https://learn.microsoft.com/it-it/dotnet/framework/wpf/graphics-multimedia/path-markup-syntax

Upvotes: 0

Related Questions