Styjun

I've got the following XAML helper class that allows me to select a bitmap image based on a key:

namespace GammaFour.Views.Controls

 using System;
 using Windows.Storage;
 using Windows.Storage.Streams;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Media.Imaging;

 /// <summary>
 /// Provides an image from a store.
 /// </summary>
 public class BitmapSourceSelector : BitmapSource
 
 /// <summary>
 /// The Category DependencyProperty.
 /// </summary>
 public static readonly DependencyProperty CategoryProperty = DependencyProperty.Register(
 "Category",
 typeof(string),
 typeof(BitmapSourceSelector),
 new PropertyMetadata(default(string)));

 /// <summary>
 /// The Dictionary DependencyProperty.
 /// </summary>
 public static readonly DependencyProperty DictionaryProperty = DependencyProperty.Register(
 "Dictionary",
 typeof(UriDictionary),
 typeof(BitmapSourceSelector),
 new PropertyMetadata(default(UriDictionary)));

 /// <summary>
 /// The Key DependencyProperty.
 /// </summary>
 public static readonly DependencyProperty KeyProperty = DependencyProperty.Register(
 "Key",
 typeof(string),
 typeof(BitmapSourceSelector),
 new PropertyMetadata(default(string), BitmapSourceSelector.OnKeyPropertyChanged));

 /// <summary>
 /// Gets or sets the category used to select the source for the icon.
 /// </summary>
 public string Category
 
 get
 
 return this.GetValue(BitmapSourceSelector.CategoryProperty) as string;
 

 set
 
 this.SetValue(BitmapSourceSelector.CategoryProperty, value);
 
 

 /// <summary>
 /// Gets or sets the dictionary of URIs.
 /// </summary>
 public UriDictionary Dictionary
 
 get
 
 return this.GetValue(BitmapSourceSelector.DictionaryProperty) as UriDictionary;
 

 set
 
 this.SetValue(BitmapSourceSelector.DictionaryProperty, value);
 
 

 /// <summary>
 /// Gets or sets the key used to select the source for the icon.
 /// </summary>
 public string Key
 
 get
 
 return this.GetValue(BitmapSourceSelector.KeyProperty) as string;
 

 set
 
 this.SetValue(BitmapSourceSelector.KeyProperty, value);
 
 

 /// <summary>
 /// Invoked when the effective property value of the Key property changes.
 /// </summary>
 /// <param name="dependencyObject">The DependencyObject on which the property has changed value.</param>
 /// <param name="dependencyPropertyChangedEventArgs">
 /// Event data that is issued by any event that tracks changes to the effective value of this property.
 /// </param>
 private static async void OnKeyPropertyChanged(
 DependencyObject dependencyObject,
 DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
 
 // Extract the changed properties.
 string key = dependencyPropertyChangedEventArgs.NewValue as string;
 BitmapSourceSelector bitmapSourceSelector = dependencyObject as BitmapSourceSelector;

 // Select a source for the image based on the new key.
 if (!string.IsNullOrEmpty(key) && bitmapSourceSelector.Dictionary != null)
 
 Uri uri = bitmapSourceSelector.Dictionary.GetUri(bitmapSourceSelector.Category, key);
 StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(uri);
 IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
 await bitmapSourceSelector.SetSourceAsync(stream);
 
 
 

When executing the OnKeyPropertyChanged method, I get an exception:

Exception thrown: 'System.Threading.Tasks.TaskCanceledException' in System.Private.CoreLib.dll
A task was canceled.

The exception happens during this call:

 await bitmapSourceSelector.SetSourceAsync(stream);

If I replace the SetSourceAsync with SetSource, it runs fine. The exception happens somewhat randomly, which usually indicates that the await isn't returning on the Window thread, but I can't find a way to force it. So I've got two questions:

1. What's wrong with this code? Why won't it await (the synchronous
   version appears to work just fine, which supports the
   hypothesis that the call isn't returning on the right thread).


2. Does anyone have a better way of associating a Bitmap resource with
   a value? Theoretically, the View Model shouldn't have any
   knowledge of the View and the Bitmap resources are clearly aspects
   of the view.

EDIT: Nico Zhu asked for the supporting classes. Here they are:

UriCategory:

/// <summary>
/// A category of URIs.
/// </summary>
public class UriCategory : Dictionary<string, UriSource>

UriDictionary:

/// <summary>
/// A dictionary of URIs organized by category.
/// </summary>
public class UriDictionary : Dictionary<string, UriCategory>

 /// <summary>
 /// Gets the URI associated with the category, key keys.
 /// </summary>
 /// <param name="category">The category of the URIs.</param>
 /// <param name="key">The key for the URI.</param>
 /// <returns>The URI entered into the dictionary with the category, key index.</returns>
 internal Uri GetUri(string category, string key)
 
 // This URI is returned if there's no matching entry for the keys.
 Uri uri = default(Uri);

 // Use the two dictionary levels to find the URI.
 UriCategory resourceCategory;
 if (this.TryGetValue(category, out resourceCategory))
 
 UriSource resourceSource;
 if (resourceCategory.TryGetValue(key, out resourceSource))
 
 uri = resourceSource.Uri;
 
 

 // The URI belonging to the compound key.
 return uri;
 

And here's the usage in XAML:

<!-- Metadata Image Dictionary -->
<dbcontrols:UriDictionary x:Key="MetadataImages">
 <dbcontrols:UriCategory x:Key="Small">
 <dbcontrols:UriSource x:Key="Alert"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Small/Alert.png"/>
 <dbcontrols:UriSource x:Key="Blotter"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Small/Blotter.png"/>
 <dbcontrols:UriSource x:Key="Folder"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Small/Folder.png"/>
 <dbcontrols:UriSource x:Key="Portfolio"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Small/Portfolio.png"/>
 </dbcontrols:UriCategory>
 <dbcontrols:UriCategory x:Key="Medium">
 <dbcontrols:UriSource x:Key="Alert"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Medium/Alert.png"/>
 <dbcontrols:UriSource x:Key="Blotter"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Medium/Folder.png"/>
 <dbcontrols:UriSource x:Key="Folder"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Medium/Folder.png"/>
 <dbcontrols:UriSource x:Key="Portfolio"
 Uri="ms-appx:///GammaFour.InvestmentManagement.Views/Assets/Medium/Portfolio.png"/>
 </dbcontrols:UriCategory>
</dbcontrols:UriDictionary>

And here's how to use the image dictionary to display an image based on a key. This design allows the View Model to not require any knowledge of the View in order to display images with data.

<Grid Height="160"
 Width="190">
 <Image.Source>
 <dbcontrols:BitmapSourceSelector Category="Medium"
 Dictionary="StaticResource MetadataImages"
 Key="Binding ImageKey"/>
 </Image.Source>
 </Image>
</Grid>

Again, if you know a better way to do this that removes the View Model from the View, I'd be grateful for an example.