Put a (Grid control with data in it) on an original image and output the whole thing as an image in SIlverlight :

Question

I have an image and i want to render the control(datgrid or any ui element with its content ) on that image and output the whole thing as an image. Please Help.

I found some similar link in so, just taking a look at his answer but not helpful.. http://stackoverflow.com/questions/668090/silverlight-create-image-from-silverlight-controls

Thanks in advance. :)

Answer 1

I used the following method I found somewhere to create an image from a frameworkelement (which is basically a grid, canvas, button, textbox, ...

it takes whatever it can find inside the bounds of the control and returns it as an ImageSource type, from there I think the road to saving it to a file or outputting it to the screen is a small step.

take note: I removed some code which should work out margin issues, so be sure to take that into account, or do not set a margin for the control you wish to convert to an image.

what you basically want to do now is use the GridCombiner and give that to the method below, so it will create an image from the DataGridMyData over the ImageBackground as an ImageSource.

Hopefully this is what you were looking for, if not, let me know.

public ImageSource ToImageSource(FrameworkElement obj) // FOR WPF
    {
        // Save current canvas transform
        Transform transform = obj.LayoutTransform;
        obj.LayoutTransform = null;

        // Get the size of canvas
        Size size = new Size(obj.Width, obj.Height);

        // force control to Update
        obj.Measure(size);
        obj.Arrange(new Rect(size));

        RenderTargetBitmap bmp = new RenderTargetBitmap(
            (int)obj.Width, (int)obj.Height, 96, 96, PixelFormats.Pbgra32);

        bmp.Render(obj);

        // return values as they were before
        obj.LayoutTransform = transform;
        return bmp;
    }


public ImageSource ToImageSource(FrameworkElement obj) // FOR SILVERLIGHT
    {
        // Save current canvas transform
        Transform transform = obj.RenderTransform;
        obj.RenderTransform = null;

        // Get the size of canvas
        Size size = new Size(obj.Width, obj.Height);

        // force control to Update
        obj.Measure(size);
        obj.Arrange(new Rect(new Point(), size));

        WriteableBitmap bmp = new WriteableBitmap(obj, transform);

        bmp.Render(obj, transform);

        // return values as they were before
        obj.RenderTransform = transform;
        return bmp;
    }

And your xaml would be something like:

<Grid x:Name="GridCombiner" Width="300" Height="150">
<Image x:Name="ImageBackground" Source="c:/myimg.jpg" Width="300" Height="150" />
<DataGrid x:Name="DataGridMyData" ItemsSource="{Binding}" Width="300" Height="150" />
</Grid>