Here referring to icons which are not included as standard icons un UBIK.
'''Path data''' is a collection of points, which combined together form a vector image. Vector images, compared to raster images like a PNG or JPG, are scalable, because they are always rendered from path data, and not from a bitmap, which has to be stretched or squished to fit your defined size. Described below two approaches.
Described below two approaches. The UWP approach involves adding an '''Using (SVG icon file to your xaml project and render it using an Image control. The Xamarin approach shows how to use svg data directly using a Path control.) Files'''
<br>
<tabs><tab name="The UWP">approach involves adding an SVG icon file to your xaml project and render it using an Image control.
<source lang = "xml">
<Image Width="14" Height="14" Margin="0,0,0,1">
</Image.Source>
</Image>
</tabsource><br><br>
<tab name="Xamarin">The first step is to generate path data for your icon. The easiest way is to download the [https://apps.microsoft.com/detail/9wzdncrdxf41?hl=en-US&gl=US| Character Map] tool from Microsoft. This can be used to browse all installed icon files for your icon of choice. Once selected, use Tools > Xaml / Xamarin Forms to show various useful aspects of the icon. In this case, the '''Using Path Icon option can be used to generate a Path control that can be pasted directly in your xaml as follows:Data'''
<br>
The Xamarin approach shows how to use svg data directly using a Path control.
The first step is to generate path data for your icon. The easiest way is to download the [https://apps.microsoft.com/detail/9wzdncrdxf41?hl=en-US&gl=US| Character Map] tool from Microsoft. This can be used to browse all installed icon files for your icon of choice. Once selected, use Tools > Xaml / Xamarin Forms to show various useful aspects of the icon. With an icon selected, the Path Geometry section can be used to generate a path data that can be pasted directly in your xaml as follows:
<source lang = "xml">
<Path Fill="{StaticResource UBIKAccentColor}" Data="F1 M 8.75 1.25 L 18.75 1.25 L 18.75 18.75 L 1.25 18.75 L 1.25 8.75 L 5 8.75 L 5 6.25 L 1.25 6.25 L 1.25 1.25 L 6.25 1.25 L 6.25 5 L 8.75 5 Z M 10 2.5 L 10 5 L 12.5 5 L 12.5 2.5 Z M 2.5 5 L 5 5 L 5 2.5 L 2.5 2.5 Z M 6.25 6.25 L 6.25 8.75 L 8.75 8.75 L 8.75 6.25 Z M 2.5 10 L 2.5 12.5 L 5 12.5 L 5 10 Z M 17.5 17.5 L 17.5 2.5 L 13.75 2.5 L 13.75 6.25 L 10 6.25 L 10 10 L 6.25 10 L 6.25 13.75 L 2.5 13.75 L 2.5 17.5 Z " />
</source>
<br>
Once you have your Path control, you can customize it as [https://learn.microsoft.com/en-us/previous-versions/xamarin/xamarin-forms/user-interface/shapes/path| documented by Microsoft]. Path data generated using the above method will most likely need a Fill attribute, for example <nowiki>Fill="{StaticResource UBIKAccentColor}"</nowiki>.
{{Hint|More complicated icons will have longer and more complicated paths.}}
</tab></tabs>
<br>
<br>
[[Category:Client|XAML Tips]]
[[Category:WinX|XAML Tips]]
[[Category:XAML|XAML Tips]]
[[Category:Xamarin|XAML Tips]]
== TabView ==