Search code examples
wpfxaml

How can I fill the Data Attribute of a XAML Path with a desired Icon

How can I create the data for a XAML Path for a home icon in xaml?

Solution

  • i suggest checking out this website you can find many icons there: https://pictogrammers.com/library/mdi/

    select the icon you like, navigate to the XML symbol marked with copy SVG. Now paste the svg in notepad. Copy the content of the d="" attribute into your paths data="" 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}"/>

    enter image description here

    If you do want to create shapes yourself you can imput bitmaps into Inkscape, converti it to a path, merge all paths to a single object and now follow the steps from above to extract the data.

    Drawing this data by hand is, while possible rather uncommon.