.NET アプリで利用可能なスタイル ライブラリ Calcite .NET Toolkit のプレビュー版が公開されました。本記事では、この Calcite .NET Toolkit について、Esri Community Blog の「Announcing Calcite .NET Toolkit」を翻訳してご紹介します。
ArcGIS Maps SDK for .NET チームでは、API の機能を紹介するだけでなく、見栄えの良いサンプルやデモの作成が必要となることがよくあり、標準的なスタイルやアイコンを提供するシンプルなスタイリング ライブラリが必要でした。また、多くのユーザーから「ArcGIS Maps SDKs for Native Apps で Calcite を使用するにはどうすればよいですか?」という質問を受けてきました。
Calcite Design System は、JavaScript 開発者コミュニティのために多くのコンポーネント、スタイル、アイコンなどを提供しており、ArcGIS Maps SDKs for Native Apps でも同様のものを構築するために取り組んできました。そして、WPF、WinUI、.NET MAUI の強力な XAML スタイリング機能とマークアップ拡張機能を使って、それを実現するライブラリを構築しました。私たちは、このライブラリをデモやサンプルで幅広く使用する予定でおり、皆さんにとっても役立つものになることを願っています。
SDK に含まれるもの:
(現在) SDK に含まれていないもの:
このライブラリは、Calcite チームの承認のもとに、ArcGIS Maps SDK for .NET チームによって完全に構築されており、Calcite チームがメンテナンスしているわけではありません。そのため問題の報告やディスカッションは、この GitHub リポジトリ (https://github.com/Esri/calcite-dotnet-toolkit) で行います。
このライブラリは、ArcGIS Maps SDK for .NET を開発したチームが提供していますが、ArcGIS Maps SDK for .NET との依存関係はありません。このライブラリは、構築中の WPF、WinUI、.NET MAUI アプリケーションで使用できます。
利用可能なブラシ、マークアップ拡張、各フレームワークでの使用方法等については、GitHub のドキュメントをご確認ください。ぜひお試しいただき、この取り組みについてご意見をお聞かせください。
まず、NuGet パッケージ マネージャーを使用して、検索の [プレリリースを含める] を有効にし、次の NuGet パッケージのいずれかを追加します。
パッケージを追加すると、パッケージを登録してスタイルを含めるために必要な手順が readme に表示されます。
WPF では、App.xaml のリソース ディクショナリに CalciteResources を追加する必要があります。
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<CalciteResources xmlns="http://schemas.esri.com/calcite/2024" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
WPF の追加プロパティを使用すると、ダーク モードを設定したり、暗黙的なスタイル設定をオフにしたりできます。
WinUI の場合、CalciteResources を XamlControlsResources エントリに追加する必要があります。暗黙的なスタイリングが不要な場合は、代わりに XamlControlsResources の前にエントリを挿入することもできます。
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" >
<XamlControlsResources.MergedDictionaries>
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</XamlControlsResources.MergedDictionaries>
</XamlControlsResources>
.NET MAUI では、リソースをデフォルトのスタイル エントリの後に挿入して暗黙的なものにするか、その前に挿入してスタイルだけを明示的に利用できるようにします。
<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>
.NET MAUI では、MauiProgram.cs の AppBuilder に Calcite ツールキットを登録する必要があります。
using Esri.Calcite.Maui; // 以降で使用される UseCalcite 拡張メソッドにアクセスします
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(); // Calcite を登録する
return builder.Build();
}
}
}
リソースを含めると、さまざまなカラー、ブラシ、スタイル、およびアイコンにアクセスできるようになり、Calcite Design System ガイドラインに従ってアプリケーションをスタイル設定できます。Calcite デザイン トークンに精通している場合、XAML で使用される命名パターンにわずかに適応するだけで、多くの同等性と命名の類似性を見つけることができます。たとえば、プライマリとセカンダリの Calcite ボタンを作成する場合は、次のようにスタイルを適用します。
<Button Content="OK" Style="{StaticResource CalcitePrimaryButtonStyle}" />
<Button Content="Cancel" Style="{StaticResource CalciteSecondaryButtonStyle}" />
スタイルの命名は一般的に、プラットフォームが提供する他の XAML スタイルの命名パターンに一致する Calcite[Kind][ControlType]Style のパターンに従います。最後の単語は常にリソースのタイプで、この場合は Style です。同様に、CalciteBrandBrush や CalciteBrandColor のような場合は、それぞれ Brush と Color タイプです。MAUI では、カラーはテーマ設定をサポートしないため、カラーにはさらに 'Light' または 'Dark' が追加されます(例: CalciteBrandLightColor)。これらの詳細については、下記を参照してください。
2,500 以上の Calcite UI アイコン全てに 3 つの詳細レベルを用意し、どのサイズでも鮮明なアイコンを表示することができます。これらは、汎用的なアイコンから GIS に関連したアイコンまで多岐にわたります。
これらには、フォントと文字コードを介して、またはライブラリによって提供されるマークアップ拡張機能を使用してアクセスできます。XAML でどのように表示されるかの例を示します。
<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" />
<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>
<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}" />
WinUI と .NET MAUI は、ダーク モードとライト モードを完全にサポートしています。ただし、この機能は WPF 自体には完全に実装されていないため、Calcite Toolkit for .NET では独自の方法でこれを処理しています。CalciteResources で DarkMode と LightMode を明示的に設定するか、デフォルトのままにしてモードがシステム設定に従うようにすることもできます。ただし、ダーク モードに切り替えても更新されないハードコードされたブラシを使用している場合は、モード変更時に自動更新される Calcite ブラシに切り替える必要があります。
デモ サンプルのほとんどをライブラリを使用するように更新して、SDK の多くの機能と Calcite スタイルを組み合わせて本格的なアプリケーションを作成するための新しいマップ ビューアー サンプルも追加しました。ぜひ、このサンプルを確認してください。https://github.com/Esri/arcgis-runtime-demos-dotnet/
この記事で紹介した Calcite .NET Toolkit は、エキサイティングな新製品の最初のプレビュー版です。何が足りないか、何を改善するべきか、そして、それをどのように使用するかなど、皆様からのフィードバックをお待ちしています。XAML 開発者コミュニティが見栄えの良いアプリケーションを構築するのをサポートするために、引き続きこの機能を構築していきます。