Giter VIP home page Giter VIP logo

mauifontgallery's Introduction

MauiFontGallery

Sample Maui app demonstrating how to work with Fonts in an convenient way

Android iOS
Font Awesome The font awesome sample page on iOS The font awesome sample page on iOS
Material Symbols The material symbols page on iOS The material symbols page on iOS

Architecture

This sample app demonstrates my recommended way of architecting fonts into your maui app. It provides a portable & self contained class library that hosts all of the fonts, glyph names & font family names that can be easily referenced in code or xaml.

The architecture is as follows:

  • Maui app
  • .NET class library with <UseMaui>true</UseMaui>
  • MauiAppBuilder extension that registers all fonts
  • Font files bundled as MauiFont in the class library
  • FontConstant constants file for font family names (preventing magic strings)
  • Glyph constants files generated by fa2cs & md2cs (all credit to @matthewrdev)

To adapt this to your projects:

  • Rename the host builder extension, this should make sense for your library and application ie: "RegisterAcmeFonts"
  • Rename the fonts XmlnsDefinition to something that makes sense for your project / organisation

Ensure there is a hard project reference between your maui app and fonts project, there may be issues if the fonts project is not directly referenced (ie referenced via another project)

Icon Fonts

These are registered in the host builder and can be used in a variety of places to jazz up your app. They reduce the reliance on image assets and allow for greater control over appearances of the icons.

They are used in xaml very easily:

<Image xmlns:fonts="http://acmeapp.com/fonts">
    <Image.Source>
        <FontImageSource Glyph="{x:Static fonts:FontAwesomeIcons.ChevronRight}" FontFamily="{x:Static fonts:FontConstants.FontAwesomeSolid}"/>
    </Image.Source>
</Image>

mauifontgallery's People

Contributors

axemasta avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.