Dynamically load images from database and display in Silverlight 3 image rotator

Question

I have a Silverlight 3 image rotator that displays approx.7 images. You can rotate it back and forth, and it will make the left or right image the selected image. The rotator is using jpg images that resides in an image folder. I would like to dynamically load image strings from the database, since I have hundreds of images available. My question is: How can I load a list or collection based on a query, convert the image strings into Pictures and load them into the rotator dynamically. here is what I have now.

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"           
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    xmlns:CollectionFlow="clr-namespace:CollectionFlow;assembly=CollectionFlow" 
    x:Class="CollectionFlowSample.MainPage"
    d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded" Width="900" Height="800">
    <UserControl.Resources>
     <DataTemplate x:Key="DataTemplate1">
      <Grid RenderTransformOrigin="0.5,0.5">
       <Grid.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform Y="100"/>
        </TransformGroup>
       </Grid.RenderTransform>
       <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="5"/>
        <RowDefinition/>
       </Grid.RowDefinitions>     
                <Border Height="180" 
        HorizontalAlignment="Left" VerticalAlignment="Top" 
        Width="140" BorderThickness="10" Margin="16,14,0,0"
                        CornerRadius="2">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="#FF282323" Offset="1"/>
                            <GradientStop Color="#FF413636" Offset="0.556"/>
                            <GradientStop Color="#FFCEBABA" Offset="0.83"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Image Source="{Binding Mode=OneWay}" Stretch="Fill" >
        <Image.Effect>
         <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.5"/>
        </Image.Effect>
       </Image>    
                    </Border>
       <Image Source="{Binding Mode=OneWay}" Grid.Row="2" RenderTransformOrigin="0.5,0.5">
        <Image.Effect>
         <BlurEffect/>
        </Image.Effect>
        <Image.OpacityMask>
         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Offset="0.5"/>
          <GradientStop Offset="1" Color="#7F000000"/>
         </LinearGradientBrush>
        </Image.OpacityMask>
        <Image.RenderTransform>
         <TransformGroup>
          <ScaleTransform ScaleY="-1"/>
          <SkewTransform AngleX="0" AngleY="0"/>
          <RotateTransform Angle="0"/>
          <TranslateTransform/>
         </TransformGroup>
        </Image.RenderTransform>
       </Image>


            </Grid>
     </DataTemplate>
     <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
      <CollectionFlow:CollectionFlowPanel ItemHeight="400" ItemWidth="160" FocusedItemOffset="60" UnfocusedItemOffset="40" ItemVisibility="5" RenderTransformOrigin="0.5,0.5"/>
     </ItemsPanelTemplate>
    </UserControl.Resources>
  <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA0A0A0" Offset="0"/>
                <GradientStop Color="Black" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>

            <CollectionFlow:CollectionFlow x:Name="ImageList" ItemTemplate="{StaticResource DataTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
            <CollectionFlow:CollectionFlow.Background>
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFEAE2E2"/>
              <GradientStop Color="#FF0E0101" Offset="1"/>
              <GradientStop Color="#FF676464" Offset="0.665"/>
             </LinearGradientBrush>
            </CollectionFlow:CollectionFlow.Background>

        </CollectionFlow:CollectionFlow>

C# code

ImageList.ItemsSource = new string[] {"SampleImages/10019436.jpg","SampleImages/10042172.jpg" etc...

Here is what like to do..... Query Database get records back and then...

use the conversion function process...

string sPic = (string)emps.Photo.ToString();

EmpPic1.Source = ConvertBase64ToImage(sPic);

public BitmapImage ConvertBase64ToImage(string base64String)
{
        //Convert Base64 String to byte[]
        byte[] imageBytes = Convert.FromBase64String(base64String);
        BitmapImage bi = new BitmapImage();
        bi.SetSource(new MemoryStream(imageBytes));
        return bi;
}

This is where I like to add the queried images to a collection,and use the technique described above to dispaly them in the image rotator.

Any help would be appreciated.

Answer 1

you need to request data using a web server (through a web service call is a good way of achieving this) this will return the data to your silverlight application, you wont be able to connect to a database directly with silverlight, your service will access the database and it can then return the data to your application to be consumed by the code you discussed above.

Create a web service that returns the image data add a web reference to your silverlight application that points to your service use the generated proxy to call the service and return the data to your application - you could either use the serviceclient of the proxy with an asynchronous call back or forget the proxy and just call the service using webclient

i think its important to understand the client based nature of silverlight, it lives in a sandbox on a remote computer in its most typical use case, so accessing data doesnt use the same approach as say a windows forms application>

Answer 2

I have same query too. I can read binary image from DBusing service, but what format does silverlight expects images from a web service?

Should this service return a byte array?