|
|
<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.
- I've been programming Windows and Web apps since 1997.
- My greatest concern nowadays is product, user interface, and usability.
- TypeScript / React expert
@geeksplainer
Submit an article or tip