Develop Reference

Xamarin Forms Scaling Components with font size

Is it possible to scale labels, buttons, and frames with font size? I'm running into accessibility issues, where iOS has a few lines to disable all accessibility scaling and after googling android doesn't seem to have it at all. I have a number of components that have text inside and buttons that have custom fonts for arrows pause and play icons which are custom fonts. I need to scale the entire button around depending if the font size within the accessibility has been changed.
Only for iOS: Accessibility Scaling for Named Font Sizes on iOS, cannot find anything about android.
Another post: Getting Android/iOS Accessibility font sizes, first answer has this line of code for android Android.Content.Res.Resources.System.Configuration.FontScale but I can't seem to be able to access the Android.Content anywhere I try to use it.
Many Thanks in advance.
Edit: Temp Fix. Still would like to know if its even possible to do component scaling with fontsize.
Reference:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BugTestMediaElement.Page3">
<Shell.TitleView>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Red">
<Frame BackgroundColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Label Text="Test"
FontSize="{StaticResource ToolbarIconFontSize}"
TextColor="Black" />
</Frame>
</StackLayout>
</Shell.TitleView>
</ContentPage>

I use the following approach. In App.xaml file (application wide declarations), I make the following declarations:
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="ToolbarIconFontSize" x:TypeArguments="x:Double" Android="48" iOS="64" />
</ResourceDictionary>
</Application.Resources>
Then on a page (I use icons from FontAwesome), I make this declaration:
<Shell.TitleView>
<Grid Style="{StaticResource GridTitle}" RowDefinitions="*" ColumnDefinitions="*, 0.20*, 0.20*">
<!-- other declarations are skipped -->
<ImageButton Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" Command="{Binding SomeActionCommand}">
<ImageButton.Source>
<FontImageSource Glyph="{x:Static icons:IconFontGlyphNames.SomeActionSymbol}"
FontFamily="IconFontFamily"
Color="White"
Size="{StaticResource ToolbarIconFontSize}" />
</ImageButton.Source>
</ImageButton>
<!-- other declarations are skipped -->
</Grid>
</Shell.TitleView>
IconFontGlyphNames class declarations look like that:
public static class IconFontGlyphNames
{
public const string SomeActionSymbol = "\uf234";
// other declarations are skipped
}
I set fonts sizes for icons, and texts using this approach, and it works fine as for Android and for iOS platform.
Update #1. Explaining `Shell.TitleView` location.
Shell.TitleView is located here:
<ContentPage>
<Shell.TitleView>
<!-- Shell title view elements go here -->
</Shell.TitleView>
<ContentPage.Content>
<!-- Your page body elements go here -->
</ContentPage.Content>
</ContentPage>

WPF and FontAwesome problem with hyphenated icons

I am using FontAwesome in my WPF app for icons.
Everything works as expected with single name icons, but whenever I try to use a hyphenated icon name, the font does not understand this, and either does not draw anything, or it draws the two icons (left and right of the hyphen) individually (if they exist).
This draws the user icon. Great.
<!--FontAwesome Font applied in style-->
<TextBlock Style="{DynamicResource mainButtonImage}" Margin="5" Text="user"></TextBlock>
This, draws the User icon, a "-" and a circle icon. It should be the "user-circle" icon.
<TextBlock Style="{DynamicResource mainButtonImage}" Margin="5" Text="user-circle"></TextBlock>
It should be drawing this: https://fontawesome.com/icons/user-circle?style=regular
When I test in notepad on my system, it works as expected.
Any ideas?

I implemented the "user-circle" icon in two ways below:
Method 1:
1.You can install FontAwesome.WPF in project's Package NuGet Manager.
2.Import xmlns:fa="http://schemas.fontawesome.io/icons/" into your XAML code.
3.Use it into your TextBlock like this:
<fa:FontAwesome Icon="UserCircle" FontSize="100"></fa:FontAwesome>
Method 2:
1.Download font awesome at fontawesome.
2.Unzip the file and copy font to the project as a resource. The path is \Font\fa-regular-400.ttf.
3.Add FontAwesome style in Window.Resources:
<Window.Resources>
<Style x:Key="FontAwesome">
<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Font/#Font Awesome 5 Free Regular" />
</Style>
</Window.Resources>
4.Use style in TextBlock and write the Unicode code of user-circle in Text like this:
<TextBlock Text="" Style="{DynamicResource FontAwesome}" />
Maybe you can refer to these two methods to implement your program.

Can't show the icon for a button in Toolbar Items with UWP

I'm working on an app for the UWP and Android platforms. I want to set an icon for a button in the navigation toolbar. This is my code in XAML:
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="btnAbout" Text="ABOUT" Order="Primary" Clicked="OnNextPageButtonClicked"/>
</ContentPage.ToolbarItems>
and this is the code in the associated .cs file:
protected override void OnAppearing()
{
base.OnAppearing();
btnAbout.IconImageSource = ImageSource.FromResource("Monk.about.ico");
}
Everything works just fine on Android, but in UWP, even though I can click the button, I can't see the icon.
Where did I go wrong?

I found the solution, I write it for those who need it:
it was necessary to define the path of the icons according to the type of OS destination for compilation.
For Android I had to copy the image to all the "drawable ..." folders and set its compilation property as "AndroidResource".
For UWP I had to copy the png file to the Assets folder and then set its compilation property as "Content".
Finally, you must indicate in the XAML file which paths to use depending on the type of compilation. The code is as follows:
<ContentPage.ToolbarItems>
<ToolbarItem Text="ABOUT" Clicked="OnNextPageButtonClicked" Priority="0">
<ToolbarItem.IconImageSource>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="Android">info</On>
<On Platform="UWP">Assets/info.png</On>
</OnPlatform>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>

