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!
| 🌟 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"
|
| 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 |
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}" />
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 |
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 |
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" />
...
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent