.NET Biblioteca de estilos disponible para aplicaciones Calcite .NET Toolkit ha sido lanzada en versión preliminar. En este artículo, presentamos una traducción de Calcite .NET Toolkit basada en la publicación delEsri Community Blog titulada "Anunciando Calcite .NET Toolkit".
El equipo de ArcGIS Maps SDK for .NET no solo presenta las funcionalidades del API , sino que también necesitaba una biblioteca sencilla de estilos que proporcionara estilos e íconos estándar para crear muestras y demostraciones atractivas. Además, muchos usuarios preguntaban: “¿Cómo puedo usar ArcGIS Maps SDKs for Native Apps con Calcite?”
Calcite Design System ofrece numerosos componentes, estilos e íconos para la comunidad de desarrolladores de JavaScript, y hemos trabajado para construir algo similar para ArcGIS Maps SDKs for Native Appsでも同様のものを構築するために取り組んできました。そして、WPF、WinUI、.NET MAUI の強力な XAML スタイリング機能とマークアップ拡張機能を使って、それを実現するライブラリを構築しました。私たちは、このライブラリをデモやサンプルで幅広く使用する予定でおり、皆さんにとっても役立つものになることを願っています。
SDK に含まれるもの:
- Calcite Design System と一致する暗黙的または明示的なスタイル
- 2,500 を超える Calcite UI アイコンに簡単にアクセスできるマークアップ拡張機能
(現在) SDK に含まれていないもの:
- Calcite のコンポーネント セット (要望があれば、今後これらの一部を追加することを検討します)
このライブラリは、Calcite チームの承認のもとに、ArcGIS Maps SDK for .NET チームによって完全に構築されており、Calcite チームがメンテナンスしているわけではありません。そのため問題の報告やディスカッションは、この GitHub リポジトリ <ResourceDictionary.MergedDictionaries> <CalciteResources xmlns="http://schemas.esri.com/calcite/2024" /> </ResourceDictionary.MergedDictionaries></ResourceDictionary>
En WPF puede configurar modo oscuro o desactivar estilos implícitos mediante propiedades adicionales. En WinUI debe agregar CalciteResources a la entrada XamlControlsResources. Si no desea estilos implícitos, puede insertar la entrada antes de XamlControlsResources.<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"> <XamlControlsResources.MergedDictionaries> <CalciteResources xmlns="using:Esri.Calcite.WinUI" /> </XamlControlsResources.MergedDictionaries></XamlControlsResources> En .NET MAUI puede insertar recursos después del estilo predeterminado para estilos implícitos o antes para estilos explícitos.<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>
En .NET MAUI debe registrar el toolkit Calcite en AppBuilder dentro de MauiProgram.cs:
using Esri.Calcite.Maui; // Accede al método de extensión UseCalcite usado a continuaciónnamespace 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(); // Registrar Calcite
return builder.Build();
WPF
WPF では、App.xaml のリソース ディクショナリに CalciteResources を追加する必要があります。
<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)。これらの詳細については、下記を参照してください。
アイコン
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 Puede configurarlo explícitamente o dejarlo en el valor predeterminado para que el modo siga la configuración del sistema. Sin embargo, si está utilizando un pincel codificado que no se actualiza al cambiar al modo oscuro, se actualizará automáticamente cuando cambie el modo. Calcite debe cambiar al pincel.
Ejemplo
Ejemplo de demostración la mayoría se ha actualizado para usar la biblioteca,SDK muchas funciones y Calcite estilos para crear una aplicación completa, también se agregó un nuevo ejemplo de visor de mapas. Por favor, revise este ejemplo.https://github.com/Esri/arcgis-runtime-demos-dotnet/
Próximamente
El Calcite .NET Toolkit presentado en este artículo es la primera versión preliminar de un producto nuevo y emocionante. Esperamos sus comentarios sobre qué falta, qué mejorar y cómo lo usan.XAML Continuaremos desarrollando esta función para apoyar a la comunidad de desarrolladores a crear aplicaciones atractivas.
