broken light theme

650
2
Jump to solution
11-11-2021 03:25 PM
AlanStewart
Occasional Contributor

ArcGIS Pro SDK 2.6, XAML

I'm upgrading a dialog displayed by my add-in to recognize light and dark themes. I'm following the standard community sample. I have the standard Themes, Images, and DarkImages folders. The contents of the image folders are set the Resource build action and to no copy.

In LightResources.xaml I have inserted:

<BitmapImage
        x:Key="TerraGoLogo"
        UriSource="../../../Images/terrago_logo.png"/>

I have also tried:

    <BitmapImage
        x:Key="TerraGoLogo"
        UriSource="pack://application:,,,/publisher-arcgispro;component/Resources/Images/terrago_logo.png"/>

 In my dialog XAML I have inserted:

        <Image HorizontalAlignment="Center"
               Height="76"
               VerticalAlignment="Top"
               Width="358"
               Margin="0,10,0,5"
               Source="{DynamicResource TerraGoLogo}"/>

 

The dialog XAML worked before I replaced a string literal path with the DynamicResource. The path used in the first attempt is the same the original path, the relative path from the XAML file. I've also tried the path relative to the project file.

Now the logo does not display at runtime.

TIA for any help.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
AlanStewart
Occasional Contributor

Sorry, end of year crunch. I've been meaning to get back to this topic. What I ended up doing was to implement in C#, which is much more familiar to me than XAML, and easier to debug. So in the constructor for our about box, in the .xaml.cs file, I have the following.

public About_Modal()
{
InitializeComponent();
DataContext = new About_ModalModel();

string lightLogoPath = @"Images/terrago_logo.png".ToLower();
string darkLogoPath = @"DarkImages/terrago_logo.png".ToLower();

BitmapImage lightLogoImg = new BitmapImage();
lightLogoImg.BeginInit();
lightLogoImg.UriSource =
new Uri(@"pack://application:,,,/publisher-arcgispro;component/" + lightLogoPath);
lightLogoImg.EndInit();

BitmapImage darkLogoImg = new BitmapImage();
darkLogoImg.BeginInit();
darkLogoImg.UriSource =
new Uri(@"pack://application:,,,/publisher-arcgispro;component/" + darkLogoPath);
darkLogoImg.EndInit();

Image logoImg = this.FindName("TerraGoLogo") as Image;

if (FrameworkApplication.ApplicationTheme == ApplicationTheme.Default)
logoImg.Source = lightLogoImg;
else
logoImg.Source = darkLogoImg;
}

In the XAML I have the following snippet.

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Image Name="TerraGoLogo"
HorizontalAlignment="Center"
Height="76"
VerticalAlignment="Top"
Width="358"
Margin="0,10,0,5"/>
.
.
.
</StackPanel>

View solution in original post

0 Kudos
2 Replies
KirkKuykendall1
Occasional Contributor III

For the sample, I made copies by copy/pasting the images in their respective folders ...

KirkKuykendall1_0-1639430384401.png

Then added BitmapImage elements to the respective resource files:

KirkKuykendall1_1-1639430470800.png

KirkKuykendall1_2-1639430521024.png

Then added an Image with a Dynamic resource to the pane:

KirkKuykendall1_4-1639430841333.png

Ran it and saw this:

KirkKuykendall1_5-1639430895816.png

Changed to dark theme, saw this:

KirkKuykendall1_6-1639430955823.png

 

 

 

 

0 Kudos
AlanStewart
Occasional Contributor

Sorry, end of year crunch. I've been meaning to get back to this topic. What I ended up doing was to implement in C#, which is much more familiar to me than XAML, and easier to debug. So in the constructor for our about box, in the .xaml.cs file, I have the following.

public About_Modal()
{
InitializeComponent();
DataContext = new About_ModalModel();

string lightLogoPath = @"Images/terrago_logo.png".ToLower();
string darkLogoPath = @"DarkImages/terrago_logo.png".ToLower();

BitmapImage lightLogoImg = new BitmapImage();
lightLogoImg.BeginInit();
lightLogoImg.UriSource =
new Uri(@"pack://application:,,,/publisher-arcgispro;component/" + lightLogoPath);
lightLogoImg.EndInit();

BitmapImage darkLogoImg = new BitmapImage();
darkLogoImg.BeginInit();
darkLogoImg.UriSource =
new Uri(@"pack://application:,,,/publisher-arcgispro;component/" + darkLogoPath);
darkLogoImg.EndInit();

Image logoImg = this.FindName("TerraGoLogo") as Image;

if (FrameworkApplication.ApplicationTheme == ApplicationTheme.Default)
logoImg.Source = lightLogoImg;
else
logoImg.Source = darkLogoImg;
}

In the XAML I have the following snippet.

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Image Name="TerraGoLogo"
HorizontalAlignment="Center"
Height="76"
VerticalAlignment="Top"
Width="358"
Margin="0,10,0,5"/>
.
.
.
</StackPanel>

0 Kudos