Esri.Calcite.Maui

.NET MAUI

Usage

Add the CalciteResources ResourceDictionary to your App.xaml Merged Directionary resources inside the default XamlControlsResources to get access to default styles and resources. Dark/Light mode is automatically handled and adjust to system or app settings.

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                <CalciteResources xmlns="http://schemas.esri.com/calcite/2024"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Next register Calcite in MauiProgram.cs:

using Esri.Calcite.Maui;

namespace MauiTests
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }).UseCalcite(); // Register Calcite

            return builder.Build();
        }
    }
}

If you don't want the default implicit Calcite styles, place the CalciteResources entry in App.xaml right before the Styles.xaml entry.

Using Brush resources

Brushes and colors can be referenced as static resources.

<Border Background="{StaticResource CalciteBrandBrush}">
  <Label Text="Hello Calcite" TextColor="{AppThemeBinding Light={StaticResource CalciteTextInverseLightColor}, Dark={StaticResource CalciteTextInverseDarkColor}}" />
</Border>

For a full list of calcite brushes and colors see Color and Brush resources.

Symbol Font

CalciteUIIconsSmallFontFamily, CalciteUIIconsMediumFontFamily and CalciteUIIconsLargeFontFamily FontFamilies are fonts with a set of symbols generated from the Calcite UI Icons repo. This font FontFamily can directly be referred to by its name CalciteUIIcons[Small/Medium/Large]FontFamily.

Example:

<Label Text="{StaticResource CalciteUIIcons_Glyph_Map}" 
	   FontFamily="CalciteUIIconsMediumFontFamily" />

For a full list of Glyph Resource IDs refer to the sample apps and the Calcite-UI-Icons repo.

Markup Extensions

CalciteIconImageSource : Converts an Icon to an Image Source. Example:

<Image>
    <Image.Source>
        <calcite:CalciteIconImageSource Color="Blue" Icon="MagnifyingGlass" Size="40" Scale="Large" />
    </Image.Source>
</Image>

CalciteIconImageExtension : Markup extension converting an Icon to an CalciteIconImageSource. Example:

<Image Source="{calcite:CalciteIconImage Color=Blue, Icon=MagnifyingGlass,Size=40, Scale=Large}" />

Control styles

• Buttons: CalcitePrimaryButtonStyle, CalciteSecondaryButtonStyle, CalciteDangerButtonStyle, CalciteDangerSecondaryButtonStyle
• ActivityIndicator: CalciteActivityIndicatorStyle
• IndicatorView: CalciteIndicatorViewStyle
• BoxView: CalciteBoxViewStyle
• CheckBox: CalciteCheckBoxStyle
• Label: CalciteLabelStyle
• ProgressBar: CalciteProgressBarStyle
• Slider: CalciteSliderStyle
• Switch: CalciteSwitchStyle
• Page: CalcitePageStyle
• Shell: CalciteShellStyle
• NavigationPage: CalciteNavigationPageStyle
• TabbedPage: CalciteTabbedPageStyle

Changing the brand colors

If you want to change the blue brand colors to match your own branding, redefine the following Color and Brush resources after declaring the CalciteResources in App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            <CalciteResources xmlns="http://schemas.esri.com/calcite/2024"/>
            <!-- Override brand color: -->
            <ResourceDictionary>
                <Color x:Key="CalciteBrandDarkColor">#8F53CA</Color>
                <Color x:Key="CalciteBrandLightColor">#7938B6</Color>
                <Color x:Key="CalciteBrandHoverDarkColor">#7938B6</Color>
                <Color x:Key="CalciteBrandHoverLightColor">#652E98</Color>
                <Color x:Key="CalciteBrandPressDarkColor">#652E98</Color>
                <Color x:Key="CalciteBrandPressLightColor">#51247A</Color>
                <SolidColorBrush x:Key="CalciteBrandBrush" Color="{AppThemeBinding Dark={StaticResource CalciteBrandDarkColor}, Light={StaticResource CalciteBrandLightColor}}" />
                <SolidColorBrush x:Key="CalciteBrandHoverBrush" Color="{AppThemeBinding Dark={StaticResource CalciteBrandHoverDarkColor}, Light={StaticResource CalciteBrandHoverLightColor}}" />
                <SolidColorBrush x:Key="CalciteBrandPressBrush" Color="{AppThemeBinding Dark={StaticResource CalciteBrandPressDarkColor}, Light={StaticResource CalciteBrandPressLightColor}}" />
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>