Xamarin Forms iOS & Android Template
^{FontAwesome & Custom Controls}

I developed this as a base template for my iOS and Android apps.

If you have any ideas on what else should be included as a standard template, generally something you include in all apps, let me know!

 

Features

Implementations

🌟 FontAwesome
Source	matthewrdev/fa2cs (adapted version) Font Awesome Cheat Sheet (Feb 2022)
Details	Uses FontAwesomeRegular.cs, FontAwesomeSolid.cs, and FontAwesomeBrands.cs to retrieve the FontAwesome glyph from "FARegular", "FASolid", or "FABrands"

 

Controls and Renderers

StandardEntry : Entry
Source	jesulink2514/XamlBooksApp
Details	int CornerRadius int BorderThickness Color BorderColor Thickness Padding

CustomSearchBar : SearchBar
Source	jesulink2514/XamlBooksApp
Details	int CornerRadius int BorderThickness Color BorderColor Color IconColor

CustomLabel : Label
Details	int MinimumFontSize int MaximumFontSize

StandardCollectionView : CollectionView
Details	object ScrollToItem

 

 

Usage

FontAwesome

This version differs to matthewrdev's fa2cs in that it requires the developer to asign the specific class, corresponding to the font family, then allows the developer to freely select the glyph from IntelliSense's suggestions. Whereas with fa2cs, you need to predetermine the glyph and it's corresponding font.

First and foremost, download the Fonts folder from the project and import it into your project.
Make sure you have the Build Action (in Properties) set to Embedded resource for each font (.otf file).
Then in the AssemblyInfo.cs file, in your project, add the following:

[assembly: ExportFont("FontAwesomeRegular.otf", Alias = "FARegular")]
[assembly: ExportFont("FontAwesomeSolid.otf", Alias = "FASolid")]
[assembly: ExportFont("FontAwesomeBrands.otf", Alias = "FABrands")] 

Finally, go ahead in your .xaml file and add the namespace to the root node:

...
xmlns:fa="clr-namespace:FontAwesome"
...

ShellContent Icon

<ShellContent Title="About" ContentTemplate="{DataTemplate local:AboutPage}">
  <ShellContent.Icon>
    <FontImageSource FontFamily="FARegular" Glyph="{x:Static fa:FontAwesomeRegular.AddressBook}" />
  </ShellContent.Icon>
</ShellContent>

Image

<Image>
  <Image.Source>
    <FontImageSource FontFamily="FARegular" Glyph="{x:Static fa:FontAwesomeRegular.AddressBook}" />
  </Image.Source>
</Image>

Label

<Label FontFamily="FARegular" Text="{x:Static fa:FontAwesomeRegular.AddressBook}" />

 

StandardEntry

I don't think I modified the control or renderers in anyway, but it is excellent for virtually all applications. See the original for more information: jesulink2514/XamlBooksApp

Firstly, add the namespace:

...
xmlns:controls="clr-namespace:FontAwesomeTabbed.Controls"
...

  <controls:StandardEntry
            Padding="20,10,20,10"
            BorderColor="LightGray"
            TextColor="Black"
            BorderThickness="1"
            CornerRadius="20"
            Placeholder="Full Name" />

Platform	Associated files
Android	Renderers/StandardEntryRenderer.cs
iOS	Renderers/iOSStandardEntryRenderer.cs
iOS	Renderers/UITextFieldPadding.cs

 

CustomSearchBar

This differs from jesulink2514's XamlBooksApp by having a control but still using the XamlBooksApp SearchBar iOS and Android renderers.

Add the namespace:

...
xmlns:controls="clr-namespace:FontAwesomeTabbed.Controls"
...

<controls:CustomSearchBar Text="{Binding SearchText}"
                          SearchCommand="{Binding SearchCommand}"
                          BackgroundColor="White"
                          Placeholder="Search icon..."
                          PlaceholderColor="Gray"
                          TextColor="Black"
                          CornerRadius="30"
                          IconColor="{x:StaticResource Primary}" />

Platform	Associated files
Android	Renderers/CustomSearchBarRenderer.cs
iOS	Renderers/iOSCustomSearchBarRenderer.cs

 

CustomLabel

Add the namespace:

...
xmlns:controls="clr-namespace:FontAwesomeTabbed.Controls"
...

<controls:StandardLabel HeightRequest="120"
                        Text="This font size will auto fir the container, but make sure you set the HeightRequest"
                        MinimumFontSize="8"
                        MaximumFontSize="24" />

 

StandardCollectionView

...
xmlns:controls="clr-namespace:FontAwesomeTabbed.Controls"
...

<controls:StandardCollectionView ItemsSource="{Binding Icons}"
                                 ScrollToItem="{Binding ScrollToIcon}">
</controls:StandardCollectionView>

ScrollToItem takes an object and scrolls to it's position, within the CollectionView source.

In the template, I've used Commands in Buttons to change the value of the ScrollToIcon variable; scroll to top, and scroll to bottom.