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? I am talking about the Data attribute of a XAML Path control.

I have seen Path controls were used to show icons and change their color via mouse over. I understand how i can do this. I want to understand how to create icons in the format that Path.Data expects it.

Solution

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

    If you do want to create shapes yourself you can input bitmaps 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 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