|
BLOG
|
On the ArcGIS Maps SDK for .NET Team, we often need to build samples and demos that not only showcase API features but also look good. We wanted a simple styling library that gives us some standard styles and icons so we can focus most of our effort on the code without sacrificing aesthetics. We've also had numerous customers asking us "How do I use Calcite with [insert native SDK here]?". The Calcite Design System provides lots of components, styles, icons, and more for the JavaScript developer community, and we've worked hard to build something similar for the Native Maps SDKs. With WPF, WinUI, and .NET MAUI's powerful XAML styling capabilities and markup extensions, we've built a library that does just that. We plan to use it extensively in our demos and samples, and we hope you'll find it useful too. What's in the SDK: Implicit or explicit styles that match the Calcite Design System. Markup extensions with easy access to the over 2500 Calcite UI Icons. What isn't (currently) in the SDK: The Calcite set of components. If requested, we'll consider adding some of these in the future. This offering is built entirely by the ArcGIS Maps SDK for .NET Team and isn't maintained by the Calcite team (albeit with their blessing), and issues and discussions should be handled in our GitHub repository: https://github.com/Esri/calcite-dotnet-toolkit. Note that even though this library comes from the team that brought you ArcGIS Maps SDK for .NET, there's no dependency on it. You can use this library with any WPF, WinUI, or .NET MAUI application you're building. We encourage you to read the documentation on available brushes, markup extensions, and how to use them in each framework. We hope you'll try it and let us know where you'd like us to take this effort. At the ESRI Developer and Technology Summit, we'll be hosting a Demo Theater at 2:30 pm on Thursday, March 13, in Demo Theater 3. Getting started To get started use your NuGet package explorer, enable pre-release packages for search results, and add one of the following NuGet packages: Esri.Calcite.WPF Esri.Calcite.Maui Esri.Calcite.WinUI When you add the package, a readme will show you what you need to do to register the package and include the styles. WPF In WPF you need to add CalciteResources in App.xaml to the resource dictionary: <ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<CalciteResources xmlns="http://schemas.esri.com/calcite/2024" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary Note that additional properties in WPF allow you to set dark mode, or turn off implicit-styling. WinUI For WinUI you need to add the CalciteResources to the XamlControlsResources entry. If you don't want implicit styling, you can instead insert the entry before XamlControlsResources: <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" >
<XamlControlsResources.MergedDictionaries>
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</XamlControlsResources.MergedDictionaries>
</XamlControlsResources> .NET MAUI In .NET MAUI, insert the resources after the default style entries to make them implicit, or before to only have the styles available explicitly: <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> Additionally in .NET MAUI you must register the Calcite toolkit in the AppBuilder in MauiProgram.cs: using Esri.Calcite.Maui; // Get access to UseCalcite extension method used below
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();
}
}
} Usage With the inclusion of the resources, you'll get access to a range colors, brushes, styles, and icons, which enables you to style your application following the Calcite design system guidelines. If you're familiar with the Calcite design tokens, you'll find many equivalences and naming similarities, with only slight adaptations to naming patterns used in XAML. For instance, if you want to create a Primary and Secondary Calcite button apply the styles in the following way: <Button Content="OK" Style="{StaticResource CalcitePrimaryButtonStyle}" />
<Button Content="Cancel" Style="{StaticResource CalciteSecondaryButtonStyle}" /> The naming of styles generally follows the pattern of Calcite[Kind][ControlType]Style matching the naming patterns of other XAML styles provided by the platform. The last word is always the type of the resource, in this case, a "Style". Similarly, you'll find brushes like "CalciteBrandBrush" and "CalciteBrandColor" each of type Brush and Color (note that on MAUI colors have additional 'Light' or 'Dark' appended since colors don't support theming. For example CalciteBrandLightColor). You can find more information on these here: Full list of brushes: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/docs/brushes.md WPF Styles: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/docs/wpf.md#control-styles WinUI: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/docs/winui.md#control-styles (WinUI uses light-weight styling and thus mostly override style brushes instead of entire styles) .NET MAUI styles: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/docs/maui.md#control-styles Icons We also included the over 2500 Calcite UI icons in all 3 levels of detail for crisp locking icons at any size. These range from a wealth of generic icons, to lots of GIS related icons. You can access these either via a font and a character code, or using the markup extensions provided by the library. Here's a few examples of what that might look like in your XAML: WPF: <TextBlock Text="{StaticResource CalciteUIIcons_Glyph_Map}"
FontFamily="{StaticResource CalciteUIIconsMediumFontFamily}" />
<Path Data="{calcite:CalciteIconGeometry Icon=ChevronLeft, Scale=Small}" Fill="Green" Width="32" Height="32" Stretch="Uniform" />
<Image Source="{calcite:CalciteIconImage Icon=AddLayer, Scale=Large, SymbolSize=32, Brush=Blue}" Width="32" Height="32" /> WinUI: <TextBlock Text="{StaticResource CalciteUIIcons_Glyph_Map}"
FontFamily="{StaticResource CalciteUIIconsMediumFontFamily}" />
<IconSourceElement Width="32" Height="32" >
<IconSourceElement.IconSource>
<calcite:CalciteFontIconSource Icon="Map" FontSize="32" Scale="Large" />
</IconSourceElement.IconSource>
</IconSourceElement>
<AppBarButton Label="Zoom Out">
<AppBarButton.Icon>
<IconSourceElement IconSource="{calcite:CalciteIconSource Icon=ZoomOutFixed, Scale=Small}" />
</AppBarButton.Icon>
</AppBarButton> .NET MAUI: <Label Text="{StaticResource CalciteUIIcons_Glyph_Map}"
FontFamily="CalciteUIIconsMediumFontFamily" />
<Image>
<Image.Source>
<calcite:CalciteIconImageSource Color="Blue" Icon="MagnifyingGlass" Size="40" Scale="Large" />
</Image.Source>
</Image>
<Image Source="{calcite:CalciteIconImage Color=Blue, Icon=MagnifyingGlass,Size=40, Scale=Large}" /> Dark Mode WinUI and .NET MAUI fully supports dark and light modes. However, this feature is not fully implemented in WPF itself, so the Calcite Toolkit for .NET has implemented its own way of handling this. You can explicitly set Dark and LightMode on the CalciteResources, or leave it default and the mode will follow the system settings. Note though that if you have hardcoded brushes that don't update when switching to darkmode, you will need to switch to using Calcite brushes that auto-update on mode changes. Samples Most of our Demo samples have been updated to use the library, and we added a new big map viewer sample that pulls together most of our SDK and the Calcite styling to create a full fledged application. Check out our samples today: https://github.com/Esri/arcgis-runtime-demos-dotnet/ What's next This is our first preview of this exciting new offering. We're looking forward to hearing your feedback on what's missing, what could be better, and how you use it, so we can continue building this out to support the XAML developer community in building great-looking applications.
... View more
03-10-2025
10:46 AM
|
3
|
2
|
4521
|
|
POST
|
This should continue to work. Can you clarify what you mean by "doesn't work" ?
... View more
03-06-2025
08:59 AM
|
0
|
0
|
1452
|
|
POST
|
I would recommend focusing on getting Safari to work first. The iPhone can be pretty restrictive about security being set up right. The maps SDK rely on the same underlying architecture for web requests.
... View more
03-05-2025
09:35 AM
|
0
|
1
|
2166
|
|
POST
|
Your vector data must be in WebMercator for it to work with the 3D scene. 25833 isn't currently compatible. The scene itself is always 4326.
... View more
03-04-2025
11:09 AM
|
0
|
1
|
2258
|
|
POST
|
Please look at the output window when debugging and look for draw or load errors. You can also look at the layer's LoadStatus or the SceneView's LayerViewStateChanged event. My guess is it's some sort of tilingscheme not supported with the current data / spatial reference.
... View more
03-03-2025
02:01 PM
|
1
|
1
|
2299
|
|
POST
|
Yes as GKmieliauskas says there are also API keys. Basically the license key licenses the use of the SDK and removes the watermark from the map control. The API key is only needed if you want to use ArcGIS Location Services (like the esri vector basemaps etc). So quite often you'll need both. (or if you sign in as a portal user first, the api key won't be needed if that user has access those services)
... View more
02-24-2025
03:40 PM
|
1
|
0
|
1395
|
|
POST
|
This article seem to cover a bit half way down how to add the VCLibs as a dependency: https://learn.microsoft.com/en-us/windows/msix/desktop/desktop-to-uwp-prepare It does look like if I add the following, that it shows up in the manifest of the generated app package, but no idea if that'll do the trick: You could at least start with confirming whether it is a vclibs issue on the machine where you can reproduce, by installing the C++ Redistributable and verify if that addresses it.
... View more
02-20-2025
02:02 PM
|
1
|
0
|
3918
|
|
POST
|
I wonder if the machine is missing the C++ redistributable which is listed as a requirement for the .NET SDK (Visual Studio installs this too which explains why VS is fixing the crash) You could also try and use ProcDump to get a better idea why it is crashing. I've seen weird crashes like this in WinUI, and the error does point to their module.
... View more
02-20-2025
01:31 PM
|
0
|
0
|
3919
|
|
POST
|
If you have your elevation data as a raster image, you could use a Raster layer with a RasterRenderer applied that maps elevation to a color ramp.
... View more
02-18-2025
08:59 AM
|
1
|
1
|
1468
|
|
POST
|
Since you aren't using the Maps SDK for .NET MAUI but using the JavaScript SDK, it's not quite the right forum. However a quick google search reveals a few settings and things you need to do to enable location in embedded webviews: https://stackoverflow.com/questions/5329662/android-webview-geolocation
... View more
02-18-2025
08:56 AM
|
0
|
0
|
1114
|
|
POST
|
Instead of relying on the callback, could you try just creating the credential and adding it up front to the AuthenticationManager prior to adding the layer?
... View more
02-14-2025
10:23 AM
|
0
|
0
|
3982
|
|
POST
|
The SimulatedLocationDataSource is pretty basic and is mainly for quick testing scenarios. Your best option if you want full control is to create a subclass of LocationDatasource and call base.UpdateLocation with the updated location on an interval. You can use the GeometryEngine operations to calculate positions along a predefined line and calculate whatever speed and pauses you want. It would be a little bit of math and stuff to make work, but totally doable. The GeometryEngine.CreatePointAlong method is quite useful for this, as you'd just update the distance down the line based on the speed you want and get the new location.
... View more
02-12-2025
05:09 PM
|
1
|
0
|
591
|
|
POST
|
The maps sdk will utilize all CPU cores to make things as performant and responsive as possible. If you pan and zoom a lot, a lot of tiles could be downloaded and processed which can create spikes (especially on a fast internet connection). This is normal. On a slower PC it is still smart enough to know that if you already panned past a tile that didn't get a chance to get processed, and it'll skip it and move on. One thing to note though is to make sure you're not running in software rendering mode - that can often happen in remote desktop (except with .net9), WinForms embedding, or on some VMs or low-end GPUs and that'll put a lot more pressure on the CPU instead. If you want the most performance possible, WinUI uses a newer DirectX technology than WPF and integrates much better with Windows' rendering stack and is therefore able to squeeze out more rendering performance with less resources (and also suffers much less from the software rendering fallbacks mentioned above).
... View more
02-06-2025
02:36 PM
|
1
|
1
|
1059
|
|
POST
|
Sorry I meant trimming and not AoT. Remove the trimming you define here: https://github.com/julien-bertolini/WinUI-ArcGIS-TestApp/blob/4a2463e2825c656f95c212f939e7477c155fad95/WinUITestApp/WinUITestApp.csproj#L58 Our next release should support this better.
... View more
02-05-2025
01:16 PM
|
1
|
1
|
1831
|
| Title | Kudos | Posted |
|---|---|---|
| 2 | a week ago | |
| 2 | 03-19-2026 06:03 PM | |
| 1 | 03-03-2026 04:41 PM | |
| 1 | 02-26-2018 07:53 AM | |
| 1 | 02-26-2018 07:51 AM |
| Online Status |
Offline
|
| Date Last Visited |
yesterday
|