[WPF] Calcite integration

src/Directory.Packages.props

@@ -15,6 +15,7 @@
     <PackageVersion Include="Esri.ArcGISRuntime.UWP" Version="$(ArcGISMapsSDKVersion)" />
     <PackageVersion Include="Esri.ArcGISRuntime.Toolkit.UWP" Version="$(ArcGISMapsSDKVersion)" />
     <PackageVersion Include="Esri.ArcGISRuntime.Toolkit.WinUI" Version="$(ArcGISMapsSDKVersion)" />
+    <PackageVersion Include="Esri.Calcite.WPF" Version="1.0.0-rc.1" />
     <PackageVersion Include="Esri.Calcite.Maui" Version="1.0.0-rc.1" />
     <PackageVersion Include="Esri.Calcite.WinUI" Version="1.0.0-rc.1" />
     <PackageVersion Include="Markdig" Version="0.37.0" />

src/WPF/WPF.Viewer/ApiKeyPrompt.xaml

@@ -1,42 +1,44 @@
 <UserControl x:Class="ArcGIS.ApiKeyPrompt"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             Width="500"
-             Height="220">
-    <StackPanel Orientation="Vertical">
-        <TextBlock x:Name="Instructions"
-                   Margin="5"
-                   TextWrapping="Wrap">
-            Some content used in the samples requires an API key to access ArcGIS location services. Go to <Hyperlink NavigateUri="https://links.esri.com/create-an-api-key" RequestNavigate="Hyperlink_RequestNavigate">
-                the developer documentation tutorial
-            </Hyperlink>
-            to create a new API key.</TextBlock>
-        <TextBlock Margin="5" TextWrapping="Wrap" Text="Ensure that your API key privileges include basemaps, geocoding and routing services to run all samples." />
-        <StackPanel Orientation="Horizontal">
-            <Label Content="Current Api Key:" />
-            <TextBox x:Name="CurrentKeyText"
-                     Width="375"
-                     Margin="5,0,0,0"
-                     HorizontalScrollBarVisibility="Visible"
-                     IsReadOnly="True" />
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ScrollViewer>
+        <StackPanel Orientation="Vertical">
+            <TextBlock x:Name="Instructions"
+               Margin="5"
+               TextWrapping="Wrap">
+        Some content used in the samples requires an API key to access ArcGIS location services. Go to <Hyperlink NavigateUri="https://links.esri.com/create-an-api-key" RequestNavigate="Hyperlink_RequestNavigate">
+            the developer documentation tutorial
+        </Hyperlink>
+        to create a new API key.</TextBlock>
+            <TextBlock Margin="5" TextWrapping="Wrap" Text="Ensure that your API key privileges include basemaps, geocoding and routing services to run all samples." />
+            <StackPanel Orientation="Horizontal">
+                <Label Content="Current Api Key:" />
+                <TextBox x:Name="CurrentKeyText"
+                         Width="375"
+                         Margin="5,0,0,0"
+                         HorizontalScrollBarVisibility="Visible"
+                         IsReadOnly="True" />
+            </StackPanel>
+            <TextBox x:Name="KeyEntryBox"
+                     Width="475"
+                     Height="35"
+                     Margin="5"
+                     HorizontalAlignment="Left"
+                     HorizontalScrollBarVisibility="Auto"
+                     Text="" />
+            <StackPanel Orientation="Horizontal">
+                <Button x:Name="SetKeyButton"
+                        Margin="5"
+                        Style="{StaticResource CalciteSecondaryButtonStyle}"
+                        Click="SetKeyButton_Click"
+                        Content="Set API key" />
+                <Button x:Name="DeleteKeyButton"
+                        Margin="5"
+                        Style="{StaticResource CalciteDangerSecondaryButtonStyle}"
+                        Click="DeleteKeyButton_Click"
+                        Content="Delete API key" />
+            </StackPanel>
+            <TextBlock x:Name="Status" Margin="5,0,0,0" />
         </StackPanel>
