Skip to content

[WinUI] Calcite integration #1681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

[WinUI] Calcite integration #1681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7fc868e
Imported calcite package
imalcolm1 Oct 3, 2025
f1f91f4
Made default font size 14 to match pre-calcite app
imalcolm1 Oct 3, 2025
cab85b1
Make use of calcite toolkit symbols where possible
imalcolm1 Oct 3, 2025
2ab117d
Remove unused button style
imalcolm1 Oct 3, 2025
b05a78d
Revert "Make use of calcite toolkit symbols where possible"
imalcolm1 Oct 9, 2025
7811dcc
Replaced manual calcite font glyphs with calcite staticresource glyphs
imalcolm1 Oct 9, 2025
954e6a2
Removed last reference to manual calcite fonts
imalcolm1 Oct 9, 2025
f96f88c
Added calcite brand color overrides
imalcolm1 Oct 10, 2025
35f5e8c
Made sure manual slider styles inherit from the default and updated s…
imalcolm1 Oct 13, 2025
93091e4
Manually overide the Button and TextBox styles since they are not app…
imalcolm1 Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/Directory.Packages.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<PackageVersion Include="Esri.ArcGISRuntime.Toolkit.UWP" Version="$(ArcGISMapsSDKVersion)" />
<PackageVersion Include="Esri.ArcGISRuntime.Toolkit.WinUI" Version="$(ArcGISMapsSDKVersion)" />
<PackageVersion Include="Esri.Calcite.Maui" Version="0.1.0-preview1" />
<PackageVersion Include="Esri.Calcite.WinUI" Version="0.1.0-preview1" />
<PackageVersion Include="Markdig" Version="0.37.0" />
<PackageVersion Include="System.Text.Json" Version="9.0.2" />
<PackageVersion Include="System.Speech" Version="8.0.0" />
Expand All @@ -36,4 +37,4 @@
<PackageVersion Include="Microsoft.Maui.Controls.Compatibility" Version="9.0.21" />
<PackageVersion Include="Xamarin.AndroidX.AppCompat" Version="1.7.0.4" />
</ItemGroup>
</Project>
</Project>
2 changes: 2 additions & 0 deletions src/WinUI/ArcGIS.WinUI.Viewer/ApiKeyPrompt.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@
<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>
Expand Down
32 changes: 31 additions & 1 deletion src/WinUI/ArcGIS.WinUI.Viewer/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,39 @@
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls">
<XamlControlsResources.MergedDictionaries>
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</XamlControlsResources.MergedDictionaries>
</XamlControlsResources>

<ResourceDictionary>
<!--Manually set implicit style overrides due to WinUI bug-->
<Style TargetType="Button" BasedOn="{StaticResource CalciteButtonStyle}" />
<Style TargetType="TextBox" BasedOn="{StaticResource CalciteTextBoxStyle}" />
</ResourceDictionary>

<ResourceDictionary>
<!--Override calcite toolkit default colors with sample viewer theme colors-->
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<Color x:Key="CalciteBrandColor" >#8F53CA</Color>
<Color x:Key="CalciteBrandHoverColor" >#7938B6</Color>
<Color x:Key="CalciteBrandPressColor" >#652E98</Color>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<Color x:Key="CalciteBrandColor" >#7938B6</Color>
<Color x:Key="CalciteBrandHoverColor" >#652E98</Color>
<Color x:Key="CalciteBrandPressColor" >#51247A</Color>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<SolidColorBrush x:Key="CalciteBrandBrush" Color="{ThemeResource CalciteBrandColor}" />
<SolidColorBrush x:Key="CalciteBrandHoverBrush" Color="{ThemeResource CalciteBrandHoverColor}" />
<SolidColorBrush x:Key="CalciteBrandPressColor" Color="{ThemeResource CalciteBrandPressColor}" />
</ResourceDictionary>
<ResourceDictionary Source="Resources/Styles.xaml" />
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</ResourceDictionary.MergedDictionaries>

