Představení Calcite .NET Toolkit

yukiozawa4

.NET Knihovna stylů dostupná v aplikacích Calcite .NET Toolkit je nyní k dispozici ve verzi preview. V tomto článku přinášíme překlad příspěvku o Calcite .NET Toolkit , který byl zveřejněn na Esri Community Blog pod názvem „Announcing Calcite .NET Toolkit“.

 

Tým ArcGIS Maps SDK for .NET často potřeboval nejen představit funkce API, ale také vytvářet atraktivní ukázky a dema, proto bylo potřeba jednoduché knihovny stylů s běžnými styly a ikonami. Navíc jsme dostávali mnoho dotazů typu „ArcGIS Maps SDKs for Native Apps jak mohu použít Calcite ?“

Calcite Design System nabízí vývojářské komunitě JavaScriptu mnoho komponent, stylů a ikon a my jsme se snažili vytvořit podobné řešení i pro JavaScript ArcGIS Maps SDKs for Native Apps . S využitím silných funkcí stylování a markup rozšíření v WPF, WinUI, .NET MAUI jsme vytvořili knihovnu, která toto umožňuje. Plánujeme ji široce používat v dema a ukázkách a doufáme, že bude užitečná i pro vás.

 

Co je součástí SDK::

• Implicitní nebo explicitní styly odpovídající Calcite Design System
• Přístup k více než 2 500 ikonám Calcite UI pomocí markup rozšíření

 

(aktuálně) Co není součástí SDK::

• Sada komponent Calcite (na vyžádání zvážíme přidání některých z nich v budoucnu))

 

Tato knihovna byla kompletně vytvořena týmem ArcGIS Maps SDK for .NET s podporou týmu Calcite, ale není přímo udržována týmem Calcite. Proto prosím hlaste problémy a diskutujte o ní v tomto GitHub repositáři (https://github.com/Esri/calcite-dotnet-toolkit).

Knihovna je poskytována týmem, který vyvíjí ArcGIS Maps SDK for .NET, ale není na něm závislá. Může být použita v aplikacích postavených na WPF, WinUI a .NET MAUI.

Pro informace o dostupných štětcích, markup rozšířeních a použití v jednotlivých frameworcích navštivte dokumentaci na GitHubu. Vyzkoušejte ji a dejte nám zpětnou vazbu.

 

Začínáme

Nejprve použijte NuGet Package Manager, povolte volbu [Zahrnout předběžné verze] a přidejte jeden z následujících balíčků NuGet:NuGet [Zahrnout předběžné verze] NuGet balíčků.

• Esri.Calcite.WPF
• Esri.Calcite.Maui
• Esri.Calcite.WinUI

パッケージを追加すると、パッケージを登録してスタイルを含めるために必要な手順が readme に表示されます。

 

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)。これらの詳細については、下記を参照してください。

• ブラシの完全なリスト: 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 Můžete jej nastavit explicitně, nebo ponechat výchozí nastavení, aby režim sledoval systémové nastavení. Pokud však používáte pevně zakódovaný štětec, který se při přepnutí do tmavého režimu neaktualizuje, bude se automaticky aktualizovat při změně režimu.Calcitemusíte přepnout na štětec.

 

Ukázka

Demo ukázkavětšinu jsme aktualizovali tak, aby používala knihovnu,SDKmnoho funkcí aCalcitestyly pro vytvoření plnohodnotné aplikace.Přidali jsme také nový příklad mapového prohlížeče.Určitě si tento příklad prohlédněte.https://github.com/Esri/arcgis-runtime-demos-dotnet/

 

Plány do budoucna

Produkt uvedený v tomto článku, Calcite .NET Toolkitje první náhled vzrušující nové sady nástrojů. Těšíme se na vaši zpětnou vazbu o tom, co chybí, co by se mělo zlepšit a jak ji používáte.XAMLBudeme i nadále rozvíjet tuto funkci, abychom podpořili vývojářskou komunitu při vytváření atraktivních aplikací.