.NET Bibliothèque de styles disponible pour les applications Calcite .NET Toolkit version préliminaire publiée. Cet article présente ce Calcite .NET Toolkit ,Esri Community Blog dans l'article «Annonce de Calcite .NET Toolkit » traduit et présenté ici.
L'équipe ArcGIS Maps SDK for .NET souhaite non seulement présenter les fonctionnalités de l'API , mais aussi créer des exemples et des démonstrations attrayants, nécessitant une bibliothèque simple fournissant des styles et icônes standards. De plus, de nombreux utilisateurs ont demandé : « Comment utiliser ArcGIS Maps SDKs for Native Apps avec Calcite ? »
Calcite Design System offre de nombreux composants, styles et icônes pour la communauté des développeurs JavaScript, et nous avons travaillé à construire quelque chose de similaire pour JavaScript dans les ArcGIS Maps SDKs for Native Apps. En utilisant les puissantes fonctionnalités de style et d'extension de balisage XAML de ArcGIS Maps SDKs for Native Apps , nous avons créé une bibliothèque qui réalise cela. Nous prévoyons d'utiliser largement cette bibliothèque dans nos démonstrations et exemples, en espérant qu'elle sera utile pour vous aussi.WPF,WinUI,.NET MAUI , en tirant parti des puissantes capacités de style XAML et des extensions de balisage.XAML . Cette bibliothèque sera largement utilisée dans nos démos et exemples, et nous espérons qu'elle vous sera également utile.
Contenu du SDK:
- Styles implicites ou explicites correspondant au Calcite Design System
- Accès facile à plus de 2 500icônes Calcite UI via une extension de balisage
(Actuellement) Contenu non inclus dans le SDK:
- Ensemble de composants Calcite (nous envisageons d'ajouter certains sur demande future)
Cette bibliothèque a été entièrement développée par l'équipe ArcGIS Maps SDK for .NET avec l'approbation de l'équipe Calcite, mais n'est pas maintenue par l'équipe Calcite. Par conséquent, les rapports de problèmes et discussions se font sur ce dépôt GitHub (https://github.com/Esri/calcite-dotnet-toolkit)
Cette bibliothèque est fournie par l'équipe qui développe ArcGIS Maps SDK for .NET, mais elle n'a aucune dépendance à ArcGIS Maps SDK for .NET. Elle peut être utilisée dans les applications WPF, WinUI et .NET MAUI en cours de développement.
Pour les pinceaux disponibles, extensions de balisage, méthodes d'utilisation dans chaque framework, veuillez consulter la documentation sur GitHub. N'hésitez pas à essayer et à nous faire part de vos retours sur cette initiative.
Commencer
Tout d'abord, utilisez le gestionnaire de paquets NuGet pour activer la recherche [Inclure les versions préliminaires] puis ajoutez l'un des paquets NuGet suivants.NuGet [Inclure les versions préliminaires] NuGet
- Esri.Calcite.WPF
- Esri.Calcite.Maui
- Esri.Calcite.WinUI
Après avoir ajouté un paquet, les étapes nécessaires pour enregistrer le paquet et inclure les styles sont indiquées dans le fichier readme.readme
WPF
+ Dans WPF, vous devez ajouter CalciteResources au dictionnaire de ressources App.xaml.+ Dans App.xaml, ajoutez CalciteResources au ResourceDictionary.+ Dans App.xaml ResourceDictionary :+ Ajouter <CalciteResources xmlns="http://schemas.esri.com/calcite/2024" /> dans MergedDictionaries.+ Exemple : <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <CalciteResources xmlns="http://schemas.esri.com/calcite/2024" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
<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 Vous pouvez soit le définir explicitement, soit le laisser par défaut pour que le mode suive les paramètres système. Cependant, si vous utilisez un pinceau codé en dur qui ne se met pas à jour lors du passage en mode sombre, il sera automatiquement mis à jour lors du changement de mode. Calcite doit être changé en pinceau.
Exemple
Exemple de démonstrationa été mis à jour pour utiliser principalement la bibliothèque,SDK de nombreuses fonctionnalités et Calcite styles combinés pour créer une application complète.Un nouvel exemple de visualiseur de cartea également été ajouté. N'hésitez pas à consulter cet exemple.https://github.com/Esri/arcgis-runtime-demos-dotnet/
À venir
Le Calcite .NET Toolkit présenté dans cet article est la première version preview d'un produit passionnant. Nous attendons vos retours sur ce qui manque, ce qui doit être amélioré et comment vous l'utilisez.XAML Nous continuerons à développer cette fonctionnalité pour aider la communauté des développeurs à créer des applications attrayantes.
