Doron Goldberg

Adding images stored inside Lightswitch to a Silverlight control

After building the Treeview and connecting it to the selected item inside the Lightswitch screen I wanted to extend the control so it will show images along with the textual labels.

Same as the label value, my images are also stored inside Lightswitch as a property. In my case a sub-property of the “Site” property. (In my case each position is attached to a site, which has an image representing the flag of the site’s location – and I’m building a positions tree!)

My sites List Details screen looks something like that:

Since the Silverlight Image control takes a BitmapImage as source a small converter is required to create the BitmapImage from the data stored inside Lightswitch:

using System;
using System.Windows.Data;
using Microsoft.LightSwitch;
using System.Diagnostics;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.Globalization;
using System.Windows.Media.Imaging;
using System.Text;
using System.IO;

namespace SilverLightControls
{
 
    public class SiteImageConverter : IValueConverter
    {
        public static BitmapImage ImageFromBuffer(Byte[] bytes)
        {
            MemoryStream stream = new MemoryStream(bytes);
            BitmapImage image = new BitmapImage();     
            image.SetSource(stream);   
            return image;
        }
        public static SiteImageConverter Instance =
            new SiteImageConverter();

        public object Convert(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            byte[] imageArray=value as byte[];
            return ImageFromBuffer(imageArray);
        }
        public object ConvertBack(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            throw new NotSupportedException("Cannot convert back");
        }
    }
}

Simple code: convert the value to a byte[] (this is how it is stored), create a bitmap out of it and return the bitmap.

The XAML file has the related parts highlighted so you can see how can you bind the control to the image.:

<UserControl x:Class="SilverLightControls.PositionsTree"
    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"
    xmlns:local="clr-namespace:SilverLightControls"    
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="clr-namespace:System.Windows;assembly=System.Windows.Controls" 
    xmlns:controls="clr-namespace:SilverLightControls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <local:EntityCollectionValueConverter x:Key="EntityCollectionValueConverter" />
        <local:SiteImageConverter x:Key="SiteImageConverter" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel  Orientation="Horizontal">
            <controls:AutoExpandingTreeView Name="positionsTree" ItemsSource="{Binding Screen.PositionsTree}" >
                <controls:AutoExpandingTreeView.ItemTemplate>
                    <toolkit:HierarchicalDataTemplate 
                            ItemsSource="{Binding 
                        Converter={StaticResource EntityCollectionValueConverter}, 
                        ConverterParameter=Positions}">
                        <StackPanel  Orientation="Horizontal">
                            <Image Name="img"  Width="15" Height="15" Stretch="Fill" Source="{Binding Site.SiteFlag,Converter={StaticResource SiteImageConverter}}"/>
                            <TextBlock  Text="{Binding Path=PositionName, Mode=TwoWay}" 
                                       Margin="5,0" Width="150" />
                        </StackPanel>
                        </toolkit:HierarchicalDataTemplate>
                </controls:AutoExpandingTreeView.ItemTemplate>
            </controls:AutoExpandingTreeView>
        </StackPanel>
    </Grid>

</UserControl>

And the result: