Click here to Skip to main content
Click here to Skip to main content
Articles » Multimedia » GDI+ » Applications » Downloads
 
Add your own
alternative version

A Professional HTML Renderer You Will Use

, 29 Jan 2009 BSD
100% managed code that draws HTML on any device
HtmlDemo.002.zip
System.Drawing.Html.dll
Html Demo.exe
HtmlDemo.zip
System.Drawing.Html.dll
Html Demo.exe
System.Drawing.Html.002.zip
System.Drawing.Html
Html Demo
bin
Debug
Html Demo.exe
Html Demo.vshost.exe
HtmlDemo.zip
System.Drawing.Html.dll
Html Demo.csproj.user
Properties
Settings.settings
Resources
comment16.gif
delete16.gif
delete32.gif
exclamation32.png
favorites32.png
font32.png
formula32.png
image32.png
method16.gif
paly32.png
property16.gif
property32.png
refreshdocument32.png
web_pallete.gif
Window.gif
Samples
System.Drawing.Html.suo
System.Drawing.Html
bin
Debug
System.Drawing.Html.dll
System.Drawing.Html.vshost.exe
Properties
Settings.settings
System.Drawing.Html.zip
Html Demo.exe
Html Demo.vshost.exe
System.Drawing.Html.dll
Html Demo.csproj.user
Settings.settings
comment16.gif
delete16.gif
delete32.gif
exclamation32.png
favorites32.png
font32.png
formula32.png
image32.png
method16.gif
paly32.png
property16.gif
property32.png
refreshdocument32.png
web_pallete.gif
Window.gif
System.Drawing.Html.suo
System.Drawing.Html.dll
System.Drawing.Html.vshost.exe
Settings.settings
<html>
	<head>
		<title></title>
		<link rel="Stylesheet" href="property:Html_Demo.Bridge.StyleSheet" />
		<style>
		td { vertical-align:middle; padding:1em; }
		</style>
	</head>
	<body>
	 <h1>Images <img src="property:Html_Demo.Bridge.ImageIcon" /></h1>
	 <blockquote>
	 <p>Of course, there's the capability of displaying images. In this release, images lack of the expected alignment features to behave just as expected on an HTML context, but they will do just fine for inline contexts, tables and some others.</p>
	 
	 <h2>Inserting images</h2>
	 
	 <p>We all know that the <code>src</code> attribute of the <code>img</code> HTML tag can be a relative or absolute path to an image on the same or any other server. Here things are slightly different. Images can come from other sources:</p>
	 
	 <ul>
	 <li><b>File Paths</b>: If you place a path to a file, the Renderer will try to load it using <code><font color=#099>Image</font>.FromFile</code></li>
	 <li><b>Static Properties:</b> Obtains the image from a static property that returns an <code><font color=#099>Image</font></code> object</li>
	 <li><B>Static Methods:</B> Obtains the image from a static method that takes no arguments and returns an <code><font color=#099>Image</font></code></li>
	 </ul>
	 
	 <p>For <i>static properties</i>, you must write <code>propety:</code> before the full name to the property. For <i>static methods</i> you must precede the path of the method with <code>method:</code></p>
	 
	 <div class=example>
	 <p>For example, if your namespace is <code>Company.Namespace</code>, and the class where the property resides is called <code>Images</code> with a property that returns the image called <code>ImageProperty</code>, the <code>src</code> attribute for the image would look like this.</p>
	 <p><code>src = "<span color=blue>property</span>:Company.Namespace.<span color=#0cc>Images</span>.ImageProperty"</code></p>
	 <p>Or the same case, but with a method name <code>ImageMethod</code></p>
	 <p><code>src = "<span color=blue>method</span>:Company.Namespace.<span color=#0cc>Images</span>.ImageMethod"</code></p>
	 </div>
	 
	 <h2>Positioning Images</h2>
	 <p>You can use Images anyway you like, apply borders margin and padding as for any other box.</p>
	 <p>Some examples of image positioning:</p>
	 
	 <table border=1>
	 <tr>
	    <td>Just an image:</td> <td align="center"><img src="property:Html_Demo.Bridge.FontIcon" /></td>
	    
	 </tr>
	 <tr>
	    <td>Image with border and background:</td> <td align="center"><img src="property:Html_Demo.Bridge.FontIcon" style="border:1px solid blue;background-color:Silver" /></td>
	 </tr>
	 <tr>
	    <td>Stretched Image:</td> <td align="center"><img src="property:Html_Demo.Bridge.FontIcon" width=50 height=50 /></td>
	 </tr>
	
	 <tr>
	 <td>Huge padding and border:</td><td><img align="center" src="property:Html_Demo.Bridge.FontIcon" style="padding: 1em;
             border: solid 1em blue; background-color: #def" /></td>
	    
	 </tr>
	  <tr>
	 <td colspan=2 align=center valign=middle>Image in line <img src="property:Html_Demo.Bridge.CommentIcon" /> with the text</td>
	 </tr>
	 </table>
	 </blockquote>
	</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The BSD License

Share

About the Author

Jose Menendez Póo
Team Leader
Mexico Mexico
I'm in game programming now: https://itunes.apple.com/us/app/ugly-aliens-training-center/id859271884?ls=1&mt=8
 
Jose Manuel Menéndez Poó
 
- I've been programming Windows and Web apps since 1997.
- My greatest concern nowadays is user interface usability.
 
Questions and stuff by twitter: @menendezpoo
 
Blog
menendezpoo.com

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 30 Jan 2009
Article Copyright 2009 by Jose Menendez Póo
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid