In my previous post Binding Media Resource Streams to XAML Controls, I discussed a way to use a value converter to get the read stream of the media resource of an a media link entry that is bound to a control. The purpose of this was to bind a XAML Image control to a media resource stream. After having messed around with this for some time in a Window Phone 7 image-based application, I think that I can provide some further guidance on this scenario.
As I discussed previously, there are essentially two ways to do this…
Creating an extension property on the client data class that is the media link entry enables you to call GetReadStreamUri in the property getter, like this:
public partial class PhotoInfo { // Returns the media resource URI for binding. public Uri StreamUri { get { // Get the URI for the media resource stream. return App.ViewModel.GetReadStreamUri(this); } } }
The GetReadStreamUri method in the view model (this is from a Windows Phone app) simply calls into the GetReadStreamUri method in the DataServiceContext. And, the XAML (fragment) looks like this:
<Image Source="{Binding Path=StreamUri, Mode=OneWay}" Height="100" Width="130" />
This enables you to return an image URI for binding…perfect.
A value converter can also be called during binding, which can also call GetReadStreamUri to return a URI, like this:
public class StreamUriConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { // Return the URI of the media resource stream for binding. return App.ViewModel.GetReadStreamUri(value); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }
public class StreamUriConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { // Return the URI of the media resource stream for binding. return App.ViewModel.GetReadStreamUri(value); }
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }
This example is also from a Windows Phone app, hence the view model again. In this case, the XAML is a bit more complicated, which the XAML looking like this:
<StackPanel.Resources> <converter:StreamUriConverter x:Key="getStreamUri" /> </StackPanel.Resources> <Image Source="{Binding Converter={StaticResource getStreamUri}}" Height="75" Width="50" />
This also returns the URI of an image for binding.
First off, let me say that if you have a read-only data service where you only query and don’t send POST requests to insert new entities, you should probably use the extension property approach. It’s clean and much simpler to implement. Having said that, when you need to insert new media link entries into the data service, things get a bit more complicated. This scenario is what led me to originally explore using value converters, but even this approach has its limitations. So here goes…
Extension Property
Value Converter
Pros
Cons
This general guidance applies when binding media resources to all XAML-based client applications. However, things get even more interesting in the Windows Phone platform for a couple of reasons. Stay tuned…I will cover this shortly in a subsequent post.