-        <TextBox x:Name="KeyEntryBox"
-                 Width="475"
-                 Height="35"
-                 Margin="5"
-                 HorizontalAlignment="Left"
-                 HorizontalScrollBarVisibility="Auto"
-                 Text="" />
-        <StackPanel Orientation="Horizontal">
-            <Button x:Name="SetKeyButton"
-                    Margin="5"
-                    Click="SetKeyButton_Click"
-                    Content="Set API key" />
-            <Button x:Name="DeleteKeyButton"
-                    Margin="5"
-                    Click="DeleteKeyButton_Click"
-                    Content="Delete API key" />
-        </StackPanel>
-        <TextBlock x:Name="Status" Margin="5,0,0,0" />
-    </StackPanel>
+    </ScrollViewer>
 </UserControl>

src/WPF/WPF.Viewer/App.xaml

@@ -11,6 +11,14 @@
             <!--  General Style files  -->
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Resources\ControlStyles.xaml" />
+                <CalciteResources xmlns="http://schemas.esri.com/calcite/2024" Theme="Light" />
+                <ResourceDictionary>
+                    <!-- Overriding brand brushes: -->
+                    <Color x:Key="CalciteBrandColor" >#7938B6</Color>
+                    <Color x:Key="CalciteBrandHoverColor" >#652E98</Color>
+                    <Color x:Key="CalciteBrandPressColor" >#51247A</Color>
+                    <Color x:Key="CalciteBrandUnderlineColor">#7938B6</Color>
+                </ResourceDictionary>
             </ResourceDictionary.MergedDictionaries>
 
             <Style x:Key="HeaderTextBlock" TargetType="TextBlock">

src/WPF/WPF.Viewer/ArcGIS.WPF.Viewer.Net.csproj

@@ -34,9 +34,6 @@
     <Resource Include="Assets\**\*.ico" />
     <EmbeddedResource Include="Resources\PictureMarkerSymbols\*.png" />
     <Resource Include="Resources\*.png" />
-    <Resource Include="Resources\Fonts\calcite-ui-icons-24.ttf">
-      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
-    </Resource>
     <Content Include="Samples\**\*.jpg">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
@@ -63,6 +60,7 @@
     <PackageReference Include="Esri.ArcGISRuntime.LocalServices" />
     <PackageReference Include="Esri.ArcGISRuntime.Toolkit.WPF" />
     <PackageReference Include="Esri.ArcGISRuntime.WPF" />
+    <PackageReference Include="Esri.Calcite.WPF" />
     <PackageReference Include="Markdig" />
     <PackageReference Include="Microsoft.Web.WebView2" />
     <PackageReference Include="System.Speech" />

src/WPF/WPF.Viewer/Controls/SearchTextBox.xaml

@@ -1,6 +1,7 @@
 <UserControl x:Class="ArcGIS.Controls.SearchTextBox"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:calcite="http://schemas.esri.com/calcite/2024">
     <Grid>
         <TextBox x:Name="SearchBox"
                  Width="250"
@@ -30,17 +31,17 @@
                 BorderBrush="Transparent"
                 Click="Clear_Clicked"
                 Visibility="Collapsed">
-            <Image MaxWidth="16"
-                   MaxHeight="16"
-                   Source="../Resources/ic_menu_closeclear_light.png" />
+            <Path Data="{calcite:CalciteIconGeometry Icon=X, Scale=Small}"
+                  Fill="{DynamicResource CalciteText2Brush}"
+                  Width="10" Height="10"
+                  Stretch="Uniform" />
         </Button>
-        <Image x:Name="SearchImage"
-               MaxWidth="16"
-               MaxHeight="16"
-               Margin="5"
-               HorizontalAlignment="Right"
-               VerticalAlignment="Center"
-               Source="../Resources/ic_menu_find_light.png"
-               Visibility="Visible" />
+        <Path x:Name="SearchImage"
+              Data="{calcite:CalciteIconGeometry Icon=Search, Scale=Small}"
+              Fill="{DynamicResource CalciteText2Brush}"
+              HorizontalAlignment="Right"
+              Margin="5"
+              Width="16" Height="16"
+              Stretch="Uniform" />
     </Grid>
 </UserControl>

src/WPF/WPF.Viewer/Converters/DirectionPointTypeToIconConverter.cs

@@ -2,16 +2,17 @@
 using System.Collections.Generic;
 using System.Globalization;
 using System.Windows.Data;
