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="clr-namespace:Esri.Calcite.WPF;assembly=Esri.Calcite.WPF" Theme="Light" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources> <Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources> <Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
<CalciteResources xmlns="clr-namespace:Esri.Calcite.Maui;assembly=Esri.Calcite.Maui"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>Also 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.
| Resource Key | Light Mode | Dark Mode |
|---|---|---|
| CalciteUIBrandColor |  #007AC2 |
 #00619B |
| CalciteUIBrandHoverColor | #00619B |
#007AC2 |
| CalciteUIBrandPressColor |  #004874 |
#00619B |
| CalciteUIBackgroundColor |  #F8F8F8 |
 #353535 |
| CalciteUIBackground1Color |  #FFFFFF |
 #2B2B2B |
| CalciteUIBackground2Color |  #F3F3F3 |
 #202020 |
| CalciteUIBackground3Color |  #EAEAEA |
 #151515 |
| CalciteUIText1Color | #151515 |
 #FFFFFF |
| CalciteUIText2Color |  #4A4A4A |
 #BFBFBF |
| CalciteUIText3Color |  #6A6A6A |
 #9F9F9F |
| CalciteUITextHighlightColor |  #BBD5FA |
 #375F95 |
| CalciteUITextInverseColor | #FFFFFF |
#151515 |
| CalciteUITextLinkColor | #00619B |
 #00A0FF |
| CalciteUIBorder1Color |  #CACACA |
 #555555 |
| CalciteUIBorder2Color |  #D4D4D4 |
#4A4A4A |
| CalciteUIBorder3Color |  #DFDFDF |
 #404040 |
| CalciteUIBorderInputColor |  #949494 |
 #757575 |
| CalciteUIInfoColor | #00619B |
#00A0FF |
| CalciteUISuccessColor |  #35AC46 |
 #36DA43 |
| CalciteUIWarningColor |  #EDD317 |
 #FFC900 |
| CalciteUIDangerColor |  #D83020 |
 #FE583E |
| CalciteUIDangerHoverColor |  #A82B1E |
 #FF0015 |
| CalciteUIDangerPressColor |  #7C1D13 |
 #D90012 |
<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>Calcite-UI-Icons 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 Calcite-UI-Icons.
In .NET MAUI the FontFamily can directly be referred to by its name calcite-ui-icons.
<TextBlock Text="{StaticResource Calcite_UIIcons_Glyph_Map_24}"
FontFamily="{StaticResource Calcite-UI-Icons}" /><Label Text="{StaticResource Calcite_UIIcons_Glyph_Map_24}"
FontFamily="calcite-ui-icons" />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="{c: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}" />
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent