Home    |    Support   |   Site Map

Site search
 
Back

How to use and manipulate images embedded into ASP.NET Resource Files RESX with ImageDraw

Technologies used
  • Neodynamic ImageDraw (2.0 or later) for ASP.NET
  • Microsoft .NET Framework (2.0 or later)
  • Microsoft Visual Studio .NET (2005 or later - Visual Web Developer Express Edition)
ASP.NET 2.0 features new Resources capabilities allowing you, for example, to store image files embedded into RESX files without you need to deploy those files on production servers. ImageDraw was designed keeping in mind that feature and thus, you can manipulate and use those embedded images without effort.
In this article we will analyze the following scenarios:
Preparing Embedded Images Resources
Before starting with each aforementioned scenario we are going to prepare the needed items and application project.
Follow these steps:
  • Open Visual Studio .NET 2005 and create a new ASP.NET Web Application or Website.
  • Add the new ASP.NET specialized folder called App_GlobalResources into your website. To do that, just go to Website > Add ASP.NET Folder > App_GlobalResources. Inside that folder add the existing Resource File called MyResources.resx which is available for downloading at the end of this page.
  • Open the MyResources.resx file. This resource file should have embedded into it two images which name property are t_shirt and aspnetlogo



  • At this point you should have a Website project with a MyResources.resx file under App_GlobalResources folder. On the other hand, the MyResources.resx file should have embedded into it two images which name property should be t_shirt (a JPEG image) and aspnetlogo (a PNG image with transparency).
Now that the embedded image files are ready to use in the Website project let's begin developing each scenario.
Rendering an embedded image as it's stored in the RESX file
To render an image embedded into a RESX file - the T-Shirt image for example - follow these steps:
  • Open an ASP.NET Webform in Source View and drag & drop an ImageDraw control inside it. You should get something like this: 
    <form id="form1" runat="server">
    <div>
        <neoimg:ImageDraw ID="ImageDraw1" runat="server">
        </neoimg:ImageDraw>
    </div>
</form>
  • Now inside ImageDraw control tag add an ImageElement - into the Elements collection - which will wrap and render the image embedded into the RESX file. In order to get and render an embedded image, the ImageElement must be configured by setting up its Source property to Image and its SourceImage property to a declarative ASP.NET Expression that points to the embedded image which in our particular case is 
    "<%$ Resources:MyResources, t_shirt %>"

    Your code should look like the following: 
    <form id="form1" runat="server">
    <div>
        <neoimg:ImageDraw ID="ImageDraw1" runat="server">
            <Elements>
                <neoimg:ImageElement Source="Image" SourceImage="<%$ Resources:MyResources, t_shirt %>"></neoimg:ImageElement>
            </Elements>
        </neoimg:ImageDraw>
    </div>
</form>
  • That's it. Run your application. ImageDraw should manage and render the embedded image as it's stored in the RESX file.


    The image embedded into the RESX file is rendered AS IS by ImageDraw
Rendering an embedded image dynamically applying some imaging effects
To render an image embedded into a RESX file - the T-Shirt image for example - and apply onto it some built-in ImageDraw Imaging Effects (Actions) such us ConvertToNegative and Scale, follow these steps:
  • Based on the steps described in the previous scenario, just add the desired ImageDraw imaging effects under Actions collection of the ImageElement that is wrapping the embedded image. In this case we are going to convert the image to negative and then scale it to 50% of the original size.

    Your code should look like the following: 
    <form id="form1" runat="server">
    <div>
        <neoimg:ImageDraw ID="ImageDraw1" runat="server">
            <Elements>
                <neoimg:ImageElement Source="Image" SourceImage="<%$ Resources:MyResources, t_shirt %>">
                    <Actions>
                        <neoimg:ConvertToNegative />
                        <neoimg:Scale HeightPercentage="50" WidthPercentage="50" />
                    </Actions>
                </neoimg:ImageElement>
            </Elements>
        </neoimg:ImageDraw>
    </div>
</form>
  • That's it. Run your application again. ImageDraw should manage, apply the imaging effects and render the embedded image.


    The image embedded into the RESX file is rendered by ImageDraw converting it to negative first and scaling it finally.
Dynamic Image Composition using embedded images
ImageDraw allows Image Composition concept in ASP.NET applications. In this scenario we're going to use an ImageDraw control to render a Composite Image consisting of the two images embedded into a RESX file - the T-Shirt image and the ASP.NET logo. Follow these steps:
  • Open a new ASP.NET Webform in Source View and drag & drop an ImageDraw control inside it. You should get something like this: 
    <form id="form1" runat="server">
    <div>
        <neoimg:ImageDraw ID="ImageDraw1" runat="server">
        </neoimg:ImageDraw>
    </div>