+using Esri.Calcite.WPF;
 
 namespace ArcGIS.WPF.Viewer.Converters
 {
     internal class DirectionPointTypeToIconConverter : IValueConverter
     {
         // Create a dictionary of direction point type and corresponding icons.
-        private Dictionary<int, string> _directionIcons = new Dictionary<int, string>
+        private Dictionary<int, char> _directionIcons = new Dictionary<int, char>
         {
-            {51, "\xe259"}, {52, "\xe2aa"}, {301, "\xe124"}, {200, "\xe122"}, {305, "\xe24e"}, 
-            {205, "\xe199"}, {50, "\xe25a"}
+            {51, (char)CalciteIcon.RouteFrom}, {52, (char)CalciteIcon.Straight}, {301, (char)CalciteIcon.ForkRight}, {200, (char)CalciteIcon.ForkLeft}, {305, (char)CalciteIcon.Right},
+            {205, (char)CalciteIcon.Left}, {50, (char)CalciteIcon.RouteTo}
         };
 
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

src/WPF/WPF.Viewer/MainWindow.xaml

@@ -5,6 +5,7 @@
     xmlns:controls="clr-namespace:ArcGIS.Controls"
     xmlns:converters="clr-namespace:ArcGIS.WPF.Viewer.Converters"
     xmlns:local="clr-namespace:ArcGIS.WPF.Viewer"
+    xmlns:calcite="http://schemas.esri.com/calcite/2024"
     Title="ArcGIS Maps SDK for .NET Samples"
     Icon="Assets/ApplicationIcons/windows-desktop-256.ico"
     WindowStartupLocation="CenterScreen"
@@ -36,10 +37,10 @@
                             Click="SampleGridFavoriteButton_Click"
                             CommandParameter="{Binding FormalName}"
                             Style="{DynamicResource SampleGridFavoriteButton}">
-                            <Path
-                                Data="M15.633 6.718l-3.666 3.176 1.107 4.732a.632.632 0 0 1-.221.68.572.572 0 0 1-.34.11.72.72 0 0 1-.373-.111l-4.165-2.533-4.163 2.532a.607.607 0 0 1-.936-.676l1.107-4.734L.317 6.718a.633.633 0 0 1-.22-.68.63.63 0 0 1 .578-.418l4.824-.406 1.9-4.537a.619.619 0 0 1 1.154 0l1.898 4.537 4.824.406a.606.606 0 0 1 .358 1.098z"
-                                Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
-                                Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" />
+                            <Path Data="{calcite:CalciteIconGeometry Icon=StarFilled, Scale=Small}"
+                                  Width="18" Height="18" Stretch="Uniform"
+                                  Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
+                                  Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" />
                         </Button>
                         <TextBlock
                             Grid.Row="0"
@@ -144,10 +145,9 @@
                 Background="Transparent"
                 BorderBrush="Transparent"
                 Click="SettingsButton_Click">
-                <Image
-                    MaxWidth="24"
-                    MaxHeight="24"
-                    Source="Resources/ic_menu_settings_dark.png" />
+                <Path Data="{calcite:CalciteIconGeometry Icon=Gear, Scale=Large}"
+                      Stroke="White"
+                      Width="22" Height="22" Stretch="Uniform" />
             </Button>
             <Button
                 Grid.Column="3"
@@ -159,8 +159,9 @@
                 Margin="5,5"
                 VerticalAlignment="Center"
                 Foreground="White">
-                <Path Fill="White"
-                    Data="M18 10H7V9h11v1zm0 2H7v1h11v-1zm-1 3H7v1h10v-1zm-4 3H7v1h6v-1zm8-15v10.19c-.23.21-.54.51-1 .97V4h-1V3h2zM5 22h7.73l-.41 1H4V3h2v1H5v18zm16-3.13V23h-4.14c.07-.05.06-.05 1.01-1H20v-2.13l1-1zM8.5 5.25v-3.5A.752.752 0 0 0 7.75 1a.752.752 0 0 0-.75.75v3.5c0 .412.338.75.75.75s.75-.338.75-.75zm3 0v-3.5a.752.752 0 0 0-.75-.75.752.752 0 0 0-.75.75v3.5c0 .412.338.75.75.75s.75-.338.75-.75zm3.5 0v-3.5a.752.752 0 0 0-.75-.75.752.752 0 0 0-.75.75v3.5c0 .412.338.75.75.75s.75-.338.75-.75zm3 0v-3.5a.752.752 0 0 0-.75-.75.752.752 0 0 0-.75.75v3.5c0 .412.338.75.75.75s.75-.338.75-.75zm3.435 11.772l-1.413-1.415-5.184 5.184 1.414 1.414 5.183-5.183zm1.725-2.05l-1.13-1.132a.2.2 0 0 0-.283 0l-.734.734 1.414 1.414.734-.734a.2.2 0 0 0 0-.283zm-9.32 6.941L13 24l2.086-.84-1.247-1.247z" />
+                <Path Data="{calcite:CalciteIconGeometry Icon=NotePadEdit, Scale=Small}"
+                      Fill="White"
+                      Width="22" Height="22" Stretch="Uniform" />
             </Button>
         </Grid>
 
@@ -175,7 +176,7 @@
                 Padding="0,10,0,0"
                 Background="#FFF8F8F8"
                 BorderBrush="Transparent"
-                FontSize="18"
+                FontSize="16"
                 ItemsSource="{Binding}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 SelectedItemChanged="categories_SelectedItemChanged"
@@ -216,14 +217,16 @@
                             Height="25"
                             Margin="5,5"
                             VerticalAlignment="Center"
-                            Background="white"
+                            Foreground="White"
+                            Background="White"
                             BorderThickness="0"
                             Click="InSampleFavoriteButton_Click"
-                            CommandParameter="{Binding FormalName}">
-                            <Path
-                                Data="M15.633 6.718l-3.666 3.176 1.107 4.732a.632.632 0 0 1-.221.68.572.572 0 0 1-.34.11.72.72 0 0 1-.373-.111l-4.165-2.533-4.163 2.532a.607.607 0 0 1-.936-.676l1.107-4.734L.317 6.718a.633.633 0 0 1-.22-.68.63.63 0 0 1 .578-.418l4.824-.406 1.9-4.537a.619.619 0 0 1 1.154 0l1.898 4.537 4.824.406a.606.606 0 0 1 .358 1.098z"
-                                Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
-                                Stroke="Black" />
+                            CommandParameter="{Binding FormalName}"
+                            Style="{x:Null}">
+                            <Path Data="{calcite:CalciteIconGeometry Icon=StarFilled, Scale=Small}"
+                                  Stroke="Black"
+                                  Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
+                                  Width="18" Height="18" Stretch="Uniform" />
                         </Button>
                     </StackPanel>
                     <StackPanel Grid.Column="1" Orientation="Horizontal">
@@ -235,8 +238,11 @@
                             Background="White"
                             BorderThickness="0"
                             Click="ScreenshotButton_Click"
-                            Visibility="Hidden">
-                            <Path Data="M14.5 8a4.5 4.5 0 1 0 4.5 4.5A4.505 4.505 0 0 0 14.5 8zm0 8a3.5 3.5 0 1 1 3.5-3.5 3.504 3.504 0 0 1-3.5 3.5zM8 9H4V8h4zm13 11H3a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2h1V5h4v1h1.5a.5.5 0 0 0 .5-.5A1.502 1.502 0 0 1 11.5 4h6A1.502 1.502 0 0 1 19 5.5a.5.5 0 0 0 .5.5H21a2.002 2.002 0 0 1 2 2v10a2.002 2.002 0 0 1-2 2zM3 7a1.001 1.001 0 0 0-1 1v10a1.001 1.001 0 0 0 1 1h18a1.001 1.001 0 0 0 1-1V8a1.001 1.001 0 0 0-1-1h-1.5A1.502 1.502 0 0 1 18 5.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5A1.502 1.502 0 0 1 9.5 7H7V6H5v1z" Stroke="Black" />
+                            Visibility="Hidden"
+                            Style="{x:Null}">
+                            <Path Data="{calcite:CalciteIconGeometry Icon=Camera, Scale=Large}"
+                                  Stroke="Black"
+                                  Width="22" Height="22" Stretch="Uniform" />
                         </Button>
                         <RadioButton
                             x:Name="SampleRadTab"