{"id":46344,"date":"2020-02-06T09:08:24","date_gmt":"2020-02-06T17:08:24","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=46344"},"modified":"2020-02-06T09:08:24","modified_gmt":"2020-02-06T17:08:24","slug":"tabs-and-triggers","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/tabs-and-triggers\/","title":{"rendered":"Toggling Tabs with Triggers"},"content":{"rendered":"

Xamarin.Forms<\/a> makes setting Tabs Icons super easy! All there is to do is set the Icon property to the path of an image and you are done.<\/p>\n

<Tab Title=\"Browse\" Icon=\"tab_feed.png\"><\/pre>\n
 <\/p>\n
Tabs and Fonts<\/h2>\n
Better still<\/span>,<\/span> you can use <\/span>FontImageSource<\/span><\/b><\/a> to have scalable vector graphics used for your icons<\/span>.<\/span> As well as<\/span> avoid all <\/span>that hassle<\/span> with resolution dependent images.<\/span>\u00a0<\/span><\/p>\n
A great source of fonts that can be used for <\/span>i<\/span>cons can be found at <\/span>FontAwesome<\/span><\/a> or <\/span>GlyphSearch<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n
\u00a0<\/span>Once you’ve downloaded you chosen .<\/span>tff<\/span> file to use the custom font you will need to embed a copy as local resource\/asset in the native projects to make them accessible from the <\/span>Xamarin.Forms<\/span> shared code.<\/span>\u00a0<\/span><\/p>\n
\u00a0<\/span>iOS and Android have different ways of reference embedded resources. In order to abstract out <\/span>these difference<\/span>s<\/span> and access the font resources consistently from XAML<\/span>,<\/span> we use the magic of <\/span>OnPlatform<\/span><\/b> in the Applications resource dictionary as shown below.<\/span>\u00a0<\/span><\/p>\n
<Application.Resources>\u00a0\r\n\u00a0\u00a0\u00a0<ResourceDictionary>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<OnPlatform x:TypeArguments=\"x:String\" x:Key=\"FontAwesomeSolid\">\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<On Platform=\"iOS\" Value=\"FontAwesome5Free-Solid\"\/>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<On Platform=\"Android\" Value=\"fa-solid-900.ttf#Solid\"\/>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/OnPlatform>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<OnPlatform x:TypeArguments=\"x:String\" x:Key=\"FontAwesomeRegular\">\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<On Platform=\"iOS\" Value=\"FontAwesome5Free-Regular\"\/>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<On Platform=\"Android\" Value=\"fa-regular-400.ttf#Regular\"\/>\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/OnPlatform>\u00a0\r\n\u00a0\u00a0\u00a0<\/ResourceDictionary>\u00a0\r\n<\/Application.Resources><\/pre>\n
\u00a0<\/span>Note, this process can be automated using a <\/span>third<\/span>–<\/span>party<\/span> tool such as <\/span>MFractor<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n