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 4 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>
6 changes: 5 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,8 +5,12 @@
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls">
<XamlControlsResources.MergedDictionaries>
<CalciteResources xmlns="using:Esri.Calcite.WinUI" />
</XamlControlsResources.MergedDictionaries>
</XamlControlsResources>
<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>
Expand Down
1 change: 1 addition & 0 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 @@ -63,6 +63,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 Down
5 changes: 3 additions & 2 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,6 +4,7 @@
xmlns:arcgisruntime="using:ArcGIS"
xmlns:models="using:ArcGIS.Samples.Shared.Models"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:cal="using:Esri.Calcite.WinUI"
xmlns:viewer="using:ArcGIS.WinUI.Viewer">
<Page.Resources>
<DataTemplate x:Key="StandardSampleItemTemplate">
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,7 +117,7 @@
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
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
18 changes: 10 additions & 8 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 @@ -2,12 +2,11 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:esri="using:Esri.ArcGISRuntime"
xmlns:cal="using:Esri.Calcite.WinUI"
xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
<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="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="5" />
<Setter Property="CornerRadius" Value="5" />
Expand All @@ -29,10 +28,11 @@
</Grid.ColumnDefinitions>
<Button x:Name="RecenterButton"
Click="RecenterButton_Click"
Content="&#xe13c;"
IsEnabled="False"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Recenter" />
ToolTipService.ToolTip="Recenter">
<cal:SymbolIcon Symbol="GpsOn" IconScale="Medium" />
</Button>
<Button x:Name="RecordTrackButton"
Grid.Column="1"
Margin="5"
Expand All @@ -43,10 +43,11 @@
<Button x:Name="SaveButton"
Grid.Column="2"
Click="SaveButton_Click"
Content="&#xe262;"
IsEnabled="False"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Save" />
ToolTipService.ToolTip="Save">
<cal:SymbolIcon Symbol="Save" IconScale="Medium" />
</Button>
</Grid>
</StackPanel>
<StackPanel x:Name="ViewingUI" Visibility="Collapsed">
Expand All @@ -66,9 +67,10 @@
SelectionChanged="TracksComboBox_SelectionChanged" />
<Button Grid.Column="1"
Click="ResetButton_Click"
Content="&#xe243;"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Reset" />
ToolTipService.ToolTip="Reset">
<cal:SymbolIcon Symbol="Reset" IconScale="Medium" />
</Button>
</Grid>
</StackPanel>
</StackPanel>
Expand Down
56 changes: 34 additions & 22 deletions ...ArcGIS.WinUI.Viewer/Samples/Geometry/CreateAndEditGeometries/CreateAndEditGeometries.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:cal="using:Esri.Calcite.WinUI"
xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
<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" />
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style.Setters>
Expand Down Expand Up @@ -37,29 +36,36 @@
</Grid.ColumnDefinitions>
<Button x:Name="PointButton"
Click="PointButton_Click"
Content="&#xe21c;"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Point" />
ToolTipService.ToolTip="Point" >
<cal:SymbolIcon Symbol="Point" IconScale="Medium" />
</Button>
<Button x:Name="MultipointButton"
Grid.Row="0"
Grid.Column="1"
Click="MultipointButton_Click"
Content="&#xe21c;&#xe21c;"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Multipoint" />
ToolTipService.ToolTip="Multipoint">
<StackPanel Orientation="Horizontal">
<cal:SymbolIcon Symbol="Point" IconScale="Medium" />
<cal:SymbolIcon Symbol="Point" IconScale="Medium" />
</StackPanel>
</Button>
<Button x:Name="PolylineButton"
Grid.Row="1"
Click="PolylineButton_Click"
Content="&#xe1a8;"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Polyline / no shape fill" />
ToolTipService.ToolTip="Polyline / no shape fill">
<cal:SymbolIcon Symbol="Line" IconScale="Medium" />
</Button>
<Button x:Name="PolygonButton"
Grid.Row="1"
Grid.Column="2"
Click="PolygonButton_Click"
Content="&#xe220;"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Polygon / shape fill" />
ToolTipService.ToolTip="Polygon / shape fill">
<cal:SymbolIcon Symbol="PolygonVertices" IconScale="Medium" />
</Button>
<ComboBox x:Name="ToolComboBox"
Grid.Row="2"
Grid.ColumnSpan="2"
Expand All @@ -78,45 +84,51 @@
</Border>
<Button Grid.Row="4"
Click="UndoButton_Click"
Content="&#xe2d6;"
IsEnabled="{Binding GeometryEditor.CanUndo, ElementName=MyMapView}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Undo" />
ToolTipService.ToolTip="Undo">
<cal:SymbolIcon Symbol="Undo" IconScale="Medium" />
</Button>
<Button Grid.Row="4"
Grid.Column="2"
Click="RedoButton_Click"
Content="&#xe23e;"
IsEnabled="{Binding GeometryEditor.CanRedo, ElementName=MyMapView}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Redo" />
ToolTipService.ToolTip="Redo">
<cal:SymbolIcon Symbol="Redo" IconScale="Medium" />
</Button>
<Button Grid.Row="5"
Click="DeleteSelectedButton_Click"
Content="&#xe0e8;"
IsEnabled="{Binding GeometryEditor.SelectedElement.CanDelete, ElementName=MyMapView, FallbackValue=False}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Delete selected" />
ToolTipService.ToolTip="Delete selected">
<cal:SymbolIcon Symbol="Erase" IconScale="Medium" />
</Button>
<Button x:Name="SaveButton"
Grid.Row="5"
Grid.Column="1"
Click="SaveButton_Click"
Content="&#xe06f;"
IsEnabled="{Binding GeometryEditor.CanUndo, ElementName=MyMapView}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Save edits" />
ToolTipService.ToolTip="Save edits">
<cal:SymbolIcon Symbol="CheckCircle" IconScale="Medium" />
</Button>
<Button Grid.Row="6"
Click="DiscardButton_Click"
Content="&#xe080;"
IsEnabled="{Binding GeometryEditor.IsStarted, ElementName=MyMapView}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Discard edits" />
ToolTipService.ToolTip="Discard edits">
<cal:SymbolIcon Symbol="CircleDisallowed" IconScale="Medium" />
</Button>
<Button x:Name="DeleteAllButton"
Grid.Row="6"
Grid.Column="1"
Click="DeleteAllButton_Click"
Content="&#xe2d0;"
IsEnabled="{Binding GeometryEditor.IsStarted, ElementName=MyMapView, Converter={StaticResource BoolNegationConverter}}"
Style="{StaticResource IconStyle}"
ToolTipService.ToolTip="Delete all geometries" />
ToolTipService.ToolTip="Delete all geometries">
<cal:SymbolIcon Symbol="Trash" IconScale="Medium" />
</Button>
</Grid>
</Grid>
</UserControl>
Loading
Loading