Binding Image to Uri using Caliburn.Micro - silverlight

Question

Why doesn't the following Image bind to the source properly?
<UserControl x:Class="SlCaliburnConventionTest.Sample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Image x:Name="UriProperty" />
</Grid>
</UserControl>
The code behind and the view model:
namespace SlCaliburnConventionTest
{
using System;
using System.Windows.Controls;
public partial class Sample : UserControl
{
public Sample()
{
InitializeComponent();
var viewModel = new SampleViewModel("http://lorempixel.com/300/200/sports/1");
Caliburn.Micro.ViewModelBinder.Bind(viewModel, this, null);
}
}
public class SampleViewModel
{
public SampleViewModel(string url)
{
UriProperty = new Uri(url, UriKind.Absolute);
}
public Uri UriProperty { get; set; }
}
}
I dug into the Caliburn.Micro sources and found that it was not using the TypeDescriptor when applying the conventions. The question is: How do we persuade the Caliburn.Micro to convert Uris into ImageSource?

Answer 1

I use a string as the backing property and the binding works for me:
public class TestViewModel : ViewModelBase
{
public TestViewModel()
{
ImageUrl = "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png";
}
public string ImageUrl { get; set; }
}
<Image Source="{Binding ImageUrl}" />

Answer 2

Image controls demonstrate an interesting property of XAML known as type conversion. For instance, the XAML api for Images look like this:
<Image Source="http://lorempixel.com/100/100/people" />
However, the programming API is like this:
class Image {
ImageSource Source { get; set;}
DependencyProperty SourceProperty // etc.
}
How did a string get turned into an Uri, and then turned into an ImageSource?
The answer lies in TypeConverters.
[TypeConverter(typeof(ImageSourceConverter))]
public class ImageSource {}
When we programmatically create a binding to a Uri, the magic above doesn't take place. And the result is no pictures are shown.
// No picture is shown.
BindingOperations.SetBinding(myImage,
Image.SourceProperty, new Binding("MyUri"));
Similarly we cannot do this:
// compile time error
myImage.Source = new Uri("http://...")
Instead, the proper way is to fetch the type converter from the ImageSource's custom attribute and massage it into an IValueConverter. Here's mine - the main work is performed by this single line public object Convert(...) - everything else is scaffolding:
namespace Caliburn.Micro
{
using System;
using System.Collections.Generic;
using System.Reflection;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
public class ValueTypeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var result = TypeDescriptor.GetConverter(targetType).ConvertFrom(value);
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
/// <summary>
/// Binding Image.Source to an Uri typically fails.
/// Calling the following during application bootstrap will set this up properly.
/// ConventionManager.ApplyValueConverter = ValueTypeConverter.ApplyValueConverter;
/// </summary>
/// <param name="binding"></param>
/// <param name="bindableProperty"></param>
/// <param name="info"></param>
public static void ApplyValueConverter(Binding binding, DependencyProperty bindableProperty, PropertyInfo info)
{
if (bindableProperty == UIElement.VisibilityProperty && typeof(bool).IsAssignableFrom(info.PropertyType))
binding.Converter = ConventionManager.BooleanToVisibilityConverter;
else if (bindableProperty == Image.SourceProperty && typeof(Uri).IsAssignableFrom(info.PropertyType))
binding.Converter = new ValueTypeConverter();
else
{
foreach (var item in _Conventions)
{
if (bindableProperty == item.Item1 && item.Item2.IsAssignableFrom(info.PropertyType))
binding.Converter = new ValueTypeConverter();
}
}
}
/// <summary>
/// If there is a TypeConverter that can convert a <paramref name="SourceType"/>
/// to the type on <paramref name="bindableProperty"/>, then this has to
/// be manually registered with Caliburn.Micro as Silverlight is unable to
/// extract sufficient TypeConverter information from a dependency property
/// on its own.
/// </summary>
/// <example>
/// ValueTypeConverter.AddTypeConverter<ImageSource>(Image.SourceProperty);
/// </example>
/// <typeparam name="SourceType"></typeparam>
/// <param name="bindableProperty"></param>
public static void AddTypeConverter<SourceType>(DependencyProperty bindableProperty)
{
_Conventions.Add(Tuple.Create<DependencyProperty, Type>(bindableProperty, typeof(SourceType)));
}
private static IList<Tuple<DependencyProperty, Type>> _Conventions = new List<Tuple<DependencyProperty, Type>>();
}
}
Then in the bootstrapper, we wire up the new IValueConverter:
protected override void Configure()
{
// ...
ConventionManager.ApplyValueConverter =
ValueTypeConverter.ApplyValueConverter;
}