Unofficial implementation of the Esri Calcite styles for various .NET XAML Frameworks inspired by the Calcite Design System.
Add the CalciteResources ResourceDictionary to your App.xaml Merged Directionary resources 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>
<CalciteResources xmlns="http://schemas.esri.com/calcite/2024" Theme="Light" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" >
<XamlControlsResources.MergedDictionaries>
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</XamlControlsResources.MergedDictionaries>
</XamlControlsResources>
</ResourceDictionary.MergedDictionaries>
<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();
}
}
}
For brushes, replace the Color
postfix with Brush
.
Append Dark
or Light
before Color
for dark and light mode colors (does not apply to brush resource keys which automatically update based on application theme).
See https://github.com/Esri/calcite-colors/ for more information about the predefined Calcite colors, as well as the Calcite Colors & Theming documentation.
<Border Background="{StaticResource CalciteUIBrandBrush}">
<TextBlock Text="Hello Calcite">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource CalciteUITextInverseColor} />
</TextBlock.Foreground>
</TextBlock>
</Border>
<Border Background="{ThemeResource CalciteUIBrandBrush}">
<TextBlock Text="Hello Calcite">
<TextBlock.Foreground>
<SolidColorBrush Color="{ThemeResource CalciteUITextInverseColor} />
</TextBlock.Foreground>
</TextBlock>
</Border>
<Border Background="{StaticResource CalciteUIBrandBrush}">
<Label Text="Hello Calcite" TextColor="{AppThemeBinding Light={StaticResource CalciteUITextInverseLightColor}, Dark={StaticResource CalciteUITextInverseDarkColor}}" />
</Border>
CalciteUIIconsFontFamily
FontFamily is a font with a set of symbols generated from the Calcite UI Icons repo.
In WPF and WinUI this font can be referred to with the resource key CalciteUIIconsFontFamily
.
In .NET MAUI the FontFamily can directly be referred to by its name CalciteUIIconsFontFamily
.
<TextBlock Text="{StaticResource CalciteUIIcons_Glyph_Map_24}"
FontFamily="{StaticResource CalciteUIIconsFontFamily}" />
<Label Text="{StaticResource CalciteUIIcons_Glyph_Map_24}"
FontFamily="CalciteUIIconsFontFamily" />
For a fill list of Glyph Resource IDs refer to the sample apps and the Calcite-UI-Icons repo.
CalciteIconGeometryExtension
: Convert an Icon to a Path Geometry. Example:
<Path Data="{calcite:CalciteIconGeometry Icon=ChevronLeft, Scale=Small}" Fill="Green" Width="32" Height="32" Stretch="Uniform" />
CalciteIconImageExtension
: Convert an Icon to an Image Source. Example:
<Image Source="{calcite:CalciteIconImage Icon=AddLayer, Scale=Large, SymbolSize=32, Brush=Blue}" Width="32" Height="32" />
CalciteFontIconSource
: Converts an Icon to an IconSource. Example:
<IconSourceElement Width="32" Height="32" >
<IconSourceElement.IconSource>
<cal:CalciteFontIconSource Icon="Map" FontSize="32" Scale="Large" />
</IconSourceElement.IconSource>
</IconSourceElement>
Using in AppBarButtons in a command bar:
<CommandBar IsOpen="True">
<CommandBar.PrimaryCommands>
<AppBarButton Label="Zoom In">
<AppBarButton.Icon>
<IconSourceElement >
<IconSourceElement.IconSource>
<cal:CalciteFontIconSource Icon="ZoomInFixed" FontSize="16" Scale="Small" />
</IconSourceElement.IconSource>
</IconSourceElement>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Zoom Out">
<AppBarButton.Icon>
<IconSourceElement >
<IconSourceElement.IconSource>
<cal:CalciteFontIconSource Icon="ZoomOutFixed" FontSize="16" Scale="Small" />
</IconSourceElement.IconSource>
</IconSourceElement>
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
The markup extensions CalciteIconSourceElementExtension
and CalciteIconSourceExtension
can simplify creating IconSourceElement and IconSource even further:
<CommandBar IsOpen="True">
<CommandBar.PrimaryCommands>
<AppBarButton Label="Zoom In" Icon="{cal:CalciteIconSourceElement SymbolSize=22, Icon=ZoomInFixed, Scale=Small}" />
<AppBarButton Label="Zoom Out">
<AppBarButton.Icon>
<IconSourceElement IconSource="{cal:CalciteIconSource Icon=ZoomOutFixed, Scale=Small}" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
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}" />