Data Binding Sample

For more advanced Data Binding samples with Step-By-Step Guides, see online demos at Neodynamic Website (http://www.neodynamic.com).

Photo Gallery Data Binding Sample

The following sample uses ImageDraw control to render remote image files - specified by URLs – to create a Photo Gallery page using an ASP.NET DataList control.
Image URLs are stored in an XML file and ImageDraw is used to dynamically create sophisticated image effects manipulating the original image files.

Follow these steps:

Create an ASP.NET Website using your preferred development tool like Microsoft Visual Studio 2005/2008 or Visual Web Developer Express 2005/2008

Add to your website a new XML file naming it as ImageData.xml. Copy and paste the following content onto it:

<?xml version="1.0" encoding="utf-8" ?> 
<images>
	<image text="Building" url="http://www.btinternet.com/~fireballxl5/buildings/city/building00009p_small.jpg"></image>
	<image text="Church" url="http://www.btinternet.com/~fireballxl5/buildings/city/church03394_small.jpg"></image>
	<image text="Glass" url="http://www.btinternet.com/~fireballxl5/buildings/city/glass0873_small.jpg"></image>
	<image text="Distillary" url="http://www.btinternet.com/~fireballxl5/buildings/country/distillary2_small.jpg"></image>
	<image text="Big Ben" url="http://www.btinternet.com/~fireballxl5/buildings/london/bigben01958_small.jpg"></image>
	<image text="Victoria Tower" url="http://www.btinternet.com/~fireballxl5/buildings/london/victoriatower01942_small.jpg"></image>
	<image text="Circus Show" url="http://www.btinternet.com/~fireballxl5/buildings/themepark/circusshow4240_small.jpg"></image>
	<image text="Liberty" url="http://www.btinternet.com/~fireballxl5/buildings/useast/liberty_small.jpg"></image>
</images>

The XML file contains a set of URLs which reference some online image files. All images in this sample are courtesy of http://www.freeimages.co.uk website.

Add a new WebForm. Edit it in Source View and copy the following directive which references ImageDraw assembly - ensure to copy the Neodynamic.WebControls.ImageDraw.dll assembly into the BIN folder of your application.
```
<%@ Register TagPrefix="neoimg" Namespace="Neodynamic.WebControls.ImageDraw" Assembly="Neodynamic.WebControls.ImageDraw" %>
```

Copy the following HTML Syntax under Form tag.

<div style="border: #b8b3b0 1px solid;">
    <div style="border: #9fa6b6 1px solid;">
        <div style="border: #4f6d91 1px solid; background-color: #e5eef5; text-align: center">
            <asp:DataList ID="DataList1" runat="server" CellSpacing="20" RepeatColumns="4">
                <HeaderTemplate>
                    Photo Gallery
                </HeaderTemplate>
                <FooterStyle Font-Size="X-Small" Font-Names="Arial" HorizontalAlign="Center" VerticalAlign="Middle">
                </FooterStyle>
                <FooterTemplate>
                    <hr />
                    Powered by Neodynamic ImageDraw for ASP.NET<br />
                    Images: <a href="http://www.freeimages.co.uk" target="_blank">www.freeimages.co.uk</a>
                </FooterTemplate>
                <ItemTemplate>
                    <table id="Table1" cellspacing="1" cellpadding="1" width="100%" border="0">
                        <tr>
                            <td align="center">
                                <neoimg:ImageDraw ID="ImageDraw1" runat="server" ImageFormat="Jpeg" ToolTip='<%# Eval("text") %>'
                                    AlternateText='<%# Eval("text") %>' CacheExpiresAtDateTime="">
                                    <Elements>
                                        <neoimg:ImageElement DataImageFileField="url" Name="picture" Source="File">
                                            <Actions>
                                                <neoimg:DecorativeBorder Width="6" />
                                                <neoimg:DropShadow Angle="270" Distance="3" />
                                            </Actions>
                                        </neoimg:ImageElement>
                                    </Elements>
                                    <Canvas Height="125" Width="122" Fill-BackgroundColor="229, 238, 245" Fill-ForegroundColor="0, 0, 0"
                                        Fill-GradientColor1="255, 255, 255" Fill-GradientColor2="0, 0, 0"></Canvas>
                                </neoimg:ImageDraw>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Arial" Font-Size="X-Small"
                                    Target="_blank" NavigateUrl='<%# Eval("url") %>' Text='<%# Eval("text") %>'>
                                </asp:HyperLink>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </div>
</div>

In the code above, an ImageDraw control is included into the ItemTemplate section of the DataList control. In addition, the ImageDraw control defines one ImageElement which will be data-bound. On that ImageElement, we have applied two Actions; DecorativeBorder and DropShadow in order to enhance the final appearance of photos as is shown in the following figure.

The original image from the source and the same image after ImageDraw processing

As stated before, the image source will come in the form of URLs and such, the DataImageFileField property of the ImageElement is set as follows:

DataImageFileField="url"

Note that the "url" string in the data binding expression refers to the url attribute (the data field name) in the XML file.

After doing that, if you change to Design View, you should get something like this:

ImageDraw into a DataList control at design time

Now, it's time to code the data binding stuff. So, change to code-behind class and write the following code in the Page_Load event procedure:
That's it. Just run your ASP.NET application. The Photo Gallery page should look similar to the following figure:

The Photo Gallery page showing the source image files with dynamic effects applied on each of them by ImageDraw control

As you can see in the last figure, all original images are dynamically processed by ImageDraw notably enhancing the whole appearance of the page.

For more advanced Data Binding samples with Step-By-Step Guides, see online demos at Neodynamic Website (http://www.neodynamic.com).