Skip to main content

Grial 4 Overview

Grial4_Hero

Grial offers a set of beautiful XAML UI pages, templates, controls and helpers made for Xamarin.Forms and .NET MAUI. These cover the most typical Mobile UI patterns and are crafted by developers, for developers.

Grial is based on the MVVM pattern ensuring a clean separation between the UI and the ViewModels through data bindings. Grial is framework agnostic so you can choose any MVVM framework you feel comfortable with.

We let you focus on the business logic and almost forget about the UI by providing:

  • 200+ ready-made XAML pages and templates
  • rich flexible layouts with animations and gradients
  • 6k icons
  • a rich UI control library that includes maps, floating menu, drawer, tabs, data grid, video player, checkboxes, and more
  • fast project setup and theme customization with Grial Web Admin

Need help?​

Please visit Grial support website.

We also provide preferential support on Grial 4 Pro plans.

Lastly, we can help designing and building your app through our Custom Design Services.

Supported Platforms​

Grial 4 supports .NET MAUI and latest Xamarin.Forms.

Target platforms are:

  • Android 6+ (API Level 23+)
  • iOS 11.0+

Flows, Pages, Templates and Themes explained​

Before we dig into project structure, let's speak about Grial conventions and nomenclature.

Across the documentation you will find concepts like "Page", "Template", "Flows" and "Themes", let's explain each one:

Flows​

Flows definition
  • Basically, those are a set of Grial pages integrated into "mini apps" that cover common user interaction patterns adding best UX practices, helping developers to accelerate their apps production and quality.
  • Normally they also include logic besides the UI.

Pages​

Page definition
  • As its name suggests, it is just a Page (a ContentPage from Xamarin.Forms). They represent cross-platform mobile application screens.
  • In Grial each page covers a common UI mobile pattern.
  • They often include Grial templates, controls, and other views.
  • The beauty of Grial is that you can recombine any of our pages' content/templates to create new content to suit your app needs.

Pages Conventions​

  • In Grial, every page gets a Page suffix in its file name, so for instance if a page shows a list of articles it will be called ArticlesListPage.xaml.
  • Each page belongs to a category, and each category is a sub-folder of the Views folder.

Templates​

Templates definition
  • A template in Grial is an independent XAML file that is used by parent layouts or pages.
  • They can be included directly or repeated through a ListView or a Grial's Repeater getting data through bindings.
  • They are implemented through ContentViews from Xamarin.Forms.

Templates Conventions​

  • The templates associated to a Grial page normally are located inside Templates folder inside the category folder that contains the page that references the template.
    • i.e.: For the Articles category, all its templates will be located inside that folder under a Templates folder.
  • When repeated they get the page's name that contains as a prefix plus the ItemTemplate suffix in the file name.
    • i.e.: ArticlesListPage.xaml will reference ArticlesListItemTemplate.xaml.

Themes​

  • A Grial theme is a set of XAML resources (colors, styles, measures, images, etc.) that provides a cohesive look and feel for your app.
  • Themes support right-to-left languages.

Themes Conventions​

  • A theme file has the Theme suffix in the file name.
    • i.e.: The Light theme will be in LightTheme.xaml.
  • When you download from Grial Web Admin, all changes made to the default themes will be saved on MyAppTheme.xaml. This is the default theme in Grial.