Light/Dark logo image in ProWindow

1286
9
Jump to solution
07-28-2022 09:30 AM
AbelPerez
Occasional Contributor III

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:

<Image RenderTransformOrigin="-1.82,-1.377" Source="{DynamicResource logo_hrz}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="39" Width="214" Margin="5,9,0,0" Stretch="Fill"/>

 

0 Kudos
1 Solution

Accepted Solutions
UmaHarano
Esri Regular Contributor

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. 

View solution in original post

0 Kudos
9 Replies
UmaHarano
Esri Regular Contributor

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.  

 

0 Kudos
AbelPerez
Occasional Contributor III

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.

0 Kudos
AbelPerez
Occasional Contributor III

But let me give it a try.

0 Kudos
CharlesMacleod
Esri Regular Contributor

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. 

 

0 Kudos
AbelPerez
Occasional Contributor III

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

<Image RenderTransformOrigin="-1.82,-1.377" Source="{Binding LogoImageSource}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="39" Width="214" Margin="5,9,0,0" Stretch="Fill"/>

 

ill try again tomorrow.

0 Kudos
UmaHarano
Esri Regular Contributor

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. 

0 Kudos
AbelPerez
Occasional Contributor III

@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?


AbelPerez_0-1659100889219.png

 

0 Kudos
AbelPerez
Occasional Contributor III

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";

 

0 Kudos
CharlesMacleod
Esri Regular Contributor

please mark the post as answered

0 Kudos