How to assign the binding result to the ResourceKey of the DynamicResource? - wpf

Question

I would like to switch an image dynamically following property value.
The image path is defined in the two ResourceDictory for the same key.
For this achieve, I wrote XAML code as below.
<HierarchicalDataTemplate DataType="{x:Type solutionPackage:ProjectStruct}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Margin="0 0 5 0"
Source="{Binding Extension, Converter={localConverters:ToResourceKeyConverter}, ConverterParameter='Extension'}"/>
<TextBlock Text="{Binding NameWithoutExtension}"/>
</StackPanel>
</HierarchicalDataTemplate>
The below code is Converter code.
class ToResourceKeyConverter : MarkupExtension, IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null) return null;
if (parameter == null) return null;
if (parameter.ToString() == "Extension")
{
if (value.ToString() == ".mcproj")
return Application.Current.Resources["MCProjectImagePath"];
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
public override object ProvideValue(IServiceProvider serviceProvider) => this;
}
The below picture shows what the above code does.
MCProjectImagePath is defined in two ResourceDictory. one is DarkThemeImageResources.xaml and other is BasicImageResources.xaml.
Each code is as shown below.
In BasicImageResource.xaml
<BitmapImage x:Key="ProjectImagePath" UriSource="/Resources/Images/Basic/project.png"/>
<BitmapImage x:Key="MCProjectImagePath" UriSource="/Resources/Images/Basic/mcproject.png"/>
In DarkThemeImageResources.xaml
<BitmapImage x:Key="ProjectImagePath" UriSource="/Resources/Images/DarkTheme/project.png"/>
<BitmapImage x:Key="MCProjectImagePath" UriSource="/Resources/Images/DarkTheme/mcproject.png"/>
Please note it has the same key but UriSource value differs.
For now, the feature works well but does not switch the image when a user clicked some button.
So I thought I have to use DynamicResource keyword to switch dynamically so I changed the XAML code as below.
<HierarchicalDataTemplate DataType="{x:Type solutionPackage:ProjectStruct}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Margin="0 0 5 0"
Source="{DynamicResource ResourceKey={Binding Extension, Converter={localConverters:ToResourceKeyConverter}, ConverterParameter='Extension'}}"/>
<TextBlock Text="{Binding NameWithoutExtension}"/>
</StackPanel>
</HierarchicalDataTemplate>
My idea is the binding result is ResourceKey therefore, assign the binding result to the ResourceKey of the DynamicResource.
Compile works well but does not enter into the ToResourceKeyConverter code of the above so no image is displayed.
I would like to switch resources(ex:image) dynamically when a special button is clicked. the special button click action does not affect Extension property value. It just replaces ThemeDictory as below code.
private void OnOption()
{
// for test
var app = (App)Application.Current;
List<Uri> uris = new List<Uri>
{
new Uri("Resources/BasicImageResources.xaml", UriKind.RelativeOrAbsolute)
};
app.ChangeTheme(uris);
}
public void ChangeTheme(List<Uri> uris)
{
foreach (var uri in uris)
ThemeDictionary.MergedDictionaries.Add(new ResourceDictionary() { Source = uri });
var dictionary = ThemeDictionary.MergedDictionaries.ToList();
foreach(var item in dictionary)
{
if (uris.Contains(item.Source)) continue;
ThemeDictionary.MergedDictionaries.Remove(item);
}
}
Could someone tell me what I should do to solve this problem?
If you have a better way to solve this problem, please let me know.
I don't obsess in my way.
Thanks for reading.

Answer 1

You need to implement INotifyPropertyChanged interface to handle change notifications.
e.g.
class ProjectStruct : INotifyPropertyChanged
{
//......
//Your code
//......
private string extension;
public string Extension
{
get { return extension; }
set
{
extension = value;
// Call OnPropertyChanged whenever the property is updated
OnPropertyChanged("Extension");
}
}
.....
Interface implementation
.....
}
In xaml
<HierarchicalDataTemplate DataType="{x:Type solutionPackage:ProjectStruct}" ItemsSource="{Binding Children}">
<StackPanel Orientation = "Horizontal" >
<Image Width= "16" Height= "16" Margin= "0 0 5 0"
Source= "{Binding Extension Converter={localConverters:ToResourceKeyConverter} ConverterParameter='Extension' Mode=OneWay}"/>
<TextBlock Text= "{Binding NameWithoutExtension}" />
</StackPanel >
</HierarchicalDataTemplate >