<!-- Other app resources here -->
<x:Double x:Key="ContentDialogMaxWidth">800</x:Double>
<x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
Expand Down
8 changes: 1 addition & 7 deletions src/WinUI/ArcGIS.WinUI.Viewer/ArcGIS.WinUI.Viewer.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@
</Content>
</ItemGroup>
<ItemGroup>
<None Remove="Resources\Fonts\calcite-ui-icons-24.ttf" />
<None Remove="Resources\github-mark.png" />
<None Remove="ScreenshotTab.xaml" />
</ItemGroup>
Expand All @@ -63,6 +62,7 @@
<PackageReference Include="Esri.ArcGISRuntime.Hydrography" />
<PackageReference Include="Esri.ArcGISRuntime.WinUI" />
<PackageReference Include="Esri.ArcGISRuntime.LocalServices" />
<PackageReference Include="Esri.Calcite.WinUI" />
<PackageReference Include="System.Drawing.Common" />
<PackageReference Include="System.Security.Cryptography.ProtectedData" />
<PackageReference Include="CommunityToolkit.WinUI.UI.Controls" />
Expand All @@ -82,12 +82,6 @@
</Compile>
</ItemGroup>

<ItemGroup>
<Content Include="Resources\Fonts\calcite-ui-icons-24.ttf">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>

<ItemGroup>
<EmbeddedResource Include="Assets\github-mark.png" />
</ItemGroup>
Expand Down
10 changes: 6 additions & 4 deletions src/WinUI/ArcGIS.WinUI.Viewer/Converters/DirectionPointTypeToIconConverter.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
using Microsoft.UI.Xaml.Data;
using System;
using System.Collections.Generic;
using Esri.Calcite.WinUI;

namespace ArcGIS.WinUI.Viewer.Converters
{
internal class DirectionPointTypeToIconConverter : IValueConverter
{
// Create a dictionary of direction point type and corresponding icons.
private Dictionary<int, string> _directionIcons = new()
private Dictionary<int, char> _directionIcons = new()
{
{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, string language)
Expand All @@ -22,4 +24,4 @@ public object ConvertBack(object value, Type targetType, object parameter, strin
throw new NotImplementedException();
}
}
}
}
8 changes: 4 additions & 4 deletions src/WinUI/ArcGIS.WinUI.Viewer/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
xmlns:arcgisruntime="using:ArcGIS"
xmlns:models="using:ArcGIS.Samples.Shared.Models"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:viewer="using:ArcGIS.WinUI.Viewer">
xmlns:viewer="using:ArcGIS.WinUI.Viewer"
xmlns:cal="using:Esri.Calcite.WinUI">
<Page.Resources>
<DataTemplate x:Key="StandardSampleItemTemplate">
<Border Margin="1"
Expand Down Expand Up @@ -104,7 +105,7 @@
Background="Transparent"
BorderBrush="Transparent"
Click="Settings_Click">
<SymbolIcon RequestedTheme="Dark" Symbol="Setting" />
<cal:SymbolIcon Symbol="Gear" IconScale="Medium" RequestedTheme="Dark" />
</Button>

<Button Grid.Column="3"
Expand All @@ -116,9 +117,8 @@
Background="Transparent"
Click="Feedback_Click"
BorderBrush="Transparent">
<Path 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" Fill="White" />
<cal:SymbolIcon Symbol="NotepadEdit" IconScale="Medium" RequestedTheme="Dark" />
</Button>

</Grid>

<!--
Expand Down
Binary file removed src/WinUI/ArcGIS.WinUI.Viewer/Resources/Fonts/calcite-ui-icons-24.ttf
View file
Open in desktop
Binary file not shown.
63 changes: 2 additions & 61 deletions src/WinUI/ArcGIS.WinUI.Viewer/Resources/Styles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,7 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style x:Key="GeneralButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="20" />
<Setter Property="MinHeight" Value="48" />
<Setter Property="MinWidth" Value="48" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="AutomationProperties.Name" Value="Menu" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Grid.Background)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Grid.Background)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<x:Double x:Key="BodyTextBlockFontSize">14</x:Double>
<x:Double x:Key="ControlContentThemeFontSize">14</x:Double>

