Viewing a BitmapImage for Sample Data in Design Mode in Blend 2012

Question

Is there a way to create a BitmapImage as Sample Data to be used in Blend 2012 Metro Store App (on Windows 8)?

I have a ViewModel as follows:

public ItemDesignDataVM()
{
   WebThumbnail = new BitmapImage(new Uri(???));
}

public string ItemId { get { return "123456"; } }
public BitmapImage WebThumbnail { get; private set; }

And would like to bind to it within Xaml like this:

<Page.Resources>
  <DesignData:ItemDesignDataVM x:Key="ItemDesignDataVM" />
</Page.Resources>

<TextBox Text="{Binding ItemId}" />
<Image Source="{Binding WebThumbnail}" />

The problem is that no matter what I pass to the BitmapImage constructor it fails to get created. I've tried various different relative paths and an absolute path too.

If I attach to the XDesProc.exe process and debug that code path the BitmapImage.PixelHeight and PixelWidth are 0 which I think means they haven't been loaded.

My binding is correct as I'm seeing the ItemId coming up in the designer.

Any help would be appreciated.

Answer 1

I don't know if that is actual code or pseudo code, but I see a couple issues with what you've posted.

First, your WebThumbnail property doesn't support change notification. Since the property is set in the constructor you should be OK, but if you later decide to make this happen asynchronously then the property could get filled in after binding occurs, and without change notification the UI would never update.

Next, although you've created the ViewModel as a Page resource, I don't see anywhere that you've set it as the DataContext for the page. The ViewModel doesn't necessarily have to be set as a resource, it can be set directly on the DataContext or d:DataContext properties. Since you're saying that you see the ItemId, you either have xaml or code elsewhere to wire this resource up to the DataContext or you may have a default value in the textbox?

As to why the PixelWidth and PixelHeight are zero, maybe you're checking it right after calling the constructor and before the BitmapImage has actually had a chance to download the image data asynchronously? These values may actually get filled in later, but if you're not setting the DataContext of the page properly you would never see the image.

If that's not actually what's going on, you may have an issue with the URL. First, try the URL of a known image online. Make sure the URL works in your browser and then try it in the code. If the URL is for a local file, there are special prefixes you need to use like ms-appx:/// if the file is embedded in your project, ms-appdata:///local/... if it's in your apps local folder, ms-appdata:///roaming/... if it's in your apps roaming folder, etc. (note the 3 slashes).

Hope that helps...