How to create Papers Pile effect through ImageDraw image composition and ASP.NET
Product ImageDraw for ASP.NET
Published 09/26/2007
Updated 09/26/2007
Requirements
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)
In the following guide you'll learn how to use ImageDraw Dynamic Image Composition feature to create a Papers Pile effect on a set of image files in an ASP.NET Web Application.
The idea behind this guide is to dynamically create Composite Images with Papers Pile effect for a fictitious Photo Gallery ASP.NET Web Application. To simulate the effect we'll use a predefined static image which will represent the Papers Pile together a set of image files - photos - stored in a local folder. The following image tries to provide you with a preview of what we want to accomplish with this demo.
The original photo files and papers pile image that will be merged to create the Photo Gallery with Papers Pile effect.
In this guide we'll use Neodynamic ImageDraw control which is available for ASP.NET 2.0 or later and Visual Studio 2005 (Visual Web Developer Express Edition can be use as well). However, in this guide will use Visual Studio 2005.
Follow these steps
- Open VS 2005 and create a new Website.
- The project will contain two folders. One folder is called photos and into it there are the photo image files to be shown in the Photo Gallery. The other folder is called images and it simply holds the papers.png image file that will be used to simulate the desired effect. You can create the papers.png file using any Professional Image Editor such as Macromedia Fireworks, Adobe Photoshop, and so on. In addition, an XML file called imagedata.xml containing all photo image paths will be used to bind it to a DataList control. All needed files are available for downloading at the end of this guide.
- Open the ASP.NET WebForm in Design View and drag and drop onto it a DataList control.
- In the files available for downloading we have included an ImageDraw control to simulate the Photo Gallery title with GlassTable (reflection) effect. This is not explained in this guide but you should find it fairly self-explanatory examining the download files (get it at the end of this guide).
- Edit the DataList's ItemTemplate and drag and drop an ImageDraw control inside it. It's time to design the Output Composite Image using ImageDraw control. Each Output Composite Image to generate will look like the following:
There are two ways to compose the image using ImageDraw:
- Write ASP.NET HTML code
- Use the built-in ImageDraw Visual Editor
In this guide will go through all steps by using Visual Editor which, in turn, will generate the needed ASP.NET HTML code.
Using ImageDraw Visual Editor to compose the output image
- With the DataList's ItemTemplate opened in Design View, launch ImageDraw Visual Editor right-clicking on ImageDraw control and selecting ImageDraw Visual Editor... To learn more about ImageDraw Visual Editor please read it in the product help documentation or clicking on Help button on the Visual Editor form.
- ImageDraw controls are based on a Canvas and one or more Elements -ImageElement and TextElement. Follow these steps to get the desired Composite Image:
- Add an ImageElement - clicking on Image button on the elements toolbar - that will wrap a static image called papers.png under images folder.
Select the ImageElement and set these properties:
- SourceFile: ~/images/papers.png
- Add another ImageElement that will represent each photo. This ImageElement will be data-bound to local paths for each photo file stored in the XML file. Select the ImageElement and set these properties:
Data Binding Setting on the ImageElement object: Select the ImageElement and in the Properties pane, set the DataImageFileField property to filename (the field name of the data source containing the photo file path) and the DataImageFileFormatString property to ~/photos/{0} (because all photos are under photos folder).
Applying imaging effects on the ImageElement: We will add some built-in actions on this element in order to improve its appearance. Right-clicking on the ImageElement and select Actions > Resize on the context menu. After that, select the Resize action on the left pane and set the following properties:
This action will take each original photo and will resize it to a fixed size (134x86). Resize action is very flexible and you can learn more about it in the product help documentation.
- That's it. Click on OK button to close the ImageDraw Visual Editor. End the edition operation on the DataList's ItemTemplate, too. You should get something like the following at design time.
- If you change to Source View you should get the following ASP.NET HTML code for the output composite image created by ImageDraw designer. You should find the generated HTML code fairly self-explanatory.
<neoimg:ImageDraw ID="ImageDraw2" runat="server" CacheExpiresAtDateTime="" ColorDepth="Format32bpp" ImageFormat="Jpeg" JpegCompressionLevel="95">
<Canvas Fill-BackgroundColor="153, 204, 0" Height="135" Width="173" />
<Elements>
<neoimg:ImageElement Source="File" SourceFile="~/images/papers.png">
</neoimg:ImageElement>
<neoimg:ImageElement Source="File" X="21" Y="24" DataImageFileField="filename" DataImageFileFormatString="~/photos/{0}">
<Actions>
<neoimg:Resize Height="86" Width="134" />
</Actions>
</neoimg:ImageElement>
</Elements>
</neoimg:ImageDraw>
- The last step is to code the Data Binding stuff at code-behind. Copy and paste the following code for Page_Load event procedure.
VB
If Not Me.IsPostBack Then
Dim ds As DataSet = New DataSet
ds.ReadXml(Server.MapPath("imagedata.xml"))
Me.DataList1.DataSource = ds
Me.DataList1.DataBind()
End If
C#
if (!IsPostBack)
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("imagedata.xml"));
this.DataList1.DataSource = ds;
this.DataList1.DataBind();
}
- That's it. Run your application. You should get something like this.
The Photo Gallery with Papers Pile effect on each photo using ImageDraw
Sample Files Download
Here are the VB.NET and C# versions of this sample. Please, download the zip file you want to. After extract it you'll find all necessary files to reproduce this step by step guide.
For ImageDraw 3.0
For ImageDraw 2.0
Remember to download and install ImageDraw in order to reproduce this sample demo.