wpfxamlsvg

How to create the Data attribute of a XAML Path with a custom icon?

How to create a PathGeometry for a home icon in xaml?

How do i determine the value of a geometry that goes into the paths data field to for example display a home icon?

<Geometry x:Key="HomeIcon" FillRule="EvenOdd" Data="???"/>
Solution

  • Drawing this data by hand is, while possible, rather uncommon for complex icons.

    It follows the same rules as SVG files commonly used on webistes and graphic design.

    If you do want to create shapes yourself based on images you can import them into Inkscape, convert them to a path, merge all paths to a single object and now follow the steps from below to extract the data from SVGs.

    I strongly suggest checking out this website you can find many icons there already in the SVG format: https://pictogrammers.com/library/mdi/

    Select the icon you like and click on the XML symbol marked with copy SVG.

    enter image description here

    Now paste or open your svg in notepad. Copy the content of the d="" attribute into your paths data="" attribute and you are good to go

    enter image description here

    Result:

    <Path Fill="Black "Data="M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z"/>

    if you want to create resources of this type you can do it like this:

    <Geometry x:Key="DownArrowThick">M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z</Geometry>

    and use it like this:

    <Path Stretch="Fill" Fill="Hotpink" Data="{StaticResource DownArrowThick}"/>

    This will show how to transform any bitmap image into a WPF Path:

    1. Open the image in Inkscape
    2. Select your bitmap image by clicking on it go to: Path-> Trace Bitmap:
    enter image description here

    3. Apply simirlar settings to the one shown in the screenshotenter image description here
    4. Click Update
    5. Click Ok
    6. Delete the image, keep the newly created vector
    7. Save as SVG
    enter image description here
    8. Open the .SVG in notepad
    9. Extract "d" Attribute and copy to XAML
    enter image description here
    (10. Play around with the stretch attribute to make the image show as intended, sometimes it might be nessesary to adjust the Inkscape canvas size to the Target icon after step 6)

    Now you can change the icon color on mouseover or click animations without storing 5 similar iamges in different colors