Skip to content

Latest commit

 

History

History
286 lines (246 loc) · 7.65 KB

README.md

File metadata and controls

286 lines (246 loc) · 7.65 KB
Raw

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.