Frontend Design

Design Guidelines

These guidelines provide information about C# Markup elements and any tips or nuances that may not be easily discernable.

Grid Layout

Many pages in the application use the grid layout. By default, a Grid contains one row and one column. Using row and column definitions we can change how many rows and columns are on the page as well as how large each section is.

When defining rows and columns we can use integer values to set the height of rows or width of columns in undefined units (most likely pixels). However, we can also use * (Defined as Star in C#) which allocates any remaining space not taken by defined values.

We can also use stars to divide into fractions. Example: Rows.Define(Stars(2), Star) This creates 2 rows where the 1st row takes 2/3 of the screen while the 2nd row takes 1/3 of the screen.

Below is an example of defining 4 rows (One 80 unit high row and 3 evenly sized rows) and defining 2 columns (2 evenly sized columns)

RowDefinitions = Rows.Define(80, Star, Star, Star), ColumnDefinitions = Columns.Define(Star, Star),

Listview Data Binding

To bind data to a listview in C# Markup, we must define our ItemSource and our DataTemplate outside of the ListView element and bind our properties there.

See the Social View in application for example

Showing/Hiding the Tab Bar

Every page inheriting BasePage.cs will ensure the tab bar is shown when the page is appearing unless: To hide the tab bar on a page:

1. Override the OnAppearing() method
2. Ensure it doesn't call base.OnAppearing() (or if it needs to, call it before writing the line mentioned below)
3. It calls AppShell.SetTabBarIsVisible(false); Example:

protected override async void OnAppearing()
{
    await AppShell.Current.SetTabBarIsVisible(false);
}

Pages

• AppShell.cs holds the navigation and enables Hot Reload functionality for the application.
  • Tab navigation is handled by SimpleToolKit.SimpleShell with a RootPageContainer holding the navigation host and tab buttons
• All pages that show the tab bar should have a row at the bottom of the height defined in the Consts.cs TabBarHeight property

Page Transitions

• Tabbar transitions are set in AppShell.cs. Transitions to a page using a button are set in the button's onclick function.
• The application uses platform specific transitions that are located in Transitions.cs and use simple toolkit resources.

Popups

• Popups are managed via the Popup Service found in Helpers/PopupService.cs. The service supports a popup stack with the accompanying features (showing/hiding popups)
• Each popup is defined in a separate class that inherits from BasePopup.cs which allows all popups to be registered as transients in MauiProgram.cs.
• The Popup Service is registered as a singleton allowing it to be injected in all pages. Popups can be called using the service like so: _popupService.ShowPopup<ProfilePopupInterface>();