I can confirm that while UWP can display an .ico file in a Image element, it does not work with the BitmapIcon, which Xamarin.Forms uses underneath for ToolbarItem. Therefore you will unfortunately not be able to use this very file on UWP. However, you can convert your icon to a .png image and that will display on all platforms without problems.

Do the change of the code below and set the .ico file Properties> Build Action to Content.
Change:
btnAbout.IconImageSource = ImageSource.FromResource("Monk.about.ico");
To:
btnAbout.IconImageSource = ImageSource.FromFile("Monk.about.ico");
Or you could set the IconImageSource in XAML.
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary"
Text="Icon Item"
Priority="0"
IconImageSource="Monk.about.ico"
Clicked="OnItemClicked" />
My .ico file:
My result:

Why is the custom font not being used? Xamarin.Forms.iOS

I am working with custom fonts right now and currently a font named: "Yellowtail-Regular.tff". I created a map called Fonts in my iOS folder and I added the tff file in there. After that I went to my Info.plist and created a Fonts provided by application and in there I created a new string called Fonts/Yellowtail-Regular.ttf.
When I now try to use it like this:
<Label FontFamily = "Yellowtail" Text = "Testing my label" />
The standard font (Helvetica Neue) still remains. I also tried with:
<Label FontFamily = "Yellowtail-Regular" Text = "Testing my label" />
But with the same outcome.
Am I missing a step or am I doing something wrong?

If you are using Yellowtail-Regular.ttf from http://www.1001freefonts.com/yellowtail.font, then that font name under iOS would be just Yellowtail.
Each platform has different naming conventions, so using Device.OnPlatform might look something like:
public Label()
{
FontFamily = Device.OnPlatform("Yellowtail", "Yellowtail-Regular", "/Assets/Yellowtail-Regular.ttf#Yellowtail-Regular");
}
To confirm your iOS font family name, on macOS open your .ttf using Font Book and the name that macOS/iOS will use is the one in the title bar of the app.

Some times font book will display the name with spaces.
In my case:
Font name is : SFProDisplay-Ultralight. But the font book shown the
name as "SF Pro Display Ultralight". Due to this custom font is not working in iOS.
So you can use the below code to find the correct font name and apply it in the iOS.
Add this code in the AppDelegate launch method. Then you can find the list of viable font names in the Application output.
foreach (var family in UIFont.FamilyNames)
{
System.Diagnostics.Debug.WriteLine($"{family}");
foreach (var names in UIFont.FontNamesForFamilyName(family))
{
System.Diagnostics.Debug.WriteLine($"{names}");
}
}
After that you can use xaml to refer the font.
<OnPlatform x:Key="SFProDisplayUltraLight" x:TypeArguments="x:String">
<On Platform="iOS" Value="SFProDisplay-Ultralight" />
<On Platform="Android" Value="SF-Pro-Display-Ultralight.otf#SF Pro Display Ultralight" />
</OnPlatform>
Then Apply it for the control.
<Lable Text="Welcome" FontFamily="{StaticResource SFProDisplayUltraLight}"/>

How do I include an icon font?

I'm trying to include icon font in my wpf application, but my icon never appears and only displays a rectangle.
Projet structure :
MyProject/
-- Fonts/
-- myFont.ttf
-- MyWindow.xaml
MyWindow.xaml
<Label Text="" FontFamily="/Fonts/#myfont" />
"myfont" is the name of the font (the one I see after "Font name" when I double click on the file). The file's Build Action is set as "Resource".
I also tried the following :
Using style
<Window.Resources>
<Style x:key="MyFont">
<Setter property="TextElement.FontFamily"/Fonts/#myfont" />
</Style>
</Window.Resources>
<Label Text="" Style="{StaticResource MyFont}" />
Using pack URI
<Window.Resources>
<Style x:key="MyFont">
<Setter property="TextElement.FontFamily" value="v/Fonts/#myfont" />
</Style>
</Window.Resources>
<Label Text="" Style="{StaticResource MyFont}" />
None of them work. Moreover, the last one (with pack URI) generates an error. Something like an "index out of range error" (I have VS in French so I can't tell what the message is in English).
Already tried to find a solution on the internet, but all I could find was using pack URI, or checking that the name of the font is correct or that Build Action is set to "Resource".
Thank you.
EDIT
I precise that I don't want to use Blend. I would like to manage to do it directly in code. Thank you.

Wpf supports embedded fonts - the easiest way to set these up is to assign a font to a visual element, such as a label via the font family property. I normally use blend (part of visual studio) which displays a font manager button. You can then embed the font in your application from there.
Otherwise MSDN have a page which details other options. https://msdn.microsoft.com/en-us/library/ms753303%28v=vs.110%29.aspx
If you edit the .csproj file for your project and add the item group...
<ItemGroup>
<BlendEmbeddedFont Include="Fonts\ahronbd.ttf">
<IsSystemFont>True</IsSystemFont>
<All>True</All>
<AutoFill>True</AutoFill>
<Uppercase>True</Uppercase>
<Lowercase>True</Lowercase>
<Numbers>True</Numbers>
<Punctuation>True</Punctuation>
</BlendEmbeddedFont>
</ItemGroup>
You will need a Fonts folder with that .ttf file in there as part of your solution folder. This isn't pretty, but it will work without relying on additional tools.