Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

WinRT: XAML Image Binding Compared to Windows Phone 7

DZone's Guide to

WinRT: XAML Image Binding Compared to Windows Phone 7

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

Problem

In Windows Phone 7 it’s possible to bind Image-control’s Source-property to either to a string or to an Uri and they both work. In WinRT binding against an Uri doesn’t work.

Given the following XAML:








<ListBox x:Name="Items">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Width="500" Height="500" Source="{Binding Image}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

And the following view model:







public class ItemVM
    {
        public string Image { get; set; }
        public string Title { get; set; }
        public string Subtitle { get; set; }
    }

imageThe image is displayed correctly in WinRT. But if the view model contains an Uri instead of a string, the image isn’t displayed.







public class ItemVM
    {
        public Uri Image { get; set; }
        public string Title { get; set; }
        public string Subtitle { get; set; }
    }

This can be problematic if you want to share your VMs between different platforms.

One possible solution

If you need to get the binding against an Uri to work you can create the following value converter:




public class ImageUriValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            var uri = value as Uri;
            if (uri == null)
                return null;
 
            var result = uri.ToString();
            return result;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

And use that in your binding:

 
<Page.Resources>
        <local:ImageUriValueConverter x:Name="Converter"/>
    </Page.Resources>
     
    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
        <ListBox x:Name="Items">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Width="500" Height="500" Source="{Binding Image, Converter={StaticResource Converter}}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

Another possible solution

This sounds like an beta-issue which could be very well fixed in the final release.

Update 5.2.2012

Morten posted a great tip in the comments. For some reason the blog doesn't allow me to approve it, so here's his whole comment:

Try this instead: 
<Image> 
    <Image.Source> 
         <BitmapImage UriSource="{Binding ImageUri}" /> 
   </Image.Source> 
</Image>

 
   
This avoids all the converter code, and also allows you to be more specific on your BitmapImage wrt CreationOptions, DecodePixelSize etc. (however with a converter let me suggest you convert to a BitmapImage instead of string, or you'll just hit more converters when processing the binding)

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}