Esri.Calcite.WPF

WPF

Usage

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>

You can set the Theme to Light, Dark or Default, where Default will automatically follow the system styling.

If you just want access to the resources and explicit styles, but not inherit any implicit styling, set IsCalciteImplicitStylingEnabled="False" on the CalciteResources entry.

Using Brush resources

Brushes and colors can be referenced as dynamic resources.

<Border Background="{DynamicResource CalciteBrandBrush}">
  <TextBlock Text="Hello Calcite">
     <TextBlock.Foreground>
        <SolidColorBrush Color="{DynamicResource CalciteTextInverseColor} />
     </TextBlock.Foreground>
  </TextBlock>
</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:

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

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

Markup Extensions

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" />

Control styles

List of default control styles. These styles are applied implicitly unless implicit styles are disabled (IsCalciteImplicitStylingEnabled = false).

• Button: CalciteButtonBaseStyle
• Calendar: CalciteCalendarStyle
• CheckBox: CalciteCheckBoxStyle
• ComboBox: CalciteComboBoxStyle
• DataGrid: CalciteDataGridStyle
• DatePicker: CalciteDatePickerStyle
• DocumentViewer: CalciteDocumentViewerStyle
• Expander: CalciteExpanderStyle
• GroupBox: CalciteGroupBoxStyle
• ListView: CalciteListViewStyle
• PasswordBox: CalcitePasswordBoxStyle
• ProgressBar: CalciteProgressBarStyle
• RadioButton: CalciteRadioButtonStyle
• Slider: CalciteSliderStyle
• StatusBar: CalciteStatusBarStyle
• StatusBarItem: CalciteStatusBarItemStyle
• TabControl: CalciteTabControlStyle
• TextBlock: CalciteTextBlockStyle
• TextBox: CalciteTextBoxStyle
• ToggleButton: CalciteButtonBaseStyle
• ToolBar: CalciteToolBarStyle
• ToolTip: CalciteToolTipStyle
• TreeView: CalciteTreeViewStyle

Style	Target Type	Description	Example
CalcitePrimaryButtonBaseStyle	ButtonBase	Primary button style
CalcitePrimaryButtonStyle	Button	Primary button style
CalciteSecondaryButtonBaseStyle	ButtonBase	Secondary button style
CalciteSecondaryButtonStyle	Button	Secondary button style
CalciteDangerButtonBaseStyle	ButtonBase	Danger button style
CalciteDangerButtonStyle	Button	Danger button style
CalciteDangerSecondaryButtonBaseStyle	ButtonBase	Danger secondary button style
CalciteDangerSecondaryButtonStyle	Button	Danger secondary button style
CalciteFormBorderStyle	Border	Applies the default form padding to contained elements
CalciteFormExpanderStyle	Expander	GroupBox with extra padding for form elements
CalciteBrandAlertGroupBoxStyle	GroupBox	GroupBox with a brand color top line
CalciteSuccessAlertGroupBoxStyle	GroupBox	GroupBox with a brand color top line
CalciteWarningAlertGroupBoxStyle	GroupBox	GroupBox with a yellow top line for warnings
CalciteDangerAlertGroupBoxStyle	GroupBox	GroupBox with a red top line for warnings
CalcitePanelGroupBoxStyle	GroupBox	A simple header/content group box style
CalciteSidePanelFormGroupBoxStyle	GroupBox	Same as CalcitePanelGroupBoxStyle but for side panels with no margin or drop shadows
CalciteGroupBoxStyle	GroupBox	The default group box style
CalciteLabeledGroupBoxStyle	GroupBox	Bold Header for simple grouping of sub-elements
CalciteActionPadToolBarStyle	Toolbar	Same as the default toolbar but with a drop shadow to place on top of other view areas
CalciteVerticalToolBarStyle	Toolbar

Known Issues

When using dark mode, the background of the Window instances will not change due to this WPF bug causing the default Window style to not get applied. To work around this issue, explicitly set the Window style on your Window:

<Window Style="{StaticResource CalciteWindowStyle}" >