QUERCUS BLOG
Industry Insights from Our Experts

Tag Archives: Silverlight

Save an Image from the Database to the File System with LightSwitch

Comments Off
Filed under .NET, LightSwitch, SharePoint

I recently saw an forum posting where someone asked how to save a LightSwitch Image value to a desktop file. After some poking around the web, here is a solution that I found to achieve this…

The goal is this; provide functionality that allows a user to take an Image value stored in a LightSwitch table, and save that image as a file to the user’s computer.

Seems simple enough. I come from a Windows Forms, and ASP.Net development background, and not so much a Silverlight background. So, I was pleasantly perplexed (I like “P” words) when trying to take that image from the LightSwitch database stream it to a file on the file system.

The SilverLight Challenge

With that thinking in mind I attempted to tackle the problem via the Image class from the System.Drawing namespace in the System.Drawing.dll assembly. With that Image class I thought I could take that image data in my database, a byte array, and convert it to an image format that I can then save as a file. But guess what, that System.Drawing.dll assembly can’t be used in a  Silverlight project – well according to Visual Studio anyway.

So, now my dilemma is to figure out how to get that image data into some kind of image type object that I can then save to the file system. With an ever optimistic view on life, and a fundamental belief that anything is possible, I fired up the trusty search engines and started scouring the net for info. I knew there had to be an answer out there.

…and lookie what I found…

ImageTools to the rescue. ImageTools (http://imagetools.codeplex.com) is an open source project that produces a library of tools for working with images in Silverlight development.

Cool! Let’s give it a try then.

I downloaded the bits, opened my LightSwitch solution in File View, and referenced a few of the ImageTools assemblies into my LightSwitch Client project…

With that little bit of infrastructure set up, I created a little table titled ImageUpload. This table will hold the name of an image, and the image itself…

Next, I created a simple List Details screen, and added a Method data item named SaveImage to the screen…

With that method item added to my screen definition, I drag a drop the element onto the screen design…

Now I need to wire this method up to do what I want, which is save the image from the selected ImageUpload record to my computer’s file system. To do that, I right-click the newly added screen item, and select to Edit Execute Code…

And in the code for the SaveImageToComputer_Execute() method, I apply the following (the whole class is shown here)…

using System;
using System.Linq;
using System.IO;
using System.IO.IsolatedStorage;
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using Microsoft.LightSwitch;
using Microsoft.LightSwitch.Framework.Client;
using Microsoft.LightSwitch.Presentation;
using Microsoft.LightSwitch.Presentation.Extensions;
using Microsoft.LightSwitch.Threading;
using ImageTools;
using ImageTools.IO;
using ImageTools.IO.Png;
using ImageTools.IO.Jpeg;
using ImageTools.IO.Bmp;
using ImageTools.IO.Gif;
using ImageTools.Helpers;

namespace LightSwitchApplication
{
    public partial class ImageUploadsListDetail
    {

        partial void SaveImageToComputer_Execute()
        {
            Encoders.AddEncoderImageTools.IO.Png.PngEncoder();
            Encoders.AddEncoderImageTools.IO.Jpeg.JpegEncoder();
            Encoders.AddEncoderImageTools.IO.Bmp.BmpEncoder();

            // Write your code here.
            Dispatchers.Main.Invoke(() =
            {
                string imageName = this.ImageUploads.SelectedItem.ImageName;

                // get the LightSwitch image value and save it to a memory stream. 
                MemoryStream stream = new MemoryStream(this.ImageUploads.SelectedItem.UploadImage);

                // add the stream to a BitmapImage object. 
                BitmapImage myImage = new BitmapImage();
                myImage.SetSource(stream);

                // create a WritableBitmap, because we can use with the ImageTools stuff,
                // and use the BitmapImage object.
                WriteableBitmap writableBitmap = new WriteableBitmap(myImage);
                ExtendedImage extendedImage = new ExtendedImage();
                extendedImage = writableBitmap.ToImage();

                // now instantiate a SaveFileDialog, and apply image file filters to it, 
                // as well as a default file name.
                SaveFileDialog dialog = new SaveFileDialog();
                dialog.Filter = "Png Image|*.png|JPeg Image|*.jpg|Bitmap Image|*.bmp";
                dialog.DefaultFileName = imageName;

                // show the dialog to the user.
                if (dialog.ShowDialog() == true)
                {
                    // FileStream the file created by the user using the dialog.
                    using (Stream fileStream = dialog.OpenFile())
                    {
                        // instantiate an ImageTools ImageEncoder object.
                        IImageEncoder encoder = null;

                        // check which filter was selected by the user, then
                        // use the appropriate encoder for it.
                        switch (dialog.FilterIndex)
                        {
                            case 1: 
                                encoder = new PngEncoder();
                                break;
                            case 2:
                                encoder = new JpegEncoder();
                                break;
                            case 3:
                                encoder = new BmpEncoder();
                                break;
                        }

                        // encode the image and place it in the file stream.
                        encoder.Encode(extendedImage, fileStream);

                        // write the file to the file system.
                        stream.WriteTo(fileStream);
                    }
                }
            });
         }
    }
}

Note the using statements

The code is pretty self explanatory, so I am not going to waste time typing out what each line does. You can figure that part out.

Now, when I run the app, I am able to successfully save the image as a file on my computer, neat!

Cool!

Okay, now the caveat!

This example works fine for a Desktop (out of browser)  based LightSwitch application. If you want to do the same for a web application (in browser) then you will need to do some tweaking. Remember, this is a Silverlight based application, which brings up some trust elevation issues that need dealing with. For more information on elevating trust for an in browser LightSwitch application, check out this great article by Jewel Lambert on how you might be able to achieve this – http://dotnetlore.com/how-to-use-previously-out-of-browser-only-features-in-lightswitch-for-in-browser-apps-with-vs-11-beta/

Now for lunch!

Let me know how it works out for you.

Cheers!

Article source: http://www.paulspatterson.com/technology/lightswitch/db-image-to-file-system/

Microsoft LightSwitch – Championing the Citizen Developer

Comments Off
Filed under .NET, LightSwitch, Productivity

I recently watched a great webcast by Rich Dudley in which Rich made some very interesting points about what Gartner Research calls “Citizen Developers”. I was immediately intrigued by this Gartner information so I dug a little deeper into this citizen developer thing, and here is what I found…

According to Gartner, “Citizen developers will be building at least a quarter of new business applications by 2014…”.  That, according to the report titled “Citizen Developers Are Poised to Grow”.

Represented by about 6 million information workers, these “latent” application developers make up that same Microsoft Visual Studio LightSwitch target market.

Very interesting, indeed!

 

 

Article source: http://www.paulspatterson.com/technology/lightswitch/microsoft-lightswitch-championing-the-citizen-developer/

Software Architecture – MVVM Design Pattern Primer

Comments Off
Filed under Software Architecture

Building a new car requires the input of both a design team and an engineering team. Each team contributes to specific requirements. For example, the design team is responsible for understanding what the consumer wants in the look and feel of the car. The engineering team applies the required mechanics and functionality to the car. Both teams serve distinct purposes, however both teams need to eventually come together to produce what we will eventually drive down the road. Read More »

Copyright 2017 by Quercus Solutions
Login