nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dealing with Light and Dark Themes in WPF Windows

BrianBulla

Hi. Just looking for some guidance on creating WPF Windows and methods on dealing with Light/Dark themes of ArcGIS Pro. Are there any best practices so that things look nice regardless of what theme the end user might have selected. As an example, this Window I am working on looks acceptable under the Light theme, but on the Dark theme it looks like total **bleep**.

Thanks,

Find more posts tagged with

Accepted answers

KrisCulin

The Wiki has all kinds of details on how to handle this. The main trick is to use the correct Style assignment in the XAML of your window. As long as you do this, then it should look consistent in both light and dark themes.

See ProGuide Style Guide · Esri/arcgis-pro-sdk Wiki · GitHub.

And check out the rest of the wiki - there are pro guides and snippets. This was a huge hep for me personally when I was setting up our configuration and getting things working.

Kris

All comments

KrisCulin

See ProGuide Style Guide · Esri/arcgis-pro-sdk Wiki · GitHub.

And check out the rest of the wiki - there are pro guides and snippets. This was a huge hep for me personally when I was setting up our configuration and getting things working.

Kris

BrianBulla

Thanks Kris!! I always forget about the style guide links when troubleshooting WPF stuff. That was very helpful and super easy to implement.

Wolf

Hi Brian,

If you run into trouble with these WPF issues you can just post your XAML file(s), that allows us to look into any issues with themes and styling.

Thanks,

Wolf

BrianBulla

Hi @Wolf ,

Not sure if this is an issue, or just how things work, but when I style a button in .NET IDE I do not actually see the style on .NET. It appears like this:

But in the final deployment it does show up correctly:

My button code looks like this:

        <Button x:Name="btnSelectFile" Style="{DynamicResource Esri_Button}" Content="Select Scanned File" HorizontalAlignment="Left" Height="34" Margin="276,746,0,0" VerticalAlignment="Top" Width="146" Click="btnSelectFile_Click"/>
        <Button x:Name="btnSelectFile_Copy" Style="{DynamicResource Esri_Button}" Content="Transfer Attributes" HorizontalAlignment="Left" Height="34" Margin="50,746,0,0" VerticalAlignment="Top" Width="146" Click="btnSelectFile_Click"/>
        <Button x:Name="btnSelectFile_Copy1" Style="{DynamicResource Esri_Button}" Content="Save and Copy Files to Web" HorizontalAlignment="Left" Height="34" Margin="536,746,0,0" VerticalAlignment="Top" Width="177" Click="btnSelectFile_Click"/>
        <Button Style="{DynamicResource Esri_ButtonForwardSmall}" Content="Button" HorizontalAlignment="Left" Height="34" Margin="221,746,0,0" VerticalAlignment="Top" Width="29"/>
        <Button Style="{DynamicResource Esri_ButtonForwardSmall}" Content="Button" HorizontalAlignment="Left" Height="34" Margin="465,746,0,0" VerticalAlignment="Top" Width="29"/>

And my ProWindow seems to have the proper references:

<controls:ProWindow x:Class="AsBuiltsTool_ArcPro.wdwAsBuilts"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AsBuiltsTool_ArcPro"
        xmlns:controls="clr-namespace:ArcGIS.Desktop.Framework.Controls;assembly=ArcGIS.Desktop.Framework"
        mc:Ignorable="d"
        Title="As-Built Link to Contract Database" Height="825" Width="732"
        WindowStartupLocation="CenterScreen" Loaded="ProWindow_Loaded"
        >

KrisCulin

That is the same for me. I don't think I ever figured out how to "fix" this. I just ran with it and made sure it looked good at runtime (which is where it really counts) and then moved on.

Kris

Wolf

This issue is caused by Visual Studio's XAML Designer. I ArcGIS Pro versions 2.7 and earlier the VS XAML designer was able to load XAML and display the appropriate styling properly. This used to work because Pro DLLs, which contain the SDK's resources used for styling, were built in mixed mode supporting both 32 and 64 bit. ArcGIS Pro is a 64 bit application and starting with version 2.8 Pro DLLs were built to support x64 bit only. This was necessary to resolve some compatibility issues with the CefSharp library. The XAML Designer is a 32 bit application and is not able to load any x64 bit DLLs, consequently you see error messages starting with ArcGIS Pro 2.8 when you open the XAML Designer. The error messages show 'DLL not found' which is misleading because the error messages should say that x64 DLLs can't be loaded. Microsoft saw this issue as a low priority to fix and promised to address this problem in the upcoming Visual Studio 2022, which is a x64 bit application with a x64 XAML Designer.

However, I did notice that with the latest releases of Visual Studio 2019 'Hot Reload' for XAML has been implemented. This means that you can debug your add-in and make changes to your XAML in Visual Studio. After you save your XAML changes in Visual Studio (during the debug session) the add-in's GUI will be updated in real-time without having to restart the debug session.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.