topic Re: Light/Dark logo image in ProWindow in ArcGIS Pro SDK Questions

Light/Dark logo image in ProWindow

AbelPerez — Thu, 28 Jul 2022 16:30:40 GMT

I have looked at several posts and the samples but cant seem to find an easy way to add a logo image to my ProWindow. . Currently I have Images/logo_hrz.png and DarkImages/logo_hrz.png and they are both set as Resource and Do Not Copy. But I am struggling to tell the SDK to load the resource depending on the Pro Theme:

Re: Light/Dark logo image in ProWindow

UmaHarano — Thu, 28 Jul 2022 16:40:42 GMT

Hi,

Did you have chance to see this ProGuide?

ProGuide: Custom styles

This guide walks through the process of styling a UserControl using your own resources. It also explains how to switch the resources based on Pro's application theme.

Re: Light/Dark logo image in ProWindow

AbelPerez — Thu, 28 Jul 2022 18:57:38 GMT

Yes I did but thats way too much overhead for my project. All I have is just one image I have to switch and that's it.

Re: Light/Dark logo image in ProWindow

AbelPerez — Thu, 28 Jul 2022 19:48:32 GMT

But let me give it a try.

Re: Light/Dark logo image in ProWindow

CharlesMacleod — Thu, 28 Jul 2022 21:47:22 GMT

What you want is something like this:

// This is your view model or .xaml.cs if your Window is acting as its own // DataContext private ImageSource _imgSource = null; public ImageSource IconImageSource { get { if (_imgSource == null) { var url = ""; //check current theme if (FrameworkApplication.ApplicationTheme == ApplicationTheme.Default) { //light theme icon //note: full path looks something like this: //@"pack://application:,,,/MyCustomApp;component/MyImages/WindowIcon.png"; url = "/MyImages/WindowIcon.png"; } else { //dark theme icon url = "/MyImages/WindowIconDark.png"; } var bmp = new BitmapImage(); bmp.BeginInit(); bmp.UriSource = new Uri(url, UriKind.RelativeOrAbsolute); bmp.EndInit(); _imgSource = bmp; } return _imgSource; } } //In your .xaml <Image Source={Binding IconImageSource} .... />

In your addin, add two images - one for your "light" and one for your "dark". Make sure to set the BuildAction to "Resource". You may have to fiddle with the pack Uri. In my example, there would be two images in the addin stored in a folder called "MyImages".

Notice I am _binding_ the image source to a property as opposed to setting it to a DynamicResource.

Re: Light/Dark logo image in ProWindow

AbelPerez — Thu, 28 Jul 2022 22:58:57 GMT

Hmm I've tried every permutation of URI and it just wont work. here is what I currently have for the two URIs:

url = @"pack://application:,,,/MyCompany.MyGroup.MyAddin;component\Images\logo_hrz_grd.png"; url = @"pack://application:,,,/MyCompany.MyGroup.MyAddin;component\DarkImages\logo_hrz_grd.png";

and my xaml

ill try again tomorrow.

Re: Light/Dark logo image in ProWindow

UmaHarano — Fri, 29 Jul 2022 05:16:12 GMT

Hi,

Here is an add-in (attached) with a ProWindow that hosts an image that switches when you change the Pro Application theme. The images are placed in the Images folder and the BuildAction is set to resource.

This add-in is built using Pro 3.0.

Re: Light/Dark logo image in ProWindow

AbelPerez — Fri, 29 Jul 2022 13:23:21 GMT

@UmaHarano thank you very much for the sample. One thing I did notice was that when I add a ProWindow through the VS 2022 Extension I do not get a ViewModel. Since I'm kind of newish to WPF I just thought it wasnt needed. DockPanes and PropertySheets get the ViewModel class added automatically. Is this by design?

Re: Light/Dark logo image in ProWindow

AbelPerez — Fri, 29 Jul 2022 14:20:34 GMT

Woot!!! I got it to work. Two things that were messing me up:

1. The missing ViewModel which is not created by the VS extension. I had to create my own ViewModel class and then reference that in the ShowProWindow class.

2. The path to the image. I was under the impression that I needed to provide the namespace of the project in the path. That didn't work so I tried just the name of the project and that worked.

//"pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonPurple16.png" url = @"pack://application:,,,/MyProject;component/Images/logo.png";

Re: Light/Dark logo image in ProWindow

CharlesMacleod — Fri, 29 Jul 2022 16:38:28 GMT

please mark the post as answered