Getting Started

The Modus MAUI components package is hosted publicly through the nuget.org

Installation

In your dotnet MAUI application, right click on the Dependencies -> Manage Nuget Packages and search and choose the Trimble.Modus.Components and click the Add Package

Here’s the direct link: Trimble.Modus.Components

Add the following using statement in your MauiProgram:

using Trimble.Modus.Components.Hosting;

Then register the handlers to use the Modus components

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseTrimbleModus()
            // register other handlers
        return builder.Build();
    }
}

Now you can use the controls in your app.

For Windows application, add the following in Platform/Windows/App.xaml file.

 <maui:MauiWinUIApplication.Resources>
      <StaticResource x:Key="ListViewItemBackgroundSelectedPointerOver"
                 ResourceKey="ListViewItemBackgroundColor" />
      <StaticResource x:Key="ListViewItemBackgroundSelected"
                 ResourceKey="ListViewItemBackgroundColor" />
      <SolidColorBrush x:Key="ListViewItemBackgroundColor"
                  Color="#DCEDF9" />
      <Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
      <Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
  </maui:MauiWinUIApplication.Resources>

Usage

Add the NuGet to the project as discussed in the above reference section.
Add the namespace as shown in the following code sample: xmlns:modus="http://modus.trimble.com/components"
Use the controls inside the ContentPage. E.g.

<modus:TMButton Text="Click Me!"
                LeftIconSource="email.png"
                Clicked="TMButton_Clicked" />

For more details about controls, visit each control’s respective documentation under the components section.

Customization

You can customize the theming of the modus controls by overriding the following color codes used in the components. Note: This is intended only to be used to re-brand the application for our partner’s needs.

Place all the custom colors in a xaml file and feed it to the modus during initialization. Refer the Color Codes section for color names

builder.UseTrimbleModus(new Resources.Styles.LightThemeColors(), new Resources.Styles.DarkThemeColors());

Color Codes:

 <Color x:Key="Primary">#0063A3</Color>
 <Color x:Key="PrimaryLight">#DCEDF9</Color>
 <Color x:Key="PrimaryDark">#004f83</Color>

 <Color x:Key="DefaultTextColor">#252A2E</Color>
 <Color x:Key="AlternateTextColor">#FFFFFF</Color>

 <Color x:Key="Danger">#DA212C</Color>
 <Color x:Key="DangerLight">#FBD4D7</Color>
 <Color x:Key="DangerDark">#AB1F26</Color>

 <Color x:Key="Tertiary">#CBCDD6</Color>
 <Color x:Key="TertiaryLight">#F1F1F6</Color>
 <Color x:Key="TertiaryDark">#B7B9C3</Color>

 <Color x:Key="Warning">#FBAD26</Color>
 <Color x:Key="WarningLight">#fff5e4</Color>
 <Color x:Key="WarningDark">#e49325</Color>

 <Color x:Key="Success">#1E8A44</Color>
 <Color x:Key="SuccessLight">#E0ECCF</Color>
 <Color x:Key="SuccessDark">#006638</Color>

 <Color x:Key="Secondary">#353A40</Color>
 <Color x:Key="SecondaryLight">#6A6E79</Color>
 <Color x:Key="SecondaryDark">#252A2E</Color>

 <Color x:Key="Transparent">transparent</Color>