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

Light/Dark logo image in ProWindow

AbelPerez

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

Najděte více příspěvků označených jako

Accepted answers

UmaHarano

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.

SwitchTheme.zip

All comments

UmaHarano

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.

AbelPerez

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.

AbelPerez

But let me give it a try.

CharlesMacleod

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.

AbelPerez

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.

UmaHarano

Hi,

This add-in is built using Pro 3.0.

SwitchTheme.zip

AbelPerez

@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

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

CharlesMacleod

please mark the post as answered

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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