Calcite .NET Toolkit の紹介
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<CalciteResources xmlns="http://schemas.esri.com/calcite/2024" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>WPF の追加プロパティを使用すると、ダーク モードを設定したり、暗黙的なスタイル設定をオフにしたりできます。
WinUI
WinUI の場合、CalciteResources を XamlControlsResources エントリに追加する必要があります。暗黙的なスタイリングが不要な場合は、代わりに XamlControlsResources の前にエントリを挿入することもできます。
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" >
<XamlControlsResources.MergedDictionaries>
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</XamlControlsResources.MergedDictionaries>
</XamlControlsResources>
.NET MAUI
.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)。これらの詳細については、下記を参照してください。
- ブラシの完全なリスト: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/docs/brushes.md
- WPF スタイル: 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 は軽量のスタイル設定を使用するため、ほとんどの場合、スタイル全体ではなくスタイル ブラシをオーバーライドします)
- .NET MAUI スタイル: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/docs/maui.md#control-styles
アイコン
2,500 以上の Calcite UI アイコン全てに 3 つの詳細レベルを用意し、どのサイズでも鮮明なアイコンを表示することができます。これらは、汎用的なアイコンから GIS に関連したアイコンまで多岐にわたります。
これらには、フォントと文字コードを介して、またはライブラリによって提供されるマークアップ拡張機能を使用してアクセスできます。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 と .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 開発者コミュニティが見栄えの良いアプリケーションを構築するのをサポートするために、引き続きこの機能を構築していきます。
