How to create dynamic Folded Corners effect through ImageDraw image composition...

How to create dynamic Folded Corners effect through ImageDraw image composition and ASP.NET

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)

In the following guide you'll learn how to use ImageDraw Dynamic Image Composition feature to create a Folded Corners 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 Folded Corners effect for a fictitious Photo Gallery ASP.NET Web Application. To simulate the Folded Corner effect we'll use a predefined static image which will represent the Folded Corner together a set of image files - photos - stored in a local folder. To improve the visual appearance of each photo, some built-in ImageDraw's imaging effects - such as GlassTable (Reflection), Decorative Border, Resizing - are applied on each of them. The following image tries to provide you with a preview of what we want to accomplish with this demo.

http://www.neodynamic.com/Support/FA...gure1Small.jpg
The original photo files and folded corner image that will be merged to create the Photo Gallery with Folded Corners 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
1- Open VS 2005 and create a new Website.
2- 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 FoldedCorner.png image file that will be used to simulate the desired effect. You can create the FoldedCorner.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.

http://www.neodynamic.com/Support/FAQs/43/figure2.jpg

3- Open the ASP.NET WebForm in Design View and drag and drop onto it a DataList control.


4- 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).


5- 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:

http://www.neodynamic.com/Support/FAQs/43/figure3.jpg

There are two ways to compose the image using ImageDraw:
a. Write ASP.NET HTML code
b. 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 represent each photo. This ImageElement will be data-bound to local paths for each photo file stored in the XML file.

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:

* Height: 110
* Width: 110


This action will take each original photo and will resize it to a fixed size (110x110). Resize action is very flexible and you can learn more about it going to the product help documentation.

Then, add another action selecting DecorativeBorder and set the following properties for it:

* Width: 8


This action will take each resized photo and will add a 8px Solid White decorative border around it. Just as for Resize, DecorativeBorder action is very flexible and you can learn more about it in the product help documentation.

http://www.neodynamic.com/Support/FA...gure4Small.png


+ The last element is for the Folded Corner Effect. Add another ImageElement which will wrap a static image called foldedcorner.png under images folder.

Select the ImageElement and set these properties:

* SourceFile: ~/images/foldedcorner.png
* X: 82
* Y: 82

http://www.neodynamic.com/Support/FA...gure5Small.png

+ 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.

http://www.neodynamic.com/Support/FA...gure6Small.png

+ 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="233, 240, 243" Height="127" Width="127" />
<Elements>
<neoimg:ImageElement Source="File" DataImageFileField="filename" DataImageFileFormatString="~/photos/{0}">
<Actions>
<neoimg:Resize Height="110" Width="110" />
<neoimg:DecorativeBorder Width="8" />
</Actions>
</neoimg:ImageElement>
<neoimg:ImageElement Source="File" SourceFile="~/images/foldedcorner.png" X="82" Y="82">
</neoimg:ImageElement>
</Elements>
</neoimg:ImageDraw>

6- The last step is to code the Data Binding stuff at code-behind. Copy and paste the following code for Page_Load event procedures.

Visual Basic .NET
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


Visual C# .NET
if (!IsPostBack)
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("imagedata.xml"));
this.DataList1.DataSource = ds;
this.DataList1.DataBind();
}

7- That's it. Run your application. You should get something like this.

http://www.neodynamic.com/Support/FA...gure7Small.jpg
The Photo Gallery with a folded corner effect on each photo using ImageDraw

Links:
This Demo
More Demos
Download ImageDraw for ASP.NET
More Information about Neodynamic ImageDraw for ASP.NET


Neodynamic
.NET Components & Controls
http://www.neodynamic.com
http://www.imagedraw-for-aspnet.com