<Style x:Key="BorderStyle" TargetType="Border">
<Setter Property="HorizontalAlignment" Value="Right" />
Expand Down
2 changes: 1 addition & 1 deletion src/WinUI/ArcGIS.WinUI.Viewer/Samples/Analysis/ViewshedLocation/ViewshedLocation.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,5,10" />
</Style>
<Style TargetType="Slider">
<Style TargetType="Slider" BasedOn="{StaticResource DefaultSliderStyle}">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="SnapsTo" Value="StepValues" />
Expand Down
10 changes: 5 additions & 5 deletions src/WinUI/ArcGIS.WinUI.Viewer/Samples/Data/CreateKmlMultiTrack/CreateKmlMultiTrack.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<UserControl.Resources>
<Style x:Key="IconStyle" TargetType="Button">
<Style.Setters>
<Setter Property="FontFamily" Value="/Resources/Fonts/calcite-ui-icons-24.ttf#calcite-ui-icons-24" />
<Setter Property="FontSize" Value="25" />
Comment on lines -9 to -10
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As an alternative you could have used the calcite font here, and used the content property in the buttons.

So this one would way <Setter Property="FontFamily" Value="{StaticResource CalciteUIIconsMediumFontFamily}" />

And for setting the content property use for instance Content="{StaticResource CalciteUIIcons_Glyph_AnnotateTool}"

You can find the full list here: https://github.com/Esri/calcite-dotnet-toolkit/blob/main/GeneratedResources/WinUI/Icons/Glyphs.xaml

Also the font size is best at 24 for this font.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh thanks! That just solved a bigger issue with the Maui calcite branch that I've been running into

<Setter Property="FontFamily" Value="{StaticResource CalciteUIIconsMediumFontFamily}" />
<Setter Property="FontSize" Value="24" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="5" />
<Setter Property="CornerRadius" Value="5" />
Expand All @@ -29,7 +29,7 @@
</Grid.ColumnDefinitions>
<Button x:Name="RecenterButton"
Click="RecenterButton_Click"
Content="&#xe13c;"
Content="{StaticResource CalciteUIIcons_Glyph_GpsOn}"
IsEnabled="False"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Recenter" />
Expand All @@ -43,7 +43,7 @@
<Button x:Name="SaveButton"
Grid.Column="2"
Click="SaveButton_Click"
Content="&#xe262;"
Content="{StaticResource CalciteUIIcons_Glyph_Save}"
IsEnabled="False"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Save" />
Expand All @@ -66,7 +66,7 @@
SelectionChanged="TracksComboBox_SelectionChanged" />
<Button Grid.Column="1"
Click="ResetButton_Click"
Content="&#xe243;"
Content="{StaticResource CalciteUIIcons_Glyph_Reset}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Reset" />
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion src/WinUI/ArcGIS.WinUI.Viewer/Samples/Data/CreateKmlMultiTrack/CreateKmlMultiTrack.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ private async Task LoadLocalKmlFile()

// Set the combo box's item source to the dictionary.
// Make the first item in the combo box a `Show all KML tracks` option.
TracksComboBox.ItemsSource = tracksDictionary.Prepend(new KeyValuePair<string, object>("Show all KLM tracks", allTracksGeometry)).ToList();
TracksComboBox.ItemsSource = tracksDictionary.Prepend(new KeyValuePair<string, object>("Show all KML tracks", allTracksGeometry)).ToList();

// Set the viewpoint to the union geometry by invoking the selection changed event.
TracksComboBox.SelectedIndex = 0;
Expand Down
Loading
Loading