</form>
  • Now inside ImageDraw control tag add 2 (two) ImageElements - into the Elements collection - which will wrap and render each embedded image generating the output Composite Image. Your code must look like the following: 
    <form id="form1" runat="server">
    <div>
        <neoimg:ImageDraw ID="ImageDraw1" runat="server">            
            <Elements>
                <neoimg:ImageElement Source="Image" SourceImage="<%$ Resources:MyResources, t_shirt %>"></neoimg:ImageElement>
                <neoimg:ImageElement Source="Image" SourceImage="<%$ Resources:MyResources, aspnetlogo %>" X="70" Y="50"></neoimg:ImageElement>
            </Elements>
        </neoimg:ImageDraw>
    </div>
</form>
  • That's it. Run your application once again. ImageDraw should merge both embedded images and render the output composite image to the client browser.


    The output composite image generated by ImageDraw merging two images embedded into the RESX file.
Dynamic Image Composition using embedded images in Data Binding scenarios
ImageDraw allows Image Composition concept in ASP.NET Data Binding scenarios as well. In this sample we're going to use a DataList control with an ImageDraw control to render Composite Images consisting of a set of local images (t-shirts) and an image embedded into a RESX file (the ASP.NET logo). The complete demo sample is available for downloading at the end of this article.
Follow these steps:
  • Open a new ASP.NET Webform in Source View and drag & drop a DataList control onto it.
  • In the DataList's ItemTemplate drag and drop an ImageDraw control. Add 2 (two) ImageElements into the Elements collection of ImageDraw, one for t-shirt images and the other one for the ASP.NET logo image. The data to be bound to the DataList and ImageDraw controls will be acquired from an XML file which contains info about t-shirts such us the image file name and the color of each item. The project has got an images folder which locally holds the different t-shirt images in JPEG format. In addition, t-shirt images and the ASP.NET logo are scaled to 50% of their original sizes in order to get a smaller output composite image.

    IMPORTANT: Learn more about ImageDraw Data Binding reading the product help documentation.


    Complete your code in order it looks like the following: 
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" CellPadding="10">
    <ItemTemplate>
        <neoimg:ImageDraw ID="ImageDraw1" runat="server" AlternateText='<%# Eval("color", "ASP.NET t-shirt - Color: {0}") %>'  CacheExpiresAtDateTime="">
            <Elements>
                <neoimg:ImageElement Source="File" DataImageFileField="imageFileName" DataImageFileFormatString="~/images/{0}">
                    <Actions>
                        <neoimg:Scale HeightPercentage="50" WidthPercentage="50" />
                    </Actions>
                </neoimg:ImageElement>
                <neoimg:ImageElement Source="Image" SourceImage="<%$ Resources:MyResources, aspnetlogo %>" X="40" Y="30">
                    <Actions>
                        <neoimg:Scale HeightPercentage="50" WidthPercentage="50" />
                    </Actions>
                </neoimg:ImageElement>
            </Elements>
            <Canvas Height="124" Width="137" />
        </neoimg:ImageDraw>
    </ItemTemplate>
    <HeaderTemplate>
        <span style="color: royalblue; font-family: Arial"><strong>
        Buy your ASP.NET t-shirt now!</strong></span>
    </HeaderTemplate>
</asp:DataList>
  • Go to the code-behind class of the WebForm and write the following Data Binding stuff in the Page_Load event procedure.
    Visual Basic .NET 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim ds As New DataSet()
        ds.ReadXml(Server.MapPath("t-shirts.xml"))

        Me.DataList1.DataSource = ds
        Me.DataList1.DataBind()

End Sub
    Visual C# .NET 
    protected void Page_Load(object sender, EventArgs e)
{
	DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("t-shirts.xml"));

        this.DataList1.DataSource = ds;
        this.DataList1.DataBind();
}
  • That's it. Run your application. ImageDraw should generate the output composite image by merging local t-shirt images and the embedded ASP.NET logo image.

    The output composite image generated by ImageDraw merging local images together an image embedded into the RESX file in Data Binding scenario.
    The output composite image generated by ImageDraw merging local images together an image embedded into the RESX file in Data Binding scenario.


Sample Files Download
Here are the VB.NET and C# versions of the Data Binding sample and the ASP.NET Resource RESX file to reproduce the first three scenarios.
For ImageDraw 3.0
For ImageDraw 2.0
Remember to download and install ImageDraw in order to reproduce this sample demo.
If you need more information or assistance, please contact our .
  Home   |    About us   |    Products   |   Support   |   Contact us   |   Privacy Policy
 Copyright © 2003 - 2010 Neodynamic S.R.L. All rights reserved.