The icons I set for tabs in my Xamarin Forms 5 app work perfectly in Android but in iOS they're way too small.
I define them in the Shell -- see below:
<FlyoutItem Title="Home">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource HomeIcon}"
Color="White" />
</FlyoutItem.Icon>
<Tab Title="Tab 1">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource NewspaperIcon}"
Color="{StaticResource SecondaryDark}"
Size="15"/>
</Tab.Icon>
<ShellContent Route="News" ContentTemplate="{DataTemplate home:News}" />
</Tab>
<Tab Title="Contacts">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource ContactsIcon}"
Color="{StaticResource SecondaryDark}"
Size="15"/>
</Tab.Icon>
<ShellContent Route="Contacts" ContentTemplate="{DataTemplate home:Contacts}" />
</Tab>
<Tab Title="Settings">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource SettingsIcon}"
Color="{StaticResource SecondaryDark}"
Size="15"/>
</Tab.Icon>
<ShellContent Route="Settings" ContentTemplate="{DataTemplate home:Settings}" />
</Tab>
</FlyoutItem>
I can simply increase the Size=15
to something larger but then icons will get larger on Android as well.
How do I make sure the tab icons appear large enough on both platforms?
UPDATE:
I tried OnPlatform
as follows but I keep getting an error that reads:
Property 'Size' does not support values of type 'OnPlatform'1 (Size)
Here's how I implemented OnPlatform
:
<Tab Title="Tab 1">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource NewspaperIcon}"
Color="{StaticResource SecondaryDark}">
<FontImageSource.Size>
<OnPlatform x:TypeArguments="Size">
<On Platform="Android">15</On>
<On Platform="iOS">25</On>
</OnPlatform>
</FontImageSource.Size>
</FontImageSource>
</Tab.Icon>
<ShellContent Route="News" ContentTemplate="{DataTemplate home:News}" />
</Tab>
CodePudding user response:
<FontImageSource.Size>
<OnPlatform x:TypeArguments="Double">
<On Platform="Android">15</On>
<On Platform="iOS">25</On>
</OnPlatform>
</FontImageSource.Size>