Add documentation, class reference, and quick-start guide pages (5771 files)
This commit is contained in:
Jarvis Prime
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Background Image</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-text-formatting.html"><strong>
|
||||
« Text Formatting</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-checkboxes.html"><strong>Check Boxes »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Background Image</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>There are four properties to control background image:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BackgroundImage</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BackgroundImageAlignment</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BackgroundImageLayout</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BackgroundImageOpacity</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The <span class="code">BackgroundImage</span> property is actually derived from
|
||||
<span class="code">System.Windows.Forms.Control</span> class.</p>
|
||||
|
||||
<p>This property is hidden in the regular .NET ListView.</p>
|
||||
|
||||
<p>Setting <span class="code">BackgroundImageLayout</span> to <span class="code">None</span> and
|
||||
changing the <span class="code">BackgroundImageAlignment</span> property yields different
|
||||
positioning of background image:</p>
|
||||
|
||||
<p class="images"><img src="background-image-align1.png"><img src="background-image-align2.png"></p>
|
||||
|
||||
<p>The image can also be tiled, scaled proportionally or unproportionally
|
||||
by changing the <span class="code">BackgroundImageLayout</span> property:</p>
|
||||
|
||||
<p class="images"><img src="background-image-layout1.png"><img src="background-image-layout2.png"></p>
|
||||
|
||||
<p>Image opacity can also be changed via the
|
||||
<span class="code">BackgroundImageOpacity</span> property:</p>
|
||||
|
||||
<p class="images"><img src="background-image-opacity1.png"><img src="background-image-opacity2.png"></p>
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
// set background image
|
||||
this.listView.BackgroundImage = Resources.ImageOwl;
|
||||
|
||||
// set background image properties
|
||||
this.listView.BackgroundImageAlignment = ContentAlignment.BottomRight;
|
||||
this.listView.BackgroundImageLayout = ImageLayout.None;
|
||||
this.listView.BackgroundImageOpacity = 64;
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
' set background image
|
||||
ListView.BackgroundImage = Resources.ImageOwl
|
||||
|
||||
' set background image properties
|
||||
ListView.BackgroundImageAlignment = ContentAlignment.BottomRight
|
||||
ListView.BackgroundImageLayout = ImageLayout.None
|
||||
ListView.BackgroundImageOpacity = 64
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-text-formatting.html"><strong>
|
||||
« Text Formatting</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-checkboxes.html"><strong>Check Boxes »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Check Boxes</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-background-image.html"><strong>
|
||||
« Background Image</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-collections.html"><strong>Collections »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Check Boxes</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>To set up check boxes, set <span class="code">CheckBoxes</span> property to either
|
||||
<span class="code">TwoState</span> or <span class="code">ThreeState</span>. You can disable check box
|
||||
on certain items by setting
|
||||
<span class="code">BetterListViewItem.AllowShowCheckBox</span> property to <span class="code"></span></p>
|
||||
|
||||
<p><span class="code">false</span>. The following image shows three state check boxes
|
||||
with the last items with check box disabled:</p>
|
||||
|
||||
<p class="images"><img src="checkboxes-overview.png"></p>
|
||||
|
||||
<p>Check boxes are supported in every view. For example, here are the
|
||||
check boxes enabled in <span class="code">Thumbnails</span> view:</p>
|
||||
|
||||
<p class="images"><img src="checkboxes-thumbnails.png"></p>
|
||||
|
||||
<h2>Check Box Appearance</h2>
|
||||
|
||||
|
||||
<p>It is possible to customize check box appearance on each item using
|
||||
<span class="code">BetterListViewItem.CheckBoxAppearance</span> property. It can have
|
||||
on of three values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Hide</span><ul style="list-style:none"><li>
|
||||
<p>Check box is not displayed on the item.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CheckBox</span><ul style="list-style:none"><li>
|
||||
<p>Default appearance.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">RadioButton</span><ul style="list-style:none"><li>
|
||||
<p>Check box appears as radio button.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Note that <strong><em>RadioButton</em></strong> appearance supports only
|
||||
two states. When three-state check boxes are used, the radio button-like
|
||||
check boxes will show only the two.</p>
|
||||
|
||||
<p>The following image shows how custom check box appearance can be
|
||||
used. Check boxes on parent items are hidden while the child items display
|
||||
radio buttons:</p>
|
||||
|
||||
<p class="images"><img src="checkboxes-radio.png"></p>
|
||||
|
||||
|
||||
<h2>Check Box Alignment</h2>
|
||||
|
||||
|
||||
<p>When check boxes are turned on, every item label is aligned such
|
||||
that there is enough space for a check box even when the check box is
|
||||
hidden on that item. This is a default appearance and can be adjusted by
|
||||
setting <span class="code">CheckBoxesAlign</span> property to <span class="code">false</span>. The
|
||||
following images show the default appearance (left) and adjusted
|
||||
appearance when <span class="code">CheckBoxesAlign</span> property is set to
|
||||
<span class="code">false</span> (right). The "parent 3" and "parent 4" items look on
|
||||
the left image like children of "parent 2" item, which is not the case.
|
||||
Removing the unnecessary offset clarifies their position:</p>
|
||||
|
||||
<p class="images"><img src="checkboxes-align1.png"><img src="checkboxes-align2.png"></p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"unchecked by default",
|
||||
"checked by default",
|
||||
"indeterminate by default",
|
||||
"check box disabled"
|
||||
});
|
||||
|
||||
// set the first item unchecked
|
||||
this.listView.Items[0].CheckState = CheckState.Unchecked;
|
||||
// set the second item checked
|
||||
this.listView.Items[1].CheckState = CheckState.Checked;
|
||||
// set the third item in indeterminate state
|
||||
this.listView.Items[2].CheckState = CheckState.Indeterminate;
|
||||
// disable check box on the fourth item
|
||||
this.listView.Items[3].CheckBoxAppearance = BetterListViewCheckBoxAppearance.Hide;
|
||||
|
||||
// enable three-state check boxes (the same property can be used for disabling them or settings two-state ones)
|
||||
this.listView.CheckBoxes = BetterListViewCheckBoxes.ThreeState;
|
||||
// check boxes are supported in all views, so we can set for example the 'List' view
|
||||
this.listView.View = BetterListViewView.List;
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
ListView.Items.AddRange(
|
||||
New String() {
|
||||
"unchecked by default",
|
||||
"checked by default",
|
||||
"indeterminate by default",
|
||||
"check box disabled"
|
||||
})
|
||||
|
||||
' set the first item unchecked
|
||||
ListView.Items (0).CheckState = CheckState.Unchecked
|
||||
' set the second item checked
|
||||
ListView.Items (1).CheckState = CheckState.Checked
|
||||
' set the third item in indeterminate state
|
||||
ListView.Items (2).CheckState = CheckState.Indeterminate
|
||||
' disable check box on the fourth item
|
||||
ListView.Items (3).CheckBoxAppearance = BetterListViewCheckBoxAppearance.Hide
|
||||
|
||||
' enable three-state check boxes (the same property can be used for disabling them or settings two-state ones)
|
||||
ListView.CheckBoxes = BetterListViewCheckBoxes.ThreeState
|
||||
' check boxes are supported in all views, so we can set for example the 'List' view
|
||||
ListView.View = BetterListViewView.List
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-background-image.html"><strong>
|
||||
« Background Image</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-collections.html"><strong>Collections »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Collections</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-checkboxes.html"><strong>
|
||||
« Check Boxes</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-columns.html"><strong>Columns »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Collections</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView contains several types collections of its elements
|
||||
(columns, items, sub-items, groups). These can be accessed via
|
||||
properties:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">Columns</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">Items</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">Groups</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.SubItems</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.ChildItems</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Each of these collections are of type
|
||||
<span class="code">BetterListViewElementCollection<TItem></span> where
|
||||
<span class="code">TItem</span> is collection element type. All these collection also
|
||||
implement <span class="code">IList<TItem></span>,
|
||||
<span class="code">ICollection<TItem></span> and their nongeneric
|
||||
companions.</p>
|
||||
|
||||
<p>They also implement extra functionality through
|
||||
<span class="code">IExtendedList<TItem></span>:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">AddRange</span><ul style="list-style:none"><li>
|
||||
<p>add set of items</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">RemoveRange</span><ul style="list-style:none"><li>
|
||||
<p>remove subset of items</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>These collections are bound to Better ListView, so any modification to
|
||||
these collection will be projected into control state.</p>
|
||||
|
||||
<p>When the collection is created by user code, e.g.:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">var myItems = new BetterListViewItemCollection();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Dim myItems = New BetterListViewItemCollection()</code></pre>
|
||||
|
||||
<p>then the collection is not bound to the control and its state is
|
||||
independent on the control's state.</p>
|
||||
|
||||
<p>All the collections are both binary and XML serializable.</p>
|
||||
|
||||
<h2>Adding Elements</h2>
|
||||
|
||||
|
||||
<p>Specific collections provide several overrides for easy addition of
|
||||
items, for example:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">myItems.Add("New Item");</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">myItems.Add("New Item")</code></pre>
|
||||
|
||||
<p>Adds new item with text 'New Item' in the collection.</p>
|
||||
|
||||
<p>All Better ListView collections support adding arbitrary objects,
|
||||
for example:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">var person = new Person("Mark Bradley", 13, Gender.Male);
|
||||
|
||||
myItems.Add(person);</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Dim person = New Person("Mark Bradley", 13, Gender.Male)
|
||||
|
||||
myItems.Add(person)</code></pre>
|
||||
|
||||
<p>This will create a new BetterListViewItem with Text property
|
||||
obtained from converting the <span class="code">Person</span> object. The type can
|
||||
either provide custom <span class="code">TypeConverter</span>, or default
|
||||
<span class="code">TypeConverter</span> (for primive types) or <span class="code">ToString</span>
|
||||
method is used for conversion.</p>
|
||||
|
||||
<p>Multiple custom items can be added either:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">myItems.AddRange(new object[] { person1, person2, "New Person" });</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">myItems.AddRange(New Object() {person1, person2, "New Person"})</code></pre>
|
||||
|
||||
|
||||
<h2>Custom Type Conversion</h2>
|
||||
|
||||
|
||||
<p>You can add arbitrary objects to any Better ListView collection. Of
|
||||
course, the objects have to be converted to collection's item type (e.g.
|
||||
<span class="code">BetterListViewItem</span>). If no additional code is provided, the
|
||||
Better ListView will create new item and fill it with text using
|
||||
<span class="code">Object.ToString()</span> method. You can specify this text by
|
||||
providing <span class="code">ToString()</span> method override. Here is a simple
|
||||
<span class="code">Person</span> type providing custom <span class="code">ToString()</span>
|
||||
method:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class Person
|
||||
{
|
||||
public string Name;
|
||||
public int Age;
|
||||
|
||||
public override string ToString()
|
||||
{
|
||||
return Name;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class Person
|
||||
|
||||
Public Name As String
|
||||
Public Age As Integer
|
||||
|
||||
Public Overrides Function ToString() As String
|
||||
Return Name
|
||||
End Function
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<p>If you want more control over the conversion, you can provide a
|
||||
custom <span class="code">TypeConverter</span>. The following sample code shows
|
||||
implementation of <span class="code">PersonConverter</span> class that allows
|
||||
conversion from <span class="code">Person</span> type to
|
||||
<span class="code">BetterListViewItem</span> type:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class PersonConverter : TypeConverter
|
||||
{
|
||||
public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
|
||||
{
|
||||
if (destinationType == typeof(BetterListViewItem))
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
return base.CanConvertTo(context, destinationType);
|
||||
}
|
||||
|
||||
public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
|
||||
{
|
||||
if (destinationType == typeof(BetterListViewItem))
|
||||
{
|
||||
Person person = (Person)value;
|
||||
|
||||
// convert Person instance to BetterListViewItem instance
|
||||
return new BetterListViewItem(new string[] { person.Name, person.Age.ToString() });
|
||||
}
|
||||
|
||||
return base.ConvertTo(context, culture, value, destinationType);
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class PersonConverter
|
||||
Inherits TypeConverter
|
||||
Public Overrides Function CanConvertTo(context As ITypeDescriptorContext, destinationType As Type) As Boolean
|
||||
If destinationType = GetType(BetterListViewItem) Then
|
||||
Return True
|
||||
End If
|
||||
|
||||
Return MyBase.CanConvertTo(context, destinationType)
|
||||
End Function
|
||||
|
||||
Public Overrides Function ConvertTo(context As ITypeDescriptorContext, culture As CultureInfo, value As Object, destinationType As Type) As Object
|
||||
If destinationType = GetType(BetterListViewItem) Then
|
||||
Dim person As Person = DirectCast(value, Person)
|
||||
|
||||
' convert Person instance to BetterListViewItem instance
|
||||
Return New BetterListViewItem(New String() {person.Name, person.Age.ToString()})
|
||||
End If
|
||||
|
||||
Return MyBase.ConvertTo(context, culture, value, destinationType)
|
||||
End Function
|
||||
End Class</code></pre>
|
||||
|
||||
<p>Once you have the converter implemented, simply mark your custom
|
||||
type with <span class="code">TypeConverterAttribute</span> and Better ListView will
|
||||
make use of the converter instead of just <span class="code">ToString()</span>
|
||||
method:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">[TypeConverter(typeof(PersonConverter))]
|
||||
class Person
|
||||
{
|
||||
public string Name;
|
||||
public int Age;
|
||||
|
||||
public override string ToString()
|
||||
{
|
||||
return Name;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb"><TypeConverter(GetType(PersonConverter))> _
|
||||
Class Person
|
||||
Public Name As String
|
||||
Public Age As Integer
|
||||
|
||||
Public Overrides Function ToString() As String
|
||||
Return Name
|
||||
End Function
|
||||
End Class</code></pre>
|
||||
|
||||
<p>Note that <span class="code">TypeConverter</span> is primarily used by Better
|
||||
ListView for conversion to collection's native type or to
|
||||
<span class="code">String</span>. If the <span class="code">TypeConverter</span> does not support
|
||||
conversion to <span class="code">String</span>, the <span class="code">Object.ToString()</span>
|
||||
method is used instead.</p>
|
||||
|
||||
<p>Finally, you can add such <span class="code">Person</span> objects to Better
|
||||
ListView item collection and they will get converted automatically:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">Person person = new Person();
|
||||
|
||||
person.Name = "Jack Black";
|
||||
person.Age = 38;
|
||||
|
||||
listView.Items.Add(person);</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Dim person As New Person()
|
||||
|
||||
person.Name = "Jack Black"
|
||||
person.Age = 38
|
||||
|
||||
listView.Items.Add(person)</code></pre>
|
||||
|
||||
<p>Other item additon methods like Insert, <span class="code">AddRange</span> or
|
||||
<span class="code">InsertRange</span> can be used as well.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-checkboxes.html"><strong>
|
||||
« Check Boxes</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-columns.html"><strong>Columns »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Columns</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-collections.html"><strong>
|
||||
« Collections</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-context-menus.html"><strong>Context Menus »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Columns</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Displaying/Hiding all Column Headers</h2>
|
||||
|
||||
|
||||
<p>To display column headers in other views than
|
||||
<strong><em>Details</em></strong>, set <span class="code">ColumnsDisplayMode</span> property
|
||||
to <span class="code">ShowAlways</span>. The default value is <span class="code">ShowDetails</span>
|
||||
(show column headers in <strong><em>Details</em></strong> view only). Setting
|
||||
the property to <span class="code">Hide</span> hides all column headers.</p>
|
||||
|
||||
<p>Following image shows column headers displayed in Tile view:</p>
|
||||
|
||||
<p class="images"><img src="column-all-views.png"></p>
|
||||
|
||||
<p>To hide specific columns only, see <strong><em><a href="chapter-columns.html#hide-custom">Hiding Custom Columns</a></em></strong> below.</p>
|
||||
|
||||
|
||||
<h2>Column Header Styles</h2>
|
||||
|
||||
|
||||
<p>Each column header can have one of three styles defined by
|
||||
<span class="code">BetterListViewColumnHeader.Style</span> property:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Clickable</span><ul style="list-style:none"><li>
|
||||
<p>Default value. The column gets highlighted when mouse cursor
|
||||
hovers over it and registers mouse clicks.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Default</span><ul style="list-style:none"><li>
|
||||
<p>The style is determined by
|
||||
<span class="code">BetterListView.HeaderStyle</span> property.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Hidden</span><ul style="list-style:none"><li>
|
||||
<p>The column header is hidden.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Nonclickable</span><ul style="list-style:none"><li>
|
||||
<p>The column header does not react to mouse.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>The column header is present, but not displayed.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Sortable</span><ul style="list-style:none"><li>
|
||||
<p>The column header is clickable and items get sorted according
|
||||
to this column. Small arrow appears on the column header when items
|
||||
are sorted.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Unsortable</span><ul style="list-style:none"><li>
|
||||
<p>Works the same way as
|
||||
<span class="code">BetterListViewColumnHeaderStyle.Sortable</span> but the column
|
||||
header can be unsorted by clicking on it.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>When a single column header have style <span class="code">None</span>, that
|
||||
column header is not drawn (only its background is visible) and
|
||||
corresponding sub-items are visible.</p>
|
||||
|
||||
<p>When all column headers have style <span class="code">None</span>, the whole
|
||||
panel with column headers hides (see the following picture) and the
|
||||
sub-items remain visible. This effect is the same as when all column
|
||||
headers have style <span class="code">Default</span> and
|
||||
<span class="code">BetterListView.HeaderStyle</span> is set to
|
||||
<span class="code">None</span>:</p>
|
||||
|
||||
<p class="images"><img src="column-hidden.png"></p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="hide-custom" id="hide-custom"></a>Hiding Custom Columns</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>One way to hide a column would be simply removing it from
|
||||
<span class="code">Columns</span> collection. When there are items with sub-items,
|
||||
however, this approach requires removing also all the sub-items for the
|
||||
corresponding removed column.</p>
|
||||
|
||||
<p>When you need to just visually hide a column and corresponding
|
||||
sub-items (without removing them), call
|
||||
<span class="code">BetterListViewColumnHeader.Hide()</span> method. To re-show hidden
|
||||
column, call <span class="code">BetterListViewColumnHeader.Show()</span>. The same can
|
||||
be obtained by setting <span class="code">BetterListViewColumnHeader.Visible</span>
|
||||
property.</p>
|
||||
|
||||
<p>The following images show hiding some column in application which
|
||||
uses cotext menu for this action:</p>
|
||||
|
||||
<p class="images"><img src="column-hide-before.png"></p>
|
||||
|
||||
<p class="images"><img src="column-hide-after.png"></p>
|
||||
|
||||
|
||||
<h2>Column Resizing</h2>
|
||||
|
||||
|
||||
<p>Columns are resizable by default. There are two properties for
|
||||
setting-up this feature on each column:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.MinimumWidth</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.MaximumWidth</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Values of these properties depend upon each other and the
|
||||
<span class="code">BetterListViewColumnHeader.Width</span> property. This is because
|
||||
the minimum width have to be always smaller than the maximum width and the
|
||||
column width have to lay between the two extremes.</p>
|
||||
|
||||
<p>To disable column resizing for a given column, set
|
||||
<span class="code">BetterListViewColumnHeader.AllowResize</span> to
|
||||
<span class="code">false</span>.</p>
|
||||
|
||||
<p>To detect column width adjustment, use the
|
||||
<span class="code">ColumnWidthChanging</span> and <span class="code">ColumnWidthChanged</span>
|
||||
events.</p>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">Column header can have zero minimum width. In that case, it is
|
||||
possible to completely hide the column header. If several neighboring
|
||||
columns are collapsed this way, expanding them back is possible by
|
||||
dragging right side of a collapsed column header border.</p>
|
||||
<hr>
|
||||
<br><h2>Column Reordering</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="images"><img src="column-reorder.png"></p>
|
||||
|
||||
<p>Column reordering is disabled by default, but se be set-up by simply
|
||||
settings <span class="code">ColumnReorderMode</span> property to one of the following
|
||||
values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Disabled</span><ul style="list-style:none"><li>
|
||||
<p>Column reordering is disabled (default value).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Custom</span><ul style="list-style:none"><li>
|
||||
<p>Column reordering is enabled, but the actual reordering is
|
||||
governed from user code; only ColumnReordered event is
|
||||
raised.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ColumnsOnly</span><ul style="list-style:none"><li>
|
||||
<p>Column reordering is done on columns-only, not
|
||||
sub-items.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Enabled</span><ul style="list-style:none"><li>
|
||||
<p>Column reordering is enabled.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p><span class="code">ColumnReordered</span> event is raised after column reordering
|
||||
is finished. The actual reordering consists of switching column items in
|
||||
the <span class="code">Columns</span> collections and the corresponding sub-items in
|
||||
each row. This feature actually modifies data in the list, not only the
|
||||
visual part. If you need to do any other processing (e.g. switch item
|
||||
texts only), use custom reordering mode.</p>
|
||||
|
||||
<p>It is possible to reorder columns from code by calling
|
||||
<span class="code">ReorderColumns</span> method. The method have two or three
|
||||
parameters. The first two parameters specify index of the column to
|
||||
reorder and index on which it should be placed. The third optional
|
||||
parameter specifies whether the column data (sub-items) should be
|
||||
reordered as well. Columns can also be reordered from code by settings
|
||||
<span class="code">BetterListViewColumnHeader.DisplayIndex</span> property.</p>
|
||||
|
||||
|
||||
<h2>Iterating through Visible Columns Only</h2>
|
||||
|
||||
|
||||
<p>Some columns may be scrolled out of view or hidden (see <strong><em><a href="chapter-columns.html#hide-custom">Hiding Custom Columns</a></em></strong>). If you need to
|
||||
iterate through the visible columns only, use the
|
||||
<span class="code">VisibleColumns</span> property. The property getter returns
|
||||
collection which is re-created whenever the visibility of columns
|
||||
changes.</p>
|
||||
|
||||
<p>You can also use
|
||||
<span class="code">BetterListViewColumnHeader.PreviousVisibleColumnHeader</span> and
|
||||
<span class="code">BetterListViewColumnHeader.NextVisibleColumnHeader</span> properties
|
||||
to jump from one visible column to another.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-collections.html"><strong>
|
||||
« Collections</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-context-menus.html"><strong>Context Menus »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Context Menus</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-columns.html"><strong>
|
||||
« Columns</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-data.html"><strong>Data Binding »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Context Menus</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="images"><img src="context-menus.png"></p>
|
||||
|
||||
<p>Better ListView allows settings four distinct context menu via
|
||||
properties:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">ContextMenuStrip</span><ul style="list-style:none"><li>
|
||||
<p>Global context menu, used when uses clicks on client area (or on
|
||||
column header/item when the specific menu is not set).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ContextMenuStripColumns</span><ul style="list-style:none"><li>
|
||||
<p>Context menu for column headers.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ContextMenuStripGroups</span><ul style="list-style:none"><li>
|
||||
<p>Context menu for groups.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ContextMenuStripItems</span><ul style="list-style:none"><li>
|
||||
<p>Context menu for items.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>These are of type
|
||||
<span class="code">System.Windows.Forms.ContextMenuStrip</span>.</p>
|
||||
|
||||
<p>Custom context menus can be displayed manually using
|
||||
<span class="code">MouseDown</span> event and <strong><em><a href="chapter-hit-test.html">HitTest</a></em></strong> method to detect location
|
||||
of the cursor.</p>
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// add column, group and item
|
||||
this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Columns.Add(new BetterListViewColumnHeader("some column", 256));
|
||||
this.listView.Groups.Add("some group");
|
||||
this.listView.Items.Add(new BetterListViewItem("some item", this.listView.Groups[0]));
|
||||
|
||||
this.listView.ShowGroups = true;
|
||||
|
||||
this.listView.EndUpdate();
|
||||
|
||||
// set common context menu
|
||||
ContextMenuStrip contextMenuStripCommon = new ContextMenuStrip();
|
||||
|
||||
contextMenuStripCommon.Items.Add("Common Context Menu Item 1");
|
||||
contextMenuStripCommon.Items.Add("Common Context Menu Item 2");
|
||||
|
||||
this.listView.ContextMenuStrip = contextMenuStripCommon;
|
||||
|
||||
// set column header context menu
|
||||
ContextMenuStrip contextMenuStripColumnHeaders = new ContextMenuStrip();
|
||||
|
||||
contextMenuStripColumnHeaders.Items.Add("Column Header Context Menu Item 1");
|
||||
contextMenuStripColumnHeaders.Items.Add("Column Header Context Menu Item 2");
|
||||
|
||||
this.listView.ContextMenuStripColumns = contextMenuStripColumnHeaders;
|
||||
|
||||
// set item context menu
|
||||
ContextMenuStrip contextMenuStripItems = new ContextMenuStrip();
|
||||
|
||||
contextMenuStripItems.Items.Add("Item Context Menu Item 1");
|
||||
contextMenuStripItems.Items.Add("Item Context Menu Item 2");
|
||||
|
||||
this.listView.ContextMenuStripItems = contextMenuStripItems;
|
||||
|
||||
// set group context menu
|
||||
ContextMenuStrip contextMenuStripGroups = new ContextMenuStrip();
|
||||
|
||||
contextMenuStripGroups.Items.Add("Group Context Menu Item 1");
|
||||
contextMenuStripGroups.Items.Add("Group Context Menu Item 2");
|
||||
|
||||
this.listView.ContextMenuStripGroups = contextMenuStripGroups;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' add column, group and item
|
||||
ListView.BeginUpdate()
|
||||
|
||||
ListView.Columns.Add (New BetterListViewColumnHeader ("some column", 256))
|
||||
ListView.Groups.Add ("some group")
|
||||
ListView.Items.Add (New BetterListViewItem ("some item", ListView.Groups (0)))
|
||||
|
||||
ListView.ShowGroups = True
|
||||
|
||||
ListView.EndUpdate()
|
||||
|
||||
' set common context menu
|
||||
Dim contextMenuStripCommon As New ContextMenuStrip()
|
||||
|
||||
contextMenuStripCommon.Items.Add ("Common Context Menu Item 1")
|
||||
contextMenuStripCommon.Items.Add ("Common Context Menu Item 2")
|
||||
|
||||
ListView.ContextMenuStrip = contextMenuStripCommon
|
||||
|
||||
' set column header context menu
|
||||
Dim contextMenuStripColumnHeaders As New ContextMenuStrip()
|
||||
|
||||
contextMenuStripColumnHeaders.Items.Add ("Column Header Context Menu Item 1")
|
||||
contextMenuStripColumnHeaders.Items.Add ("Column Header Context Menu Item 2")
|
||||
|
||||
ListView.ContextMenuStripColumns = contextMenuStripColumnHeaders
|
||||
|
||||
' set item context menu
|
||||
Dim contextMenuStripItems As New ContextMenuStrip()
|
||||
|
||||
contextMenuStripItems.Items.Add ("Item Context Menu Item 1")
|
||||
contextMenuStripItems.Items.Add ("Item Context Menu Item 2")
|
||||
|
||||
ListView.ContextMenuStripItems = contextMenuStripItems
|
||||
|
||||
' set group context menu
|
||||
Dim contextMenuStripGroups As New ContextMenuStrip()
|
||||
|
||||
contextMenuStripGroups.Items.Add ("Group Context Menu Item 1")
|
||||
contextMenuStripGroups.Items.Add ("Group Context Menu Item 2")
|
||||
|
||||
ListView.ContextMenuStripGroups = contextMenuStripGroups</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-columns.html"><strong>
|
||||
« Columns</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-data.html"><strong>Data Binding »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,436 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Data Binding</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-context-menus.html"><strong>
|
||||
« Context Menus</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-drag-drop.html"><strong>Drag and Drop »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Data Binding</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView supports both <strong><em>lookup</em></strong> binding and
|
||||
<strong><em>complex</em></strong> binding of user-provided data.</p>
|
||||
|
||||
<p>Complex binding allows you use any list-type collection (implementing
|
||||
<span class="code">IList</span> or <span class="code">IListSource</span>) to the control. Complex
|
||||
binding is not a feature of all WinForms controls.</p>
|
||||
|
||||
<p>Regular .NET ListView does not support binding of lists.</p>
|
||||
|
||||
<p>Lookup binding is supported on any WinForms control automatically, so
|
||||
we won't cover the topic here.</p>
|
||||
|
||||
<h2>Basic Data Binding</h2>
|
||||
|
||||
|
||||
<p>To bind a custom <span class="code">IList</span> instance, set the
|
||||
<span class="code">DataSource</span> property:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.DataSource = myList; // myList is of type List<Person></code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.DataSource = myList ' myList is of type List(Of Person)()</code></pre>
|
||||
|
||||
<p>This fills Better ListView with objects in
|
||||
<span class="code">myList</span>:</p>
|
||||
|
||||
<p class="images"><img src="data-simple.png"></p>
|
||||
|
||||
<p>When converting <span class="code">Person</span> objects to items, Better
|
||||
ListView first looks if there is a <span class="code">TypeConverter</span> defined to
|
||||
use <span class="code">ConvertToString</span> method. If not, standard
|
||||
<span class="code">ToString</span> method is called to obtain item text.</p>
|
||||
|
||||
|
||||
<h2>Displaying Custom Properties</h2>
|
||||
|
||||
|
||||
<p>To display value of some specific property of the bound object, use
|
||||
the <span class="code">DisplayMember</span> property. For example, if we set the
|
||||
<span class="code">DisplayMember</span> to "Age", Better ListView will represent each
|
||||
<span class="code">Person</span> object by its <span class="code">Age</span> property:</p>
|
||||
|
||||
<p class="images"><img src="data-displaymember.png"></p>
|
||||
|
||||
<p>The <span class="code">DisplayMember</span> property can be set on columns as
|
||||
well, so that each column can display another property of the bound
|
||||
object.</p>
|
||||
|
||||
|
||||
<h2>Working with Values instead of Items</h2>
|
||||
|
||||
|
||||
<p>Each column in Better ListView can represent different property of
|
||||
the bound object. The property can be specified using
|
||||
<span class="code">ValueMember</span> property (also on each column using
|
||||
<span class="code">BetterListViewColumnHeader.ValueMember</span>). When specified, the
|
||||
property value can be accessed using the
|
||||
<span class="code">BetterListViewItem.Value</span>
|
||||
(<span class="code">BetterListViewSubItem.Value</span>).</p>
|
||||
|
||||
<p>For example, if we set <span class="code">ValueMember</span> to "Age", each item
|
||||
will have the <span class="code">Value</span> property set to corresponding short with
|
||||
the person's age.</p>
|
||||
|
||||
<p>You can also use following properties to work with selection in
|
||||
terms of the bound objects (values):</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">SelectedValue</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">SelectedValues</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Binding Columns</h2>
|
||||
|
||||
|
||||
<p>It is possible to display object properties in columns simply by
|
||||
setting <span class="code">DataBindColumns</span> to <span class="code">true</span>. This will cause
|
||||
Better ListView to generate column for each public property of provided
|
||||
list item type automatically:</p>
|
||||
|
||||
<p class="images"><img src="data-bindcolumns.png"></p>
|
||||
|
||||
<p>Here the <span class="code">List<Person></span> object is bound. The
|
||||
<span class="code">Person</span> type contains three public properties:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">Name</span> (<span class="code">String</span>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Age (<span class="code">short</span>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">Gender</span> (enum of type
|
||||
<span class="code">PersonGender</span>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Column header texts are generated from property names.
|
||||
<span class="code">DisplayNameAttribute</span> can be used on the property to specify
|
||||
custom name (as used in the <strong><em>Age</em></strong> column).</p>
|
||||
|
||||
|
||||
<h2>Binding Position</h2>
|
||||
|
||||
|
||||
<p>Data binding mechanism in WinForms keeps information about current
|
||||
position in the bound list. Better ListView synchronizes current position
|
||||
with its selection.</p>
|
||||
|
||||
<p>To turn off this behvior, set <span class="code">DataBindPosition</span> property
|
||||
to <span class="code">false</span>. In this case, Better ListView selection will be
|
||||
independent on current position in the bound list.</p>
|
||||
|
||||
|
||||
<h2>Sorting Items</h2>
|
||||
|
||||
|
||||
<p>Item sorting can be a nontrivial update of the bound list (which is
|
||||
unsupported by the standard data binding mechanism).</p>
|
||||
|
||||
<p><span class="code">SortVirtual</span> property should be set to <span class="code">true</span>
|
||||
to turn off physical update of the <span class="code">Items</span> collection. The
|
||||
columns will still display sort glyphs and the <span class="code">SortList</span> will
|
||||
contain new sort state information, so the manual sorting is
|
||||
possible.</p>
|
||||
|
||||
<p>For example, if we have <span class="code">Person[]</span> array bound, we can
|
||||
sort it manually in the <span class="code">AfterItemSort</span> event handler this
|
||||
way:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// get values from the data source
|
||||
Person[] values = (Person[])this.listView.DataSource;
|
||||
|
||||
// get listview items as keys
|
||||
BetterListViewItem[] keys = new BetterListViewItem[values.Length];
|
||||
|
||||
this.listView.Items.CopyTo(keys, 0);
|
||||
|
||||
// create custom comparer
|
||||
BetterListViewItemComparer comparer = this.listView.ItemComparer;
|
||||
|
||||
comparer.SetSortList(this.listView.SortList, this.listView.Columns, true);
|
||||
|
||||
// sort the data
|
||||
Array.Sort(keys, values, comparer);
|
||||
|
||||
// refresh view
|
||||
((CurrencyManager)this.listView.BindingContext[this.listView.DataSource]).Refresh();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' get values from the data source
|
||||
Dim values As Person() = DirectCast(Me.ListView.DataSource, Person())
|
||||
|
||||
' get listview items as keys
|
||||
Dim keys As BetterListViewItem() = New BetterListViewItem(values.Length - 1) {}
|
||||
|
||||
Me.ListView.Items.CopyTo(keys, 0)
|
||||
|
||||
' create custom comparer
|
||||
Dim comparer As BetterListViewItemComparer = Me.ListView.ItemComparer
|
||||
|
||||
comparer.SetSortList(Me.ListView.SortList, Me.ListView.Columns, True)
|
||||
|
||||
' sort the data
|
||||
Array.Sort(keys, values, comparer)
|
||||
|
||||
' refresh view
|
||||
DirectCast(Me.ListView.BindingContext(Me.ListView.DataSource), CurrencyManager).Refresh()</code></pre>
|
||||
|
||||
<p>Sorting can also be achieved by using <span class="code">DataTable</span>,
|
||||
<span class="code">DataView</span> or other type that supports sorting while bound to a
|
||||
control (such types implement <span class="code">IBindingList</span>) as a data
|
||||
source:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// get data source
|
||||
DataTable dataTable = (DataTable)this.listView.DataSource;
|
||||
|
||||
// set sort
|
||||
dataTable.DefaultView.Sort = "Name ASC, Age DESC";
|
||||
|
||||
// refresh view
|
||||
(((CurrencyManager)this.listView.BindingContext[this.listView.DataSource]).Refresh();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' get data source
|
||||
Dim dataTable As DataTable = DirectCast(Me.ListView.DataSource, DataTable)
|
||||
|
||||
' set sort
|
||||
dataTable.DefaultView.Sort = "Name ASC, Age DESC"
|
||||
|
||||
' refresh view
|
||||
DirectCast(Me.ListView.BindingContext(Me.ListView.DataSource), CurrencyManager).Refresh()</code></pre>
|
||||
|
||||
|
||||
<h2>Sorting by Value</h2>
|
||||
|
||||
|
||||
<p>Items can be sorted by other than displayed value when
|
||||
<span class="code">ValueMember</span> property is set.</p>
|
||||
|
||||
<p>For example, we have a <span class="code">DataTable</span> with columns
|
||||
"<strong><em>PercentDone</em></strong>" - which contains numeric values - and
|
||||
"<strong><em>PercentDoneDisplay</em></strong>" which contains corresponding
|
||||
values for display (e.g. rounded, with percent sign). Setting
|
||||
<span class="code">DisplayMember</span> property on the column for percentage to
|
||||
"<strong><em>PercentDoneDisplay</em></strong>" and <span class="code">ValueMember</span>
|
||||
property to "<strong><em>PercentDone</em></strong>" causes sorting according to
|
||||
value in numeric column.</p>
|
||||
|
||||
<p>Values are used for sorting only when the <span class="code">Key</span> property
|
||||
of a sub-item is not available. The <span class="code">Key</span> property has the
|
||||
highest priority when sorting, then the <span class="code">Value</span> property, and
|
||||
then the <span class="code">Text</span> property.</p>
|
||||
|
||||
<p>Following image shows multi-column sorting of a bound
|
||||
<span class="code">DataTable</span> - the table is sorted according to column with
|
||||
aspect ratio enumeration (invisible, showing another column with display
|
||||
values) and a numeric column (percentage):</p>
|
||||
|
||||
<p class="images"><img src="data-sort.png"></p>
|
||||
|
||||
|
||||
<h2>Reordering Items and Columns</h2>
|
||||
|
||||
|
||||
<p>When some data is bound to Better ListView and columns are
|
||||
reordered, the control automatically performs refresh of the data (this is
|
||||
the case of <span class="code">ColumnReorderMode</span> set to
|
||||
<span class="code">Enabled</span>).</p>
|
||||
|
||||
<p>Automatic item reordering is restricted to happen on the same item
|
||||
level or between different levels, but only when none of the levels are
|
||||
the top level.</p>
|
||||
|
||||
<p>Item reordering with data binding should be implemented in the
|
||||
similar manner as item sorting. First, set the
|
||||
<span class="code">ItemReorderMode</span> property to <span class="code">Custom</span>. Then
|
||||
implement the custom reordering logic on data source in the
|
||||
<span class="code">AfterItemReorder</span> event handler.</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>The following sample will binds a list of <span class="code">Person</span>
|
||||
objects to Better ListView:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// create a list of Person objects
|
||||
List&lt;Person&gt; persons = new List&lt;Person&gt;(new[]
|
||||
{
|
||||
new Person("Lee Adama", 45),
|
||||
new Person("Sally Gordon", 26),
|
||||
new Person("John Grant", 18),
|
||||
new Person("Susan Hutchinson", 37)
|
||||
});
|
||||
|
||||
// create columns automatically
|
||||
this.listView.DataBindColumns = true;
|
||||
|
||||
// populate ListView with our data
|
||||
this.listView.DataSource = persons;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' create a list of Person objects
|
||||
Dim persons As New List(Of Person)(
|
||||
New Person() { _
|
||||
New Person("Lee Adama", 45),
|
||||
New Person("Sally Gordon", 26),
|
||||
New Person("John Grant", 18),
|
||||
New Person("Susan Hutchinson", 37)
|
||||
})
|
||||
|
||||
' create columns automatically
|
||||
ListView.DataBindColumns = True
|
||||
|
||||
' populate ListView with our data
|
||||
ListView.DataSource = persons</code></pre>
|
||||
|
||||
<p>The <span class="code">Person</span> class itself is particularly simple - it
|
||||
does not need to provide anything else than public properties which are
|
||||
bound:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// Represents a simple data object (a person).
|
||||
/// </summary>
|
||||
internal sealed class Person
|
||||
{
|
||||
/// <summary>
|
||||
/// Gets or sets the name of the person.
|
||||
/// </summary>
|
||||
/// <value>
|
||||
/// The name of the person.
|
||||
/// </value>
|
||||
public string Name
|
||||
{
|
||||
get;
|
||||
set;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets the age of the person.
|
||||
/// </summary>
|
||||
/// <value>
|
||||
/// The age of the person.
|
||||
/// </value>
|
||||
public int Age
|
||||
{
|
||||
get;
|
||||
set;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Initializes a new instance of the <see cref = "Person" /> class.
|
||||
/// </summary>
|
||||
/// <param name = "name">The name of the person.</param>
|
||||
/// <param name = "age">The age of the person.</param>
|
||||
public Person(string name, int age)
|
||||
{
|
||||
Name = name;
|
||||
Age = age;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' Represents a simple data object (a person).
|
||||
''' </summary>
|
||||
Friend NotInheritable Class Person
|
||||
|
||||
''' <summary>
|
||||
''' Gets or sets the name of the person.
|
||||
''' </summary>
|
||||
''' <value>
|
||||
''' The name of the person.
|
||||
''' </value>
|
||||
Public Property Name() As String
|
||||
Get
|
||||
Return _mName
|
||||
End Get
|
||||
Set(ByVal value As String)
|
||||
_mName = value
|
||||
End Set
|
||||
End Property
|
||||
|
||||
''' <summary>
|
||||
''' Gets or sets the age of the person.
|
||||
''' </summary>
|
||||
''' <value>
|
||||
''' The age of the person.
|
||||
''' </value>
|
||||
Public Property Age() As Integer
|
||||
Get
|
||||
Return _mAge
|
||||
End Get
|
||||
Set(ByVal value As Integer)
|
||||
_mAge = value
|
||||
End Set
|
||||
End Property
|
||||
|
||||
Private _mName As String
|
||||
Private _mAge As Integer
|
||||
|
||||
''' <summary>
|
||||
''' Initializes a new instance of the <see cref = "Person" /> class.
|
||||
''' </summary>
|
||||
''' <param name = "Name">The name of the person.</param>
|
||||
''' <param name = "Age">The age of the person.</param>
|
||||
Public Sub New(ByVal Name As String, ByVal Age As Integer)
|
||||
Me.Name = Name
|
||||
Me.Age = Age
|
||||
End Sub
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-context-menus.html"><strong>
|
||||
« Context Menus</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-drag-drop.html"><strong>Drag and Drop »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,479 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Drag and Drop</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-data.html"><strong>
|
||||
« Data Binding</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-empty-text.html"><strong>Empty Text »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Drag and Drop</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>The basic Drag and Drop functionality allows user to move data between
|
||||
two controls: drag source and drop target. Regular .NET ListView does
|
||||
support this basic Drag and Drop functionality, but not any additional (and
|
||||
often pleasant) features based on Drag and Drop.</p>
|
||||
|
||||
<p>Better ListView adds these features:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Item reordering</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Drop highlighting</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Insertion marks</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Setting up Better ListView as a Drag Source</h2>
|
||||
|
||||
|
||||
<p>Three properties are essential for setting up Better ListView as a
|
||||
drag source:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">AllowedDragEffects</span><ul style="list-style:none"><li>
|
||||
<p>Used when Drag and Drop operation is initiated. This tells the
|
||||
Drag and Drop mechanism, what effects on mouse cursor can be shown
|
||||
while dragging some data.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AllowDrag</span><ul style="list-style:none"><li>
|
||||
<p>Simply switches the ability of Better ListView to behave as
|
||||
drag source.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ItemReorderMode</span><ul style="list-style:none"><li>
|
||||
<p>Sets the behavior of item reordering.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Item Reordering</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Item reordering is enabled by setting <span class="code">ItemReorderMode</span>
|
||||
property to either <span class="code">Enabled</span> or <span class="code">Custom</span>. The
|
||||
difference between these values is that on <span class="code">Enabled</span> Better
|
||||
ListView does all the item reordering automatically (items will be
|
||||
actually reordered in the list), but <span class="code">Custom</span> shows only the
|
||||
effect, fires item reorder events and the actual reordering is expected to
|
||||
be done externally. This is practical - for example - when one displays
|
||||
confirmation dialog to proceed reordering or just needs to deny the
|
||||
reordering in some cases.</p>
|
||||
|
||||
<p>This image shows item reordering in action:</p>
|
||||
|
||||
<p class="images"><img src="drag-drop-reordering.png"></p>
|
||||
|
||||
|
||||
<h2>Drag Effects</h2>
|
||||
|
||||
|
||||
<p>There are two effect available while dragging over Better
|
||||
ListView.</p>
|
||||
|
||||
<p><span class="code">DropHighlight</span> looks like a hot state of an item. It
|
||||
shows when user is dragging data over an item. It is useful when data are
|
||||
to be dropped on a certain item:</p>
|
||||
|
||||
<p class="images"><img src="drag-drop-dropeffect1.png"></p>
|
||||
|
||||
<p><span class="code">InsertionMark</span> is a line showing target position between
|
||||
neighboring items. It is useful for inserting data in the list or item
|
||||
reordering:</p>
|
||||
|
||||
<p class="images"><img src="drag-drop-dropeffect2.png"></p>
|
||||
|
||||
<p>When the <strong><em>InsertionMark</em></strong> effect is turned on, the
|
||||
insertion mark is updated when mouse drags over the control. You may need
|
||||
to set custom location of insertion mark in certain situations. In that
|
||||
case, set the
|
||||
<span class="code">BetterListViewDragDropEffectSettingEventArgs.UpdateInsertionMark</span>
|
||||
property to false in the <span class="code">DragDropEffectSetting</span> event
|
||||
handler.</p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="internal-external-drop-display" id="internal-external-drop-display"></a>Internal and
|
||||
External Drop Display</h2>
|
||||
|
||||
|
||||
<p>There are two properties governing the effect during Drag and Drop
|
||||
operation: <span class="code">ItemDropDisplayInternal</span> and
|
||||
<span class="code">ItemDropDisplayExternal</span>.</p>
|
||||
|
||||
<p>Internal drop display is used when source and target of the
|
||||
drag-drop operation is the same. This effect is <span class="code">InsertionMark</span>
|
||||
by default and refers to item reordering.</p>
|
||||
|
||||
<p>External drop display is used when data are dragged from another
|
||||
control. This effect is <span class="code">DropHighlight</span> by default.
|
||||
<span class="code">DropHighlight</span> can be disabled on selected items by setting
|
||||
<span class="code">AllowDropHighlight</span> property to <span class="code">false</span>.</p>
|
||||
|
||||
|
||||
<h2>Customized Drop Display on Specific Items</h2>
|
||||
|
||||
|
||||
<p>If you need to show different effects on specific items, you can use
|
||||
properties <span class="code">BetterListViewItem.CustomDropDisplayInternal</span> and
|
||||
<span class="code">BetterListViewItem.CustomDropDisplayExternal</span>. Their values
|
||||
are initially set to <span class="code">BetterListViewDragDropDisplay.Default</span>,
|
||||
which means that the values are derived from
|
||||
<span class="code">ItemDropDisplayInternal</span> and
|
||||
<span class="code">ItemDropDisplayExternal</span> properties instead (see <strong><em><a href="chapter-drag-drop.html#internal-external-drop-display">Internal and External Drop
|
||||
Display</a></em></strong>).</p>
|
||||
|
||||
|
||||
<h2>Default Format of Dragged Data</h2>
|
||||
|
||||
|
||||
<p>Items can be dragged between different Better ListViews, other
|
||||
controls and even across application domains (between applications).
|
||||
Better ListView uses its own structure of type
|
||||
<span class="code">BetterListViewItemDragData</span>.</p>
|
||||
|
||||
<p><span class="code">BetterListViewItemDragData</span> contains both dragged item
|
||||
indices and cloned items. Items are cloned because when the dragged data
|
||||
crosses application domain, it is serialized and must not contain any
|
||||
reference to source Better ListView since such objects cannot be
|
||||
transferred through this channel. For the purpose of indentifying drag
|
||||
source control, <span class="code">BetterListViewItemDragData</span> contains
|
||||
globally-unique ID of the Better ListView
|
||||
(<span class="code">BetterListView.DragSourceID</span> property).</p>
|
||||
|
||||
|
||||
<h2>Getting Insertion Location</h2>
|
||||
|
||||
|
||||
<p>When doing item reordering, insertion location is available in
|
||||
<span class="code">CheckItemReorder</span> even data
|
||||
(<span class="code">BetterListViewCheckItemReorderEventArgs.InsertionLocation</span>)
|
||||
so that you can decide whether to disable insertion mark or do other
|
||||
action depending on current insertion location.</p>
|
||||
|
||||
<p>During Drag and Drop, however, there is no such data readily
|
||||
available. The same functionality can be still achieved using
|
||||
<span class="code">GetDropInfo</span> method. This method return insertion location
|
||||
depending on current drag effect setting (drop highlight, insertion mark).
|
||||
The parameters are screen coordinates of mouse cursor position (these are
|
||||
readily available in the <span class="code">DragDropEffectSetting</span> event handler,
|
||||
which you can use during Drag and Drop operation).</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">//
|
||||
// setup the first Better ListView
|
||||
//
|
||||
this.listView1.BeginUpdate();
|
||||
|
||||
this.listView1.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"A Fork",
|
||||
"A Spoon",
|
||||
"A Knife"
|
||||
});
|
||||
|
||||
this.listView1.AutoSizeItemsInDetailsView = true;
|
||||
|
||||
this.listView1.EndUpdate();
|
||||
|
||||
// allow dragging items from this list
|
||||
this.listView1.AllowDrag = true;
|
||||
// allow dropping items on this list
|
||||
this.listView1.AllowDrop = true;
|
||||
// show insertion mark when dragging over this list
|
||||
this.listView1.ItemDropDisplayExternal = BetterListViewDragDropDisplay.InsertionMark;
|
||||
|
||||
// this event has to be handled to properly set some effect (e.g. 'Move') when dragging
|
||||
this.listView1.DragDropEffectSetting += ListViewDragDropEffectSetting;
|
||||
// this event tells us that user dropped data on some item of the Better ListView (DragDrop event is more general than this)
|
||||
this.listView1.ItemDrop += ListViewItemDrop;
|
||||
// handle the case when user drops item(s) on empty list - in that case ItemDrop is not raised and we should use DragDrop
|
||||
this.listView1.DragDrop += ListViewDragDrop;
|
||||
|
||||
//
|
||||
// setup the second Better ListView
|
||||
//
|
||||
this.listView2.BeginUpdate();
|
||||
|
||||
this.listView2.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"A Chair",
|
||||
"A Table",
|
||||
"A Wardrobe"
|
||||
});
|
||||
|
||||
this.listView2.AllowDrag = true;
|
||||
this.listView2.AllowDrop = true;
|
||||
this.listView2.ItemDropDisplayExternal = BetterListViewDragDropDisplay.InsertionMark;
|
||||
|
||||
this.listView2.AutoSizeItemsInDetailsView = true;
|
||||
|
||||
this.listView2.EndUpdate();
|
||||
|
||||
this.listView2.DragDropEffectSetting += ListViewDragDropEffectSetting;
|
||||
this.listView2.ItemDrop += ListViewItemDrop;
|
||||
this.listView2.DragDrop += ListViewDragDrop;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">'
|
||||
' setup the first Better ListView
|
||||
'
|
||||
ListView1.BeginUpdate()
|
||||
|
||||
ListView1.Items.AddRange(
|
||||
New String() {
|
||||
"A Fork",
|
||||
"A Spoon",
|
||||
"A Knife"
|
||||
})
|
||||
|
||||
ListView1.AutoSizeItemsInDetailsView = True
|
||||
|
||||
ListView1.EndUpdate()
|
||||
|
||||
' allow dragging items from this list
|
||||
ListView1.AllowDrag = True
|
||||
' allow dropping items on this list
|
||||
ListView1.AllowDrop = True
|
||||
' show insertion mark when dragging over this list
|
||||
ListView1.ItemDropDisplayExternal = BetterListViewDragDropDisplay.InsertionMark
|
||||
|
||||
' this event has to be handled to properly set some effect (e.g. 'Move') when dragging
|
||||
AddHandler ListView1.DragDropEffectSetting, AddressOf ListViewDragDropEffectSetting
|
||||
' this event tells us that user dropped data on some item of the Better ListView (DragDrop event is more general than this)
|
||||
AddHandler ListView1.ItemDrop, AddressOf ListViewItemDrop
|
||||
' handle the case when user drops item(s) on empty list - in that case ItemDrop is not raised and we should use DragDrop
|
||||
AddHandler ListView1.DragDrop, AddressOf ListViewDragDrop
|
||||
|
||||
'
|
||||
' setup the second Better ListView
|
||||
'
|
||||
ListView2.BeginUpdate()
|
||||
|
||||
ListView2.Items.AddRange(
|
||||
New String() {
|
||||
"A Chair",
|
||||
"A Table",
|
||||
"A Wardrobe"
|
||||
})
|
||||
|
||||
ListView2.AllowDrag = True
|
||||
ListView2.AllowDrop = True
|
||||
ListView2.ItemDropDisplayExternal = BetterListViewDragDropDisplay.InsertionMark
|
||||
|
||||
ListView2.AutoSizeItemsInDetailsView = True
|
||||
|
||||
ListView2.EndUpdate()
|
||||
|
||||
AddHandler ListView2.DragDropEffectSetting, AddressOf ListViewDragDropEffectSetting
|
||||
AddHandler ListView2.ItemDrop, AddressOf ListViewItemDrop
|
||||
AddHandler ListView2.DragDrop, AddressOf ListViewDragDrop</code></pre>
|
||||
|
||||
<p>Source code for the <span class="code">ListViewDragDropEffectSetting</span>
|
||||
event:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">void ListViewDragDropEffectSetting(object sender, BetterListViewDragDropEffectSettingEventArgs eventArgs)
|
||||
{
|
||||
BetterListViewItemDragData itemDragData = (BetterListViewItemDragData)eventArgs.Data.GetData(typeof(BetterListViewItemDragData));
|
||||
|
||||
Control child = GetChildAtPoint(PointToClient(new Point(eventArgs.X, eventArgs.Y)));
|
||||
|
||||
if (child is BetterListView &&
|
||||
((BetterListView)child).DragSourceID == itemDragData.DragSourceID) // check whether the data comes from this cotnrol
|
||||
{
|
||||
// do not allow dropping on the source control
|
||||
eventArgs.Effect = DragDropEffects.None;
|
||||
}
|
||||
else
|
||||
{
|
||||
eventArgs.Effect = DragDropEffects.Move;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Sub ListViewDragDropEffectSetting(ByVal sender As Object, ByVal eventArgs As BetterListViewDragDropEffectSettingEventArgs)
|
||||
|
||||
Dim itemDragData As BetterListViewItemDragData = DirectCast(eventArgs.Data.GetData(GetType(BetterListViewItemDragData)), BetterListViewItemDragData)
|
||||
|
||||
Dim child As Control = GetChildAtPoint(PointToClient(New Point(eventArgs.X, eventArgs.Y)))
|
||||
|
||||
If TypeOf child Is BetterListView.BetterListView AndAlso DirectCast(child, BetterListView.BetterListView).DragSourceID = itemDragData.DragSourceID Then
|
||||
|
||||
' check whether the data comes from this cotnrol
|
||||
' do not allow dropping on the source control
|
||||
eventArgs.Effect = DragDropEffects.None
|
||||
|
||||
Else
|
||||
eventArgs.Effect = DragDropEffects.Move
|
||||
End If
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<p>Source code for the <span class="code">ListViewItemDrop</span> event:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">void ListViewItemDrop(object sender, BetterListViewItemDropEventArgs eventArgs)
|
||||
{
|
||||
BetterListViewItemDragData itemDragData = (BetterListViewItemDragData)eventArgs.Data.GetData(typeof(BetterListViewItemDragData));
|
||||
|
||||
BetterListView listViewSource = GetSourceList(itemDragData);
|
||||
BetterListView listViewTarget = GetTargetList(itemDragData);
|
||||
|
||||
// remove items from the source list
|
||||
listViewSource.Items.RemoveRange(itemDragData.Items);
|
||||
|
||||
// insert items to the target list (either before or after the target item, depending on the insertion location)
|
||||
listViewTarget.Items.InsertRange(
|
||||
(eventArgs.ItemDropPart == BetterListViewDropPart.After)
|
||||
? (eventArgs.Item.Index + 1)
|
||||
: eventArgs.Item.Index,
|
||||
itemDragData.Items);
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Sub ListViewItemDrop(ByVal sender As Object, ByVal eventArgs As BetterListViewItemDropEventArgs)
|
||||
|
||||
Dim itemDragData As BetterListViewItemDragData = DirectCast(eventArgs.Data.GetData(GetType(BetterListViewItemDragData)), BetterListViewItemDragData)
|
||||
|
||||
Dim listViewSource As BetterListView.BetterListView = GetSourceList(itemDragData)
|
||||
Dim listViewTarget As BetterListView.BetterListView = GetTargetList(itemDragData)
|
||||
|
||||
' remove items from the source list
|
||||
listViewSource.Items.RemoveRange(itemDragData.Items)
|
||||
|
||||
' insert items to the target list (either before or after the target item, depending on the insertion location)
|
||||
listViewTarget.Items.InsertRange(If((eventArgs.ItemDropPart = BetterListViewDropPart.After), (eventArgs.Item.Index + 1), eventArgs.Item.Index), itemDragData.Items)
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<p>Source code for the <span class="code">ListViewDragDrop</span> event:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">void ListViewDragDrop(object sender, DragEventArgs e)
|
||||
{
|
||||
BetterListViewItemDragData itemDragData = (BetterListViewItemDragData)e.Data.GetData(typeof(BetterListViewItemDragData));
|
||||
|
||||
BetterListView listViewSource = GetSourceList(itemDragData);
|
||||
BetterListView listViewTarget = GetTargetList(itemDragData);
|
||||
|
||||
if (listViewTarget.Items.Count == 0)
|
||||
{
|
||||
// remove items from the source list
|
||||
listViewSource.Items.RemoveRange(itemDragData.Items);
|
||||
|
||||
// add items to the target list
|
||||
listViewTarget.Items.AddRange(itemDragData.Items);
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Sub ListViewDragDrop(ByVal sender As Object, ByVal e As DragEventArgs)
|
||||
|
||||
Dim itemDragData As BetterListViewItemDragData = DirectCast(e.Data.GetData(GetType(BetterListViewItemDragData)), BetterListViewItemDragData)
|
||||
|
||||
Dim listViewSource As BetterListView.BetterListView = GetSourceList(itemDragData)
|
||||
Dim listViewTarget As BetterListView.BetterListView = GetTargetList(itemDragData)
|
||||
|
||||
If listViewTarget.Items.Count = 0 Then
|
||||
|
||||
' remove items from the source list
|
||||
listViewSource.Items.RemoveRange(itemDragData.Items)
|
||||
|
||||
' add items to the target list
|
||||
listViewTarget.Items.AddRange(itemDragData.Items)
|
||||
|
||||
End If
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<p>Source code for the <span class="code">GetSourceList</span> and
|
||||
<span class="code">GetTargetList</span> methods:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">BetterListView GetSourceList(BetterListViewItemDragData itemDragData)
|
||||
{
|
||||
return ((itemDragData.DragSourceID == this.listView1.DragSourceID) // check whether the data comes from the first ListView
|
||||
? this.listView1
|
||||
: this.listView2);
|
||||
}
|
||||
|
||||
BetterListView GetTargetList(BetterListViewItemDragData itemDragData)
|
||||
{
|
||||
return ((itemDragData.DragSourceID == this.listView1.DragSourceID) // check whether the data comes from the first ListView
|
||||
? this.listView2
|
||||
: this.listView1);
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Function GetSourceList(ByVal itemDragData As BetterListViewItemDragData) As BetterListView.BetterListView
|
||||
|
||||
' check whether the data comes from the first ListView
|
||||
Return (If((itemDragData.DragSourceID = ListView1.DragSourceID), ListView1, ListView2))
|
||||
|
||||
End Function
|
||||
|
||||
Function GetTargetList(ByVal itemDragData As BetterListViewItemDragData) As BetterListView.BetterListView
|
||||
|
||||
' check whether the data comes from the first ListView
|
||||
Return (If((itemDragData.DragSourceID = ListView1.DragSourceID), ListView2, ListView1))
|
||||
|
||||
End Function</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-data.html"><strong>
|
||||
« Data Binding</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-empty-text.html"><strong>Empty Text »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,580 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-TMSFLB4');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<script>
|
||||
function gainit()
|
||||
{
|
||||
ga('create', 'UA-16362539-4', 'auto');
|
||||
console.log('ga init');
|
||||
}
|
||||
window.onload=gainit;
|
||||
</script>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="keywords" content="better listview, list view, listview, list view control, list view component, .net list view, list view replacement, list view alternative, improved list view, enhanced list view" />
|
||||
<meta name="description" content="Better ListView is an alternative List View control - the ideal replacement for the regular .NET listview component. For WinForms C#/VB.net." />
|
||||
<meta name="author" content="ComponentOwl" />
|
||||
<meta http-equiv="Title" content="Better ListView for .NET (C#, VB) - Alternative list view component" />
|
||||
<meta name="copyright" content="(c) 2010-2018 ComponentOwl" />
|
||||
<meta name="distribution" content="Global" />
|
||||
<meta name="rating" content="General" />
|
||||
<meta name="robots" content="All" />
|
||||
<meta http-equiv="Content-Language" content="en" />
|
||||
<meta name="verify-v1" content="NK0H1gWia1vxGZ2Yhr59gsS0/P2/USBI1DVA18VkzjM=" />
|
||||
<meta name="google-site-verification" content="O7Dwtzu5x_Mob9u98uxqpZ-_wCLGpEkx2IL0UYVQ4ac" />
|
||||
<title>Better ListView for .NET (C#, VB) - Alternative list view component</title>
|
||||
<link rel="alternate" type="application/rss+xml" title="Component Owl Feed: Latest releases, news and tips & tricks from our blog" href="../../../feeds.rss" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Component Owl's Comics: Latest comic strips for developers by Libor Tinka" href="../../../comics.rss" />
|
||||
<link href="../../../stylesheets/base_packaged.css%3F1455269822.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TMSFLB4"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div class="d-page">
|
||||
|
||||
<div class="d-header d-placing">
|
||||
|
||||
<ul class="d-menu">
|
||||
<li class=""><a href="../../../index.html" class="menu-item">Home</a></li>
|
||||
<li class="active with-dropdown">
|
||||
<a href="../../../blog/page/6/index.html" class="menu-item">Products</a>
|
||||
<div class="dropdown dropdown-submenu" style="display: none; width: 370px"><div class="outer"><div class="shadowbox"><div class="border"><div class="inner">
|
||||
|
||||
<div class="dropdown-category">WinForms Components</div>
|
||||
|
||||
|
||||
<a href="../../../blog/page/6/index.html" class="featured-item"><img alt="icon" src="http://assets.componentowl.com/icons/better-listview-32-1355160256.png?1355135056" /> Better ListView<br /><span class="subline">Ultimate ListView control for .NET</span></a>
|
||||
|
||||
|
||||
<a href="../../../better-thumbnail-browser.html" class="featured-item"><img alt="icon" src="http://assets.componentowl.com/icons/better-thumbnail-browser-32-1355160281.png?1355135081" /> Better Thumbnail Browser<br /><span class="subline">Thumbnail loading and browsing control for .NET</span></a>
|
||||
|
||||
|
||||
<a href="../../../better-splitbutton.html"><img alt="icon" src="http://assets.componentowl.com/icons/better-splitbutton-32-1355160307.png?1355135107" /> Better SplitButton<br /><span class="subline">Free customizable dropdown button control</span></a>
|
||||
|
||||
|
||||
<a href="../../../better-listview-express.html"><img alt="icon" src="http://assets.componentowl.com/icons/better-listview-express-32-1355160327.png?1355135127" /> Better ListView Express<br /><span class="subline">Free edition with less features</span></a>
|
||||
|
||||
|
||||
</div></div></div></div></div>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="menu-item">Purchase</a>
|
||||
<div class="dropdown dropdown-submenu" style="display: none; width: 330px"><div class="outer"><div class="shadowbox"><div class="border"><div class="inner">
|
||||
|
||||
|
||||
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="featured-item">Better ListView</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../../../pricing-licensing/better-thumbnail-browser.html" class="featured-item">Better Thumbnail Browser</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../../../pricing-licensing/better-splitbutton.html">Better SplitButton</a>
|
||||
|
||||
|
||||
|
||||
|
||||
</div></div></div></div></div>
|
||||
</li>
|
||||
<li class=""><a href="../../../support.html" class="menu-item">Support</a></li>
|
||||
<li class=""><a href="../../../articles.html" class="menu-item">Articles</a></li>
|
||||
<li class=""><a href="../../../blog.html" class="menu-item">Blog</a></li>
|
||||
<li class=""><a href="../../../comics/43.html" class="menu-item">Comics</a></li>
|
||||
<li class=""><a href="../../../about-us.html" class="menu-item">About Us</a></li>
|
||||
</ul>
|
||||
<div class="d-logo">
|
||||
<a href="../../../index.html" class="logoimg"><img alt="Component Owl" src="../../../images/componentowl.gif%3F1455269978" /></a>
|
||||
<g:plusone size="medium" count="false" href="http://www.componentowl.com"></g:plusone>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="d-placing">
|
||||
<div class="d-content-wrap">
|
||||
<div class="subpage product-content">
|
||||
<h1>Better ListView: Alternative list view control for .NET</h1>
|
||||
|
||||
<p class="section-info">Ideal .NET WinForms (C#, VB.net) replacement list view component. More features, less limitations, fast and optimized.</p>
|
||||
|
||||
<div class="sides">
|
||||
|
||||
<div class="right">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<input id="tabs-initial-index" name="tabs-initial-index" type="hidden" value="-1" />
|
||||
|
||||
<ul id="nav" class="nav">
|
||||
|
||||
<li><a href="../../../blog/page/6/index.html" class="current">Overview</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/screenshots.html" class="">Screenshots</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/comparison-table.html" class="">Comparison</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/resources.html" class="">Resources</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/story.html" class="">Story</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="nav-panel" class="nav-panel product-detail"><div class="features-page">
|
||||
<ul class="common">
|
||||
<li>Better ListView is a <strong>list view control for .NET Windows Forms</strong></li>
|
||||
<li>Designed as a replacement for the regular .NET list view control.</li>
|
||||
<li>Compatible with: Visual Studio 2015, 2013, 2012, 2010, 2008, 2005, with full designer support.</li>
|
||||
<li>For C#, Visual Basic .NET (VB.NET), managed C++, and other CLI languages.</li>
|
||||
<li>Compatible with .NET 4.5, .NET 4, .NET 3.5, .NET 3, .NET 2, and newer. Supports .NET Client Profile.</li>
|
||||
<li>Runs on Windows 10, 8, 7, Vista, 2003, XP, 2000, and newer, both 32-bit and 64-bit.</li>
|
||||
<li>Better ListView has <strong>more features and flexibility</strong>, always uses the <strong>current system theme</strong> (including <strong>Aero</strong> support), and <strong>removes limitations</strong> of the regular .NET list view control.</li>
|
||||
<li><strong>Minimum learning needed</strong>. Better ListView can be used just like the regular list view.</li>
|
||||
<li>Written in <strong>pure managed C# code</strong>. It is fast, <strong>light-weight</strong> and optimized for 10k+ items.</li>
|
||||
<li>Easy royalty-free deployment. Single DLL file that has just 250kB when compressed.</li>
|
||||
<li>The assembly is <strong><a href="http://www.nist.gov/itl/fipsinfo.cfm" target="_blank">FIPS-compliant</a></strong>, CLS-compliant, <strong>digitally signed</strong> and strongly named.</li>
|
||||
<li>Tested in the real world by thousands of users</li>
|
||||
</ul>
|
||||
|
||||
<div class="image"><img alt="Better ListView control" src="http://assets.componentowl.com/images/7/Overview Collage_original_1367470843.png?1367445643" /></div>
|
||||
|
||||
<h2>Extra features summary</h2>
|
||||
|
||||
Better ListView is fast and flicker-free, supports hierarchical items, has improved grouping, better drag & drop and item reordering support, better column headers, inbuilt sorting, multi-column sorting, better images support, context menus for column headers and items, embedded controls for editing support, automatic and custom sizing of items and images, thumbnails view, richer event data, item text formatting, XML and binary serialization, data-binding, owner-drawing options, better tooltips, powerful hit-test, improved usability, easy saving/loading of contents into file or string, multi-line items, and more.
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
Component Owl created <b>the one and only tool I don’t want to be without when it comes to software developing in Visual Studio</b>. Also, I’ve been working as software user/developer for the last 26 years, and <b>I have never before experienced a support that really goes the needed extra mile to make things work</b>, like the guys at Component Owl do.
|
||||
</em></blockquote><strong>Göran Alfvén, Sweden</strong></div></div>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
The control is <b>very easy and intuitive to use and is well documented</b>.
|
||||
</em></blockquote><strong>DevProConnections.com Review</strong></div></div>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
Better List View is <b>awesome</b>.
|
||||
</em></blockquote><strong>Daniel N</strong></div></div>
|
||||
|
||||
<h3>Hierarchical items</h3>
|
||||
|
||||
You can create tree-like structures in Better ListView; inbuilt drag & drop hierarchical reordering of items.
|
||||
|
||||
<h3>Improved grouping</h3>
|
||||
|
||||
Better grouping – customizable group headers look and behavior, collapsible, image support, context menu support, focusable, etc. Each group header can be customized individually.
|
||||
|
||||
<h3>Save/load contents with 1 line of code</h3>
|
||||
|
||||
You can save or load the contents of Better ListView in just 1 line of code, either to file or string. Both XML and binary serialization is supported.
|
||||
|
||||
<h3>Double-buffered and flicker free</h3>
|
||||
|
||||
Simply put, Better ListView is smooth. Regular listview requires multiple anti-flicker techniques, but you do not have to worry about that with Better ListView. Better ListView is optimized for 100k+ items.
|
||||
|
||||
<h3>Column header images</h3>
|
||||
|
||||
You can use images in column headers. Custom image sizes are supported.
|
||||
|
||||
<div class="image"><img alt="Column Header Images" src="http://assets.componentowl.com/images/8/Column Header Images_original_1298620501.png?1298595301" /></div>
|
||||
|
||||
<h3>Sub-item images</h3>
|
||||
|
||||
You can set images to list view sub-items. Regular list view allows you to set only one image per list view item, but Better ListView can show image for every sub-item (in every column).
|
||||
|
||||
<h3>Image-List and Image Support</h3>
|
||||
|
||||
Better ListView supports both image list, or individual image objects (System.Drawing.Image). Regular list view forces you to use ImageList object.
|
||||
|
||||
<h3>Custom list view Image size</h3>
|
||||
|
||||
You can use any image size in the list view. Better ListView can also automatically resize images with preserving aspect ratio.
|
||||
|
||||
<h3>Drag & drop with insertion mark</h3>
|
||||
|
||||
Highly customizable drag-drop for both internal and external drag-drop. You can use drop highlight or insertion mark drag drop modes.
|
||||
|
||||
<div class="image"><img alt="List View Item Reordering Mark Preview" src="http://assets.componentowl.com/images/21/List View Item Reordering Mark Preview_original_1298631798.png?1298606598" /></div>
|
||||
|
||||
<h3>List view item reordering</h3>
|
||||
|
||||
Better ListView has inbuilt item reordering and item drag & drop inserting at the position specified by user. Drag & drop preview is shown using an insertion mark.
|
||||
|
||||
<h3>Column-header reordering</h3>
|
||||
|
||||
Better ListView has inbuilt easy drag & drop column header reordering that is much easier to use than in the regular list view. Insertion mark is shown, auto-scrolling is supported.
|
||||
|
||||
<div class="image"><img alt="Column Header Reordering With Insertion Mark" src="http://assets.componentowl.com/images/9/Column Header Reordering With Insertion Mark_original_1298621331.png?1298596131" /></div>
|
||||
|
||||
<h3>Auto-scroll for column header reordering and item reordering</h3>
|
||||
|
||||
Better ListView has inbuilt auto-scrolling for column header and item reordering.
|
||||
|
||||
<h3>Column headers can be shown in all views</h3>
|
||||
|
||||
Better ListView can display column headers in all views - Details, SmallIcons, LargeIcons, List, Tile, Thumbnails. This allows users to sort items in all views. Additionally, you can also hide the column headers even in the details view.
|
||||
|
||||
<div class="image"><img alt="Column Headers in LargeIcons View" src="http://assets.componentowl.com/images/10/Column Headers In LargeIcons View_original_1298622038.png?1298596838" /></div>
|
||||
|
||||
<h3>Thumbnails view mode</h3>
|
||||
|
||||
Better ListView supports additional "thumbnails" view mode that allows you to view images of large sizes. The images are automatically and smoothly resized with preserved aspect ratio. You can define the maximum/minimum desired image sizes.
|
||||
|
||||
<h3>Image shadows, borders and padding</h3>
|
||||
All images in Better ListView can have border or shadow specified. You can also specify padding that gives you space for owner drawing (eg. overlay images). This can be used in all views.
|
||||
|
||||
Image shadows like in Windows 7 theme are supported. Windows Explorer uses very similar shadows for image thumbnails.
|
||||
|
||||
<div class="image"><img alt="ListView Image Shadows and Image Borders" src="http://assets.componentowl.com/images/11/ListView Image Shadows and Image Borders_original_1298622678.png?1298597478" /></div>
|
||||
|
||||
<h3>Multi-column sorting</h3>
|
||||
|
||||
You can sort by multiple columns in Better ListView. Simply shift+click a secondary (or third, etc) column to add it to the current sort. Zero code needed. Additionally, the background of the primary (first) sort column can be highlighted.
|
||||
|
||||
<div class="image"><img alt="Multi Column Sort in List View" src="http://assets.componentowl.com/images/12/Multi Column Sort in List View_original_1298623013.png?1298597813" /></div>
|
||||
|
||||
<h3>Inbuilt sorting and natural sorting</h3>
|
||||
|
||||
Better ListView has inbuilt list view sorting that works out of the box. You no longer need to implement your own item comparer. If custom comparer is needed, you can inherit from the Better ListView comparer to save time.
|
||||
|
||||
<h3>Richer event data</h3>
|
||||
|
||||
Many events have richer event data that allow you to do extra operations or tell you extra useful information. The richer events include: AfterItemSort, BeforeDrag, BeforeItemSort, ColumnClick (allows you to cancel sort), DragDropException, DrawBackground, DrawColumnHeaderBackground, DrawColumnHeader, DrawItemBackground, DrawItem, HitTestChanged, ItemActivate (event data tells you how the item got activated - mouse, keyboard or code), ItemDrag, ItemDrop, ItemReorder, ItemSearch, LabelEdit, RequestEmebeddedControl.
|
||||
|
||||
<h3>Checkboxes in all views</h3>
|
||||
|
||||
You can have checkboxes in LargeIcons view, SmallIcons view, List view, Thumbnails view and of course also in the Details view.
|
||||
|
||||
<div class="image"><img alt="Checkboxes In LargeIcons View" src="http://assets.componentowl.com/images/13/Checkboxes In LargeIcons View_original_1298623385.png?1298598185" /></div>
|
||||
|
||||
<h3>Three state checkboxes</h3>
|
||||
Three state checkboxes are supported in Better ListView:
|
||||
|
||||
<div class="image"><img alt="Three-State Checkboxes in List View" src="http://assets.componentowl.com/images/14/Three State Checkboxes in List View_original_1298624577.png?1298599377" /></div>
|
||||
|
||||
<h3>Hide or show checkboxes of specific ListView Items</h3>
|
||||
|
||||
You can hide checkbox for any ListViewItem. You can also show checkboxes only for specified items. All list items in Better ListView have "AllowShowCheckBox" property.
|
||||
|
||||
<div class="image"><img alt="Show or hide checkboxes for specific listview items" src="http://assets.componentowl.com/images/23/show-or-hide-checkboxes-for-specific-listview-items_original_1299748307.png?1299723107" title="Show or hide checkboxes for specific listview items" /></div>
|
||||
|
||||
<h3>Powerful list view tooltips</h3>
|
||||
|
||||
You can display tooltips for nearly any part of Better ListView - tooltips for items, sub-items, checkboxes, item images, sub-item images, column headers, column header images, column header borders, and even for custom areas (regions). Owner-drawn tooltips are supported.
|
||||
|
||||
<div class="image"><img alt="List View Regional Tooltips and Owner Drawn Tooltips" src="http://assets.componentowl.com/images/15/List View Tooltips Region And Owner Drawn Tooltips_original_1298632357.png?1298607157" /></div>
|
||||
|
||||
<h3>Uses current Windows theme</h3>
|
||||
|
||||
Instead of implementing custom, un-native look and feel, Better ListView always automatically fully uses the current system theme. It supports Aero as well. Better ListView always looks great and feels right to the user.
|
||||
|
||||
<h3>XML and binary serialization of everything</h3>
|
||||
|
||||
Every part of Better ListView (items, sub-items, column headers) can be both binary and XML serialized. You can easily XML serialize whole list view (or binary serialize) to save it to file or transfer items between controls. Standard ways of .NET serialization can be used (BinaryFormatter, XmlSerializer).
|
||||
|
||||
<h3>Owner drawing</h3>
|
||||
|
||||
Better ListView allows you to draw over the client area, items and column headers. Contrary to .NET ListView, owner drawing is fully operational even when the system uses Aero theme. You can draw separately to background and foreground parts of Better ListView without worrying about proper drawing order. Owner drawing events provide rich data, including exact item state and areas of every item part.
|
||||
|
||||
<div class="image"><img alt="List View Owner Drawing Background Gradient" src="http://assets.componentowl.com/images/22/List View Owner Drawing Background Gradient_original_1298633053.png?1298607853" /></div>
|
||||
|
||||
<h3>Multi-line items</h3>
|
||||
|
||||
Better ListView supports multi-line items. Items with very long text can be displayed on multiple lines. Highly customizable and powerful: Focused items can have custom number of lines; hard line breaks supported as well. Foreground overlay "watermark" images are easily achievable using owner-drawing.
|
||||
|
||||
<div class="image"><img src="http://assets.componentowl.com/screenshots/21/multi-line-items_original_1312133213.png?1312133213" alt="Multi-line items"></div>
|
||||
|
||||
<h3>Background image support</h3>
|
||||
|
||||
Display background image in Better ListView easily using the BackgroundImage property. Many layouts (stretch, tile, none), alignments (top, bottom, left, right, center and combinations) are supported, as well as customizable opacity.
|
||||
|
||||
<div class="image"><img alt="ListView Background Image" src="http://assets.componentowl.com/images/27/Background-Images_original_1326106027.png?1326080827" title="ListView Background Image" /></div>
|
||||
|
||||
<h3>Context menu for column headers, list items, and empty area</h3>
|
||||
|
||||
Better ListView supports 3 types of context menus: Column header context menu, list view items context menu, and empty area context menu (when right-clicking white space).
|
||||
|
||||
<div class="image"><img alt="Column Header Context Menu in List View" src="http://assets.componentowl.com/images/17/Column Header Context Menu in List View_original_1298721855.png?1298696655" /></div>
|
||||
|
||||
<h3>Advanced hit-test with detailed information</h3>
|
||||
The hit test in Better ListView returns very detailed information. It tells you not only the location (Client Area, Sub-Item, Sub-Item Text, Sub-Item Image, Checkbox, Column Header Image, and many more), but it also tells you the state of the item, and part of the item (left or right).
|
||||
|
||||
<div class="image"><img alt="Advanced Hit-Test With Detailed Information" src="http://assets.componentowl.com/images/26/Advanced-Hit-Test_original_1326105831.png?1326080631" title="Advanced Hit-Test With Detailed Information" /></div>
|
||||
|
||||
<h3>Customizable search-by-typing</h3>
|
||||
|
||||
Better ListView has excellent customization functionality for find-as-you-type item searching. The search modes include: Prefix (searchs from beginning of items), Substring (search any part of item text), Prefix + Substring, or Disabled. Additionally, search options include: Case sensitive, search first word only, play sound when item not found, prefer prefixes, search whole words. You can also restrict the search to only certain columns. You can also call "FindItemsWithText" function to find items from code.
|
||||
|
||||
<h3>Display text when the list view is empty</h3>
|
||||
You can display a gray text centered in the list view if it's empty to hint or educate users. This will make your software more user friendly.
|
||||
|
||||
<div class="image"><img alt="Show Text When List View is Empty" src="http://assets.componentowl.com/images/18/Show Text When List View is Empty_original_1298629916.png?1298604716" /></div>
|
||||
|
||||
<h3>Embed controls for item editing</h3>
|
||||
Inbuilt in-line editing support includes label edit, combobox edit, date picker edit. You can also embed any custom control for in-line editing. Sub-item editing is supported. Highly customizable.
|
||||
|
||||
<div class="image"><img alt="Custom Embedded Control in List View for Editing" src="http://assets.componentowl.com/images/19/Custom Embedded Control in List View for Editing_original_1298630263.png?1298605063" /></div>
|
||||
|
||||
<h3>ListView item text formatting</h3>
|
||||
|
||||
Supports both text trimming and auto-ellipsis for text that's too long. You can choose from: TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath (for file paths). Column header text can be broken into multiple lines.
|
||||
|
||||
<h3>Focusable ListView sub-items and groups</h3>
|
||||
|
||||
Focus sub-items or groups in Better ListView easily with keyboard. Just use the arrow keys. (This is impossible with the regular .NET ListView)
|
||||
<div class="image"><img alt="Focusable sub-items in Better ListView" src="http://assets.componentowl.com/images/25/focus-list-view-sub-items_original_1313674098.png?1313648898" title="Focusable sub-items in Better ListView" /></div>
|
||||
|
||||
<h3>Automatic list view layout</h3>
|
||||
|
||||
Better ListView can auto-size item images, item text, column header images, column header text.
|
||||
|
||||
<h3>Custom list view item size</h3>
|
||||
|
||||
You can set custom sizes for item text area and item images. You can also set custom size for column header text area and column header images. (Text area size is different from font size, text area size basically defines the size of the list view item.) This enables you to make tiny/huge column headers or list view items.
|
||||
|
||||
<div class="image"><img alt="Custom Item Size in List View" src="http://assets.componentowl.com/images/20/Custom Item Size in List View_original_1298630739.png?1298605539" /></div>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
It's an odd thing when you're inspired by a form component, but Component Owl
|
||||
with their Better ListView has done it. Love its native feel.
|
||||
</em></blockquote><strong>Daniel N, USA</strong></div></div>
|
||||
|
||||
<h2>More advantages of our improved list view component:</h2>
|
||||
<ul class="common">
|
||||
<li><strong>Developer friendly</strong>: All classes and properties are as similar to the regular list view as possible. Everything is intuitive, very little learning is needed. You can use Better ListView immediately. <strong>Save time and ship sooner</strong>.</li>
|
||||
<li><strong>Better ListView has improved usability and fixed behavior</strong>. All Windows users are familiar with the list view used in Windows Explorer. Better ListView mimicks behavior and look & feel of the Windows Explorer list view as much as possible to leverage the existing user knowledge. <strong>Using Better ListView is pleasant for users.</strong> Many other list view components implement custom look and behavior and can oftentimes downright frustrate users (many controls don't even support mouse-wheel scrolling!) This doesn't happen with Better ListView.</li>
|
||||
<li><strong>Guaranteed support and continued development</strong>: Better ListView is developed as a joint-venture of two software companies that use Better ListView in their main products (popular <strong><a href="http://www.dextronet.com/swift-to-do-list-software" target="_blank">Swift To-Do List</a></strong> and <strong><a href="http://www.imagingshop.com" target="_blank">ImagingShop</a></strong>). These applications are used by thousands of users daily. This is your guarantee that Better ListView will be supported and developed in the future.</li>
|
||||
<li><strong>Tested in real world applications by thousands of users</strong>: Because Better ListView is used in professional consumer desktop software applications - Swift To-Do List and ImagingShop, thousands of users work with Better ListView every day. Although we use unit tests that cover most of code, and do thorough inhouse testing, this is your true guarantee that it is tested thoroughly in the real world. It is <strong>extremely stable</strong>.</li>
|
||||
<li>Better ListView does <strong>not</strong> inherit from the regular .NET list view. It is written in pure managed C# code and is flexible, light weight, and fast. Extensions of the regular .net list view only go so far. Better ListView goes further. Soure code licenses are also available for ultimate customization.</li>
|
||||
</ul>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
In addition to creating a new List View control to incorporate <b>broader flexibility and functionality</b>, Better ListView could also be called <b>Fixed ListView</b>, as it corrects a number of annoying problems with the standard List View that Microsoft delivers to Visual Studio customers.
|
||||
</em></blockquote><strong>DevProConnections.com Review</strong></div></div>
|
||||
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
|
||||
<div class="buttons-box">
|
||||
<a onclick="ga('send', 'event', 'trial', 'click');" data-sumome-listbuilder-id="4016d967-e098-487d-a20e-da328d2345df" class="standard-download image-link">Download Free Trial - With sample projects</a>
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="standard-buy image-link">See Pricing & Licensing</a>
|
||||
<p>Version 3.15 / May 27, 2015</p>
|
||||
</div>
|
||||
<div class="compatibility">
|
||||
<p><strong>Seamless integration with .NET 2.0 and higher</strong></p>
|
||||
<div class="documentation">
|
||||
<p><a href="../../../better-listview/quick-start-guide.html" onclick="window.open(this.href); return false">See Quick Start Guide</a></p>
|
||||
<p><a href="../../../better-listview/documentation.html" onclick="window.open(this.href); return false">See Documentation</a></p>
|
||||
|
||||
<p><a href="../../../better-listview/class-reference.html" onclick="window.open(this.href); return false">See Class Reference</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/15/blv-overview_original_1326499754.png?1326474554" class="screenshot" title="Better ListView control"><img alt="Better ListView" src="http://assets.componentowl.com/screenshots/15/blv-overview_thumb_1326499754.png?1326474554" /></a></p>
|
||||
</div>
|
||||
<div class="newsletter">
|
||||
<form action="http://www.componentowl.com/subscriptions" class="new_subscription" id="new_subscription_product" method="post" onsubmit="if (!validate_newsletter_form(this)) return false; jQuery.ajax({data:jQuery.param(jQuery(this).serializeArray()) + '&authenticity_token=' + encodeURIComponent('dJeFtbWrARc0arEomU+SG+XtypwJr2F4Kc9v14woStM='), dataType:'script', type:'post', url:'/subscriptions'}); return false;"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="dJeFtbWrARc0arEomU+SG+XtypwJr2F4Kc9v14woStM=" /></div> <input id="subscription_subscription_location_id" name="subscription[subscription_location_id]" type="hidden" value="512994065" />
|
||||
<input id="form_id" name="form_id" type="hidden" value="#new_subscription_product" />
|
||||
<strong>Receive product updates<br />and news via email:</strong>
|
||||
<div><input class="email inline-label" id="product-newsletter-email" name="subscription[email]" size="30" type="text" value="Your Email" /></div>
|
||||
<div id="product-newsleter-lists" class="subscription-lists-ct" style="display: none"><input name="subscription[subscription_list_ids][]" type="hidden" value="970100327" />
|
||||
<input name="subscription[subscription_list_ids][]" type="hidden" value="1009842129" /></div>
|
||||
<span class="dbtn-c subscribe dbtn-small" id="send"><span class="dbtn-w"><input class="dbtn" name="commit" type="submit" value="Subscribe" /></span></span>
|
||||
</form></div>
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/16/thumbnails_original_1312133021.png?1312107821" class="screenshot" title="Image thumbnails in groups"><img alt="Thumbnails" src="http://assets.componentowl.com/screenshots/16/thumbnails_thumb_1312133021.png?1312107821" /></a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/21/multi-line-items_original_1312133213.png?1312108013" class="screenshot" title="Items with multi-line text"><img alt="Multi-line Items" src="http://assets.componentowl.com/screenshots/21/multi-line-items_thumb_1312133213.png?1312108013" /></a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/18/betterlistview-tree-hierarchy_original_1313676477.png?1313651277" class="screenshot" title="Items organized in a tree-like hierarchy"><img alt="Item Hierarchy" src="http://assets.componentowl.com/screenshots/18/betterlistview-tree-hierarchy_thumb_1313676477.png?1313651277" /></a></p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="small-button-ct">
|
||||
<a href="../../../better-listview/screenshots.html" class="small-button"><span>More Screenshots</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="buttons-wrap">
|
||||
<div class="buttons">
|
||||
<a onclick="ga('send', 'event', 'trial', 'click');" data-sumome-listbuilder-id="4016d967-e098-487d-a20e-da328d2345df" class="standard-download image-link">Download Free Trial - With sample projects</a>
|
||||
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="standard-buy image-link">See Pricing & Licensing</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="screenshot-buttons" style="display: none">
|
||||
<div class="buttons">
|
||||
<a href="../../../betterlistview.exe" class="small-download image-link" onclick="download_email('better-listview');">Free Download</a>
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="small-buy image-link">See Pricing & Licensing</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="d-footer">
|
||||
<div class="d-placing">
|
||||
|
||||
<div class="left">
|
||||
<div class="latest-posts">
|
||||
<h3 class="latest_from_blog"><a href="../../../blog.html">Latest From Our Blog</a></h3>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=927.html">Activation issues and how to solve them</a></h4>
|
||||
<div class="post-info">Wednesday, 01 March 2017</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=921.html">The Three Main Advantages Better ListView has Over the Classic .NET Framework</a></h4>
|
||||
<div class="post-info">Thursday, 09 February 2017</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=914.html">BLV and Internet Explorer</a></h4>
|
||||
<div class="post-info">Sunday, 13 November 2016</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=906.html">Centering Images in Better ListView Sub-items</a></h4>
|
||||
<div class="post-info">Wednesday, 06 August 2014</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=901.html">Sub-item Check Boxes in Better ListView</a></h4>
|
||||
<div class="post-info">Sunday, 06 July 2014</div>
|
||||
|
||||
</div>
|
||||
<div class="other-posts"><a href="../../../blog.html">See more posts »</a></div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="news">
|
||||
<ul class="links">
|
||||
<li><a href="../../../feeds.rss" class="rss">Subscribe to our RSS</a></li>
|
||||
<li><a href="http://twitter.com/ComponentOwl" class="twitter">Follow us on twitter</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better ListView Express 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../betterlistviewexpress.exe" onclick="download_email('better-listview-express');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better ListView 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../betterlistview.exe" onclick="download_email('better-listview');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better SplitButton 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../bettersplitbutton.exe" onclick="download_email('better-splitbutton');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better Thumbnail Browser 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../betterthumbnailbrowser.exe" onclick="download_email('better-thumbnail-browser');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item last-item">
|
||||
<div class="date">08<span>Apr</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better ListView Express 3.14.0 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../better-listview-express/releases%3Fsince=3.14.0.html">See what's new</a>
|
||||
or
|
||||
|
||||
<a href="../../../betterlistviewexpress.exe" onclick="download_email('better-listview-express');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="d-placing">
|
||||
<hr />
|
||||
<div class="copy"><div class="social"><a href="../../../support.html" class="feedback">Contact Us (Feedback)</a> <span>|</span> <a href="../../../feeds.rss" class="rss">RSS</a> <span>|</span> <a href="https://twitter.com/ComponentOwl" class="twitter">Twitter</a> <span>|</span> <a href="../../../sitemap.html" class="sitemap">Sitemap</a> <span>|</span> Our <a href="../../../index.html" class="stdl">task management software</a> that uses Better ListView</div>
|
||||
Copyright © 2021 ComponentOwl.com, All rights reserved. Read our <a href="../../../eula.html">EULA</a>, <a href="../../../disclaimer.html">Disclaimer</a> and <a href="../../../privacy-policy.html">Privacy Policy</a>.<br /></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../../javascripts/app_packaged.js%3F1455269826" type="text/javascript"></script>
|
||||
<script async>(function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='854b5e00f297990012cc230023375a00787c0000216621002775a800d79ad500';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Empty Text</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-drag-drop.html"><strong>
|
||||
« Drag and Drop</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-focus.html"><strong>Focusing Elements »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Empty Text</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>This feature displays text when Better ListView is empty (does not
|
||||
contain any items and groups).</p>
|
||||
|
||||
<p>A typical use case is file browser, showing "This folder is empty."
|
||||
text when there are no files to display.</p>
|
||||
|
||||
<p>Better ListView can display such arbitrary text with custom font and
|
||||
color.</p>
|
||||
|
||||
<p>The text can be of multiple lines and is automatically trimmed if
|
||||
there is not enough space.</p>
|
||||
|
||||
<p class="images"><img src="empty-text.png"></p>
|
||||
|
||||
<p>To add an empty text, simply set the <span class="code">EmptyText</span> property
|
||||
value. You can simply pass a value of type <span class="code">String</span> (there is an
|
||||
implicit conversion defined) or <span class="code">BetterListViewEmptyText</span> (which
|
||||
allows for settings custom font and color).</p>
|
||||
|
||||
<p>An explicit conversion of <span class="code">BetterListViewEmptyText</span> to
|
||||
<span class="code">String</span> is also defined.</p>
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>This minimalist sample shows how to easily set an empty text with
|
||||
default style:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.EmptyText = "Text displayed on empty list.";</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.EmptyText = "Text displayed on empty list."</code></pre>
|
||||
|
||||
<p>This sample show setting empty text with custom font and
|
||||
color:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// set empty text with custom style
|
||||
this.listView.EmptyText = new BetterListViewEmptyText(
|
||||
"Text displayed on empty list.",
|
||||
new Font("Arial", 12.0f, FontStyle.Bold | FontStyle.Italic),
|
||||
Color.DarkBlue);</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' set empty text with custom style
|
||||
ListView.EmptyText = New BetterListViewEmptyText (
|
||||
"Text displayed on empty list.",
|
||||
New Font ("Arial", 12.0F, FontStyle.Bold Or FontStyle.Italic),
|
||||
Color.DarkBlue)</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-drag-drop.html"><strong>
|
||||
« Drag and Drop</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-focus.html"><strong>Focusing Elements »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Focusing Elements</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-empty-text.html"><strong>
|
||||
« Empty Text</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-groups.html"><strong>Groups »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Focusing Elements</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Focusing Items and Groups</h2>
|
||||
|
||||
|
||||
<p>Elements of Better ListView controls can be focused independently on
|
||||
control focus state. Items, sub-items and groups can be focused using
|
||||
mouse or keyboard.</p>
|
||||
|
||||
<p>When item or group is clicked, it gets focus within the Better
|
||||
ListView Control. The focused item is usually displayed slightly darker
|
||||
than other items (Aero theme) when selected.</p>
|
||||
|
||||
<p>The focused item can be recognized by <strong><em>focus
|
||||
rectangle</em></strong>, which is apparent when item is focused, but not
|
||||
selected:</p>
|
||||
|
||||
<p class="images"><img src="focus-item.png"><img src="focus-group.png"></p>
|
||||
|
||||
<p>When graphic theme is turned off, focus rectangle is displayed after
|
||||
item or group is focused by keyboard for the first time. To hide focus
|
||||
rectangle again, call <span class="code">ResetFocusRectangleDisplay</span>
|
||||
method.</p>
|
||||
|
||||
|
||||
<h2>Focusing Sub-Items</h2>
|
||||
|
||||
|
||||
<p>Sub-items can be focused in <strong><em>Details</em></strong> view with
|
||||
columns.</p>
|
||||
|
||||
<p>Sub-items cannot be focused by mouse, but when an item is focused,
|
||||
using <span class="code">Left</span> and <span class="code">Right</span> arrow keys allows you to
|
||||
move focus rectangle to subsequent sub-items:</p>
|
||||
|
||||
<p class="images"><img src="sub-items.png"></p>
|
||||
|
||||
<p>Having a sub-item focused allows you to invoke label editing of
|
||||
sub-items using keyboard (see <strong><em><a href="chapter-label-edit.html">Label Editing</a></em></strong> for more
|
||||
information).</p>
|
||||
|
||||
<p>Sub item focusing behavior can be customized using
|
||||
<span class="code">SubItemFocusBehavior</span> property. It can have one of the three
|
||||
values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>Sub items cannot be focused.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">All</span><ul style="list-style:none"><li>
|
||||
<p>Sub items can always be focused.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Auto</span><ul style="list-style:none"><li>
|
||||
<p>Sub-items can be focused in all items except <strong><em><a href="chapter-items.html#combined-items">Combined
|
||||
Items</a></em></strong>.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<br><hr>
|
||||
<p class="note">When sub-item focusing is not possible in a given moment, Better
|
||||
ListView utilizes the left or right arrow key to perform horizontal
|
||||
scrolling.</p>
|
||||
<hr>
|
||||
<br><h2>Detecting Focused Element</h2>
|
||||
|
||||
|
||||
<p>Better ListView provides several properties to check which element
|
||||
is currently focused:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">FocusedGroup</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">FocusedItem</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">FocusedSubItem</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<br><hr>
|
||||
<p class="note">When a sub-item is focused (<span class="code">FocusedSubItem</span> property
|
||||
is not <span class="code">null</span>), the item is focused as well.</p>
|
||||
<hr>
|
||||
<br><p>To detect when focused element has been change, use the
|
||||
<span class="code">FocusedItemChanged</span> event. Event data contains information
|
||||
about both previous and recent focused element.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-empty-text.html"><strong>
|
||||
« Empty Text</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-groups.html"><strong>Groups »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Groups</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-focus.html"><strong>
|
||||
« Focusing Elements</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-hit-test.html"><strong>Hit Test »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Groups</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Groups allow items to be organized into subsets.</p>
|
||||
|
||||
<p>Depending on the view, groups can be oriented vertically or
|
||||
horizontally. Following screenshot shows items organized into groups:</p>
|
||||
|
||||
<p class="images"><img src="groups-overview-vertical.png"><img src="groups-overview-horizontal.png"></p>
|
||||
|
||||
<h2>Setting Up Groups</h2>
|
||||
|
||||
|
||||
<p>By default, groups are not visible and there is only one
|
||||
<strong><em>default</em></strong> group with all the items.</p>
|
||||
|
||||
<p>Setting-up groups is very simple. Just set the
|
||||
<span class="code">ShowGroups</span> property to <span class="code">true</span>.</p>
|
||||
|
||||
<p>Adding and managing custom groups can be done through
|
||||
<span class="code">Groups</span> collection in the same manner as when managing columns
|
||||
and items.</p>
|
||||
|
||||
<p>The last step when setting-up groups is to put items into their
|
||||
groups. This can be done either by setting group on
|
||||
<span class="code">BetterListViewItem</span> instance:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">item.Group = group;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">item.Group = group</code></pre>
|
||||
|
||||
<p>or by adding the item into <span class="code">BetterListViewGroup.Items</span>
|
||||
collection:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">group.Items.Add(item);</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">group.Items.Add(item)</code></pre>
|
||||
|
||||
<p>We chose to use the similar data model for groups as used in the
|
||||
regular .NET ListView, so the usage is virtually the same. The only
|
||||
difference is that Better ListView keeps order of items within groups.
|
||||
Even thought we adopt the .NET ListView model, it would be convenient to
|
||||
pinpoint important aspects of groups:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Items without group are displayed in
|
||||
<strong><em>default</em></strong> group.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The <strong><em>default</em></strong> group is just a placeholder for
|
||||
items and not intented to be edited; simply create a custom group for
|
||||
such purpose.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.Items</span> collection can contain
|
||||
items that are not part of the current control - only items that are
|
||||
part of both the control and the group within that control are
|
||||
displayed.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Selecting Groups</h2>
|
||||
|
||||
|
||||
<p>Only items contribute to selections in ListView. However, groups are
|
||||
interactive and support item selections. When a group is collapsed (left
|
||||
image), it behaves like item. Such group can be selected by keyboard, by
|
||||
clicking on it or even with mouse drag selection. When a group is expanded
|
||||
(right image), it does not appear as selected, but in both cases the group
|
||||
"selection" means that all items within that group are selected.</p>
|
||||
|
||||
<p class="images"><img src="groups-selected1.png"><img src="groups-selected2.png"></p>
|
||||
|
||||
<p>Groups can be focused just like items. When a group is focused, a
|
||||
focus rectangle appears on the group and the currently focused group can
|
||||
be retrieved by <span class="code">FocusedGroup</span> property.</p>
|
||||
|
||||
|
||||
<h2>Adjusting Group Header Behavior</h2>
|
||||
|
||||
|
||||
<p>The group headers can be focused and perform selection of items with
|
||||
both keyboard and mouse. This behavior can be altered using
|
||||
<span class="code">GroupHeaderBehavior</span> property, which is a flag enumeration
|
||||
with following values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>The group header is only displayed, not interactive.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">KeyboardFocus</span><ul style="list-style:none"><li>
|
||||
<p>The group header can be focused with keyboard.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">KeyboardSelectAndFocus</span><ul style="list-style:none"><li>
|
||||
<p>The group header can be focused and provides selection of
|
||||
items width keyboard. This value implicates
|
||||
<span class="code">KeyboardFocus</span>.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">MouseFocus</span><ul style="list-style:none"><li>
|
||||
<p>The group header can be focused with mouse.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">MouseHighlight</span><ul style="list-style:none"><li>
|
||||
<p>The group header is highlighted when mouse cursor hovers over
|
||||
it.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">MouseSelect</span><ul style="list-style:none"><li>
|
||||
<p>The group header provides selection of items with
|
||||
mouse.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">All</span><ul style="list-style:none"><li>
|
||||
<p>The group header is fully interactive (all the options above
|
||||
are active).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Expandable Groups</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>In all views except <strong><em>List</em></strong>, the groups are
|
||||
oriented vertically and can be collapsed and expanded through expand
|
||||
button.</p>
|
||||
|
||||
<p>Groups are expandable by default, but expand buttons can be turned
|
||||
off by settings <span class="code">ShowGroupExpandButtons</span> to <span class="code">false</span>.
|
||||
If you want to hide expand button on selected groups only, set
|
||||
<span class="code">BetterListViewGroup.AllowShowExpandButton</span> to
|
||||
<span class="code">false</span>.</p>
|
||||
|
||||
<p>Group can be expanded or collapsed programmatically using
|
||||
<span class="code">BetterListViewGroup.IsExpanded</span> property.</p>
|
||||
|
||||
|
||||
<h2>Hiding the Default Group Header</h2>
|
||||
|
||||
|
||||
<p>The default group header is visible by default, but can be hidden by
|
||||
setting <span class="code">ShowDefaultGroupHeader</span> property to
|
||||
<span class="code">false</span>:</p>
|
||||
|
||||
<p class="images"><img src="groups-showdefault1.png"><img src="groups-showdefault2.png"></p>
|
||||
|
||||
|
||||
<h2>Getting Visible Groups Only</h2>
|
||||
|
||||
|
||||
<p>Some groups may be scrolled out of view. If you need to iterate
|
||||
through the visible groups only, use the <span class="code">VisibleGroups</span>
|
||||
property. The property getter returns collection which is re-created
|
||||
whenever the visibility of groups changes.</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">//
|
||||
// create first group
|
||||
//
|
||||
BetterListViewGroup groupUnread = new BetterListViewGroup("Unread Messages");
|
||||
|
||||
// add items to the first group
|
||||
groupUnread.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"Hello, Dave",
|
||||
"Suggestion about your software",
|
||||
"You won the 1st prize!"
|
||||
});
|
||||
|
||||
//
|
||||
// create second group
|
||||
//
|
||||
BetterListViewGroup groupRead = new BetterListViewGroup("Read Messages");
|
||||
|
||||
// add items to the second group
|
||||
groupRead.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"Weekly meeting in a pub",
|
||||
"You won the 1st prize!"
|
||||
});
|
||||
|
||||
//
|
||||
// create third group
|
||||
//
|
||||
BetterListViewGroup groupConcepts = new BetterListViewGroup("Concepts");
|
||||
|
||||
// setup style of the first group
|
||||
groupConcepts.Font = new Font(
|
||||
"Arial",
|
||||
groupConcepts.Font.Size,
|
||||
FontStyle.Italic);
|
||||
|
||||
groupConcepts.ForeColor = Color.Gray;
|
||||
|
||||
// add items to the third group
|
||||
groupConcepts.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"How are you, Pete?"
|
||||
});
|
||||
|
||||
//
|
||||
// setup Better ListView
|
||||
//
|
||||
this.listView.BeginUpdate();
|
||||
|
||||
// add groups with items to the list
|
||||
this.listView.Groups.AddRange(
|
||||
new[]
|
||||
{
|
||||
groupUnread,
|
||||
groupRead,
|
||||
groupConcepts
|
||||
});
|
||||
|
||||
// size items with the content area (optional)
|
||||
this.listView.AutoSizeItemsInDetailsView = true;
|
||||
// show not only items, but the groups as well
|
||||
this.listView.ShowGroups = true;
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">'
|
||||
' create first group
|
||||
'
|
||||
Dim groupUnread As New BetterListViewGroup ("Unread Messages")
|
||||
|
||||
' add items to the first group
|
||||
groupUnread.Items.AddRange (New String() _
|
||||
{"Hello, Dave", "Suggestion about your software", "You won the 1st prize!"})
|
||||
|
||||
'
|
||||
' create second group
|
||||
'
|
||||
Dim groupRead As New BetterListViewGroup ("Read Messages")
|
||||
|
||||
' add items to the second group
|
||||
groupRead.Items.AddRange (New String() {"Weekly meeting in a pub", "You won the 1st prize!"})
|
||||
|
||||
'
|
||||
' create third group
|
||||
'
|
||||
Dim groupConcepts As New BetterListViewGroup ("Concepts")
|
||||
|
||||
' setup style of the first group
|
||||
groupConcepts.Font = New Font ("Arial", groupConcepts.Font.Size, FontStyle.Italic)
|
||||
|
||||
groupConcepts.ForeColor = Color.Gray
|
||||
|
||||
' add items to the third group
|
||||
groupConcepts.Items.AddRange (New String() {"How are you, Pete?"})
|
||||
|
||||
'
|
||||
' setup Better ListView
|
||||
'
|
||||
ListView.BeginUpdate()
|
||||
|
||||
' add groups with items to the list
|
||||
ListView.Groups.AddRange (New BetterListViewGroup() {groupUnread, groupRead, groupConcepts})
|
||||
|
||||
' size items with the content area (optional)
|
||||
ListView.AutoSizeItemsInDetailsView = True
|
||||
' show not only items, but the groups as well
|
||||
ListView.ShowGroups = True
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-focus.html"><strong>
|
||||
« Focusing Elements</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-hit-test.html"><strong>Hit Test »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Hit Test</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-groups.html"><strong>
|
||||
« Groups</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-insertion-mark.html"><strong>Insertion Mark »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Hit Test</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Hit test allows you to detect elements and element parts for a
|
||||
specified position in the control. There are two overrides of the HitTest
|
||||
method:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">HitTest()</span><ul style="list-style:none"><li>
|
||||
<p>Returns hit test information for the current mouse
|
||||
position.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">HitTest(Point)</span><ul style="list-style:none"><li>
|
||||
<p>Returns hit test information for the specified position (in
|
||||
client coordinates).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The returned structure <span class="code">BetterListViewHitTestInfo</span> contains
|
||||
references to Better ListView elements (column, group, item, sub-item),
|
||||
element parts and even its state information.</p>
|
||||
|
||||
<p>Current hit test information changes every time user moves mouse from
|
||||
one element part to another (or to another element), or when state of the
|
||||
hovered element changes (e.g. column is pressed). Better ListView raises
|
||||
<span class="code">BetterListViewHitTestChanged</span> event whenever this occurs.</p>
|
||||
|
||||
<h2>BetterListViewHitTestInfo.Locations Property</h2>
|
||||
|
||||
|
||||
<p>Furthermore, this structure contains a <span class="code">Locations</span>
|
||||
property, which is enumeration with flags of all the cursor locations. Of
|
||||
course, there is always just a single cursor position, but it can
|
||||
correspond to multiple locations. For example, when the mouse cursor is
|
||||
hovers over an item text, the <span class="code">Locations</span> property has the
|
||||
following value:</p>
|
||||
|
||||
<p></p>
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">BetterListViewHitTestLocations.ContentArea | BetterListViewHitTestLocations.Item | BetterListViewHitTestLocations.ItemSelection | BetterListViewHitTestLocations.ItemText</code></pre>
|
||||
|
||||
<p></p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">BetterListViewHitTestLocations.ContentArea Or BetterListViewHitTestLocations.Item Or BetterListViewHitTestLocations.ItemSelection Or BetterListViewHitTestLocations.ItemText</code></pre>
|
||||
|
||||
<p>When the mouse cursor is inside the control, the
|
||||
<span class="code">Locations</span> property has always the <span class="code">ContentArea</span>
|
||||
flag on. The same rule applies within Better ListView elements.</p>
|
||||
|
||||
<p>To check for some specific location (e.g. expand button of a group),
|
||||
write the following expression in an <strong><em>if</em></strong>
|
||||
statement:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">(hitTestInfo.Locations & BetterListViewHitTestLocations.GroupExpandButton) == BetterListViewHitTestLocations.GroupExpandButton</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">(hitTestInfo.Locations And BetterListViewHitTestLocations.GroupExpandButton) = BetterListViewHitTestLocations.GroupExpandButton</code></pre>
|
||||
|
||||
|
||||
<h2>Difference between ItemDisplay and ItemSelection</h2>
|
||||
|
||||
|
||||
<p>There are two items returned by hit test, which are not necessarily
|
||||
the same: <span class="code">BetterListViewHitTestInfo.ItemDisplay</span> and
|
||||
<span class="code">BetterListViewHitTestInfo.ItemSelection</span>.</p>
|
||||
|
||||
<p>These two items differ when combined items are turned on (see <strong><em><a href="chapter-items.html#combined-items">Combined Items</a></em></strong> for
|
||||
more information).</p>
|
||||
|
||||
<p>The <span class="code">ItemDisplay</span> property always refers to the displayed
|
||||
item under cursor regardless of combined items. The
|
||||
<span class="code">ItemSelection</span> property refers to corresponding selectable
|
||||
item.</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>The following sample shows handler of
|
||||
<span class="code">BetterListViewHitTestChanged</span> event setting comprehensive
|
||||
information about hit test in a <span class="code">TextBox</span>:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">private void ListViewHitTestChanged(object sender, BetterListViewHitTestChangedEventArgs eventArgs)
|
||||
{
|
||||
BetterListViewHitTestInfo hitTestInfo = eventArgs.HitTestInfoNew;
|
||||
StringBuilder sbHitTest = new StringBuilder();
|
||||
|
||||
sbHitTest.AppendLine(String.Format("Locations: {0}", hitTestInfo.Locations));
|
||||
|
||||
if ((hitTestInfo.Locations & BetterListViewHitTestLocations.ColumnHeader) == BetterListViewHitTestLocations.ColumnHeader)
|
||||
{
|
||||
sbHitTest.AppendLine();
|
||||
sbHitTest.AppendLine(String.Format("Column header: '{0}'", hitTestInfo.ColumnHeader.Text));
|
||||
sbHitTest.AppendLine(String.Format("Column header part: {0}", hitTestInfo.ColumnHeaderPart));
|
||||
sbHitTest.AppendLine(String.Format("Column header state: {0}", hitTestInfo.ColumnHeaderStateInfo.ColumnHeaderState));
|
||||
}
|
||||
|
||||
if ((hitTestInfo.Locations & BetterListViewHitTestLocations.Group) == BetterListViewHitTestLocations.Group)
|
||||
{
|
||||
sbHitTest.AppendLine();
|
||||
sbHitTest.AppendLine(String.Format("Group: '{0}'", hitTestInfo.Group.Header));
|
||||
sbHitTest.AppendLine(String.Format("Group part: {0}", hitTestInfo.GroupPart));
|
||||
sbHitTest.AppendLine(String.Format("Group state: {0}", hitTestInfo.GroupStateInfo.GroupState));
|
||||
sbHitTest.AppendLine(String.Format("Group expand button state: {0}", hitTestInfo.GroupStateInfo.ExpandButtonState));
|
||||
}
|
||||
|
||||
if ((hitTestInfo.Locations & BetterListViewHitTestLocations.Item) == BetterListViewHitTestLocations.Item)
|
||||
{
|
||||
sbHitTest.AppendLine();
|
||||
sbHitTest.AppendLine(String.Format("Item: '{0}'", hitTestInfo.ItemDisplay.Text));
|
||||
sbHitTest.AppendLine(String.Format("Item part: {0}", hitTestInfo.ItemPartDisplay));
|
||||
sbHitTest.AppendLine(String.Format("Item state: {0}", hitTestInfo.ItemStateInfo.ItemState));
|
||||
}
|
||||
|
||||
if ((hitTestInfo.Locations & BetterListViewHitTestLocations.SubItem) == BetterListViewHitTestLocations.SubItem)
|
||||
{
|
||||
sbHitTest.AppendLine();
|
||||
sbHitTest.AppendLine(String.Format("Sub-item: '{0}'", hitTestInfo.SubItem.Text));
|
||||
sbHitTest.AppendLine(String.Format("Sub-item part: {0}", hitTestInfo.SubItemPart));
|
||||
}
|
||||
|
||||
this.textBoxHitTest.Text = sbHitTest.ToString();
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Private Sub ListViewHitTestChanged (ByVal sender As Object, ByVal eventArgs As BetterListViewHitTestChangedEventArgs)
|
||||
|
||||
Dim hitTestInfo As BetterListViewHitTestInfo = eventArgs.HitTestInfoNew
|
||||
Dim sbHitTest As New StringBuilder()
|
||||
|
||||
sbHitTest.AppendLine ([String].Format ("Locations: {0}", hitTestInfo.Locations))
|
||||
|
||||
If _
|
||||
(hitTestInfo.Locations And BetterListViewHitTestLocations.ColumnHeader) =
|
||||
BetterListViewHitTestLocations.ColumnHeader Then
|
||||
|
||||
sbHitTest.AppendLine()
|
||||
sbHitTest.AppendLine ([String].Format ("Column header: '{0}'", hitTestInfo.ColumnHeader.Text))
|
||||
sbHitTest.AppendLine ([String].Format ("Column header part: {0}", hitTestInfo.ColumnHeaderPart))
|
||||
sbHitTest.AppendLine ([String].Format ("Column header state: {0}",
|
||||
hitTestInfo.ColumnHeaderStateInfo.ColumnHeaderState))
|
||||
|
||||
End If
|
||||
|
||||
If (hitTestInfo.Locations And BetterListViewHitTestLocations.Group) = BetterListViewHitTestLocations.Group Then
|
||||
|
||||
sbHitTest.AppendLine()
|
||||
sbHitTest.AppendLine ([String].Format ("Group: '{0}'", hitTestInfo.Group.Header))
|
||||
sbHitTest.AppendLine ([String].Format ("Group part: {0}", hitTestInfo.GroupPart))
|
||||
sbHitTest.AppendLine ([String].Format ("Group state: {0}", hitTestInfo.GroupStateInfo.GroupState))
|
||||
sbHitTest.AppendLine ([String].Format ("Group expand button state: {0}",
|
||||
hitTestInfo.GroupStateInfo.ExpandButtonState))
|
||||
|
||||
End If
|
||||
|
||||
If (hitTestInfo.Locations And BetterListViewHitTestLocations.Item) = BetterListViewHitTestLocations.Item Then
|
||||
|
||||
sbHitTest.AppendLine()
|
||||
sbHitTest.AppendLine ([String].Format ("Item: '{0}'", hitTestInfo.ItemDisplay.Text))
|
||||
sbHitTest.AppendLine ([String].Format ("Item part: {0}", hitTestInfo.ItemPartDisplay))
|
||||
sbHitTest.AppendLine ([String].Format ("Item state: {0}", hitTestInfo.ItemStateInfo.ItemState))
|
||||
|
||||
End If
|
||||
|
||||
If (hitTestInfo.Locations And BetterListViewHitTestLocations.SubItem) = BetterListViewHitTestLocations.SubItem _
|
||||
Then
|
||||
|
||||
sbHitTest.AppendLine()
|
||||
sbHitTest.AppendLine ([String].Format ("Sub-item: '{0}'", hitTestInfo.SubItem.Text))
|
||||
sbHitTest.AppendLine ([String].Format ("Sub-item part: {0}", hitTestInfo.SubItemPart))
|
||||
|
||||
End If
|
||||
|
||||
TextBoxHitTest.Text = sbHitTest.ToString()
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-groups.html"><strong>
|
||||
« Groups</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-insertion-mark.html"><strong>Insertion Mark »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,360 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Insertion Mark</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-hit-test.html"><strong>
|
||||
« Hit Test</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-item-reorder.html"><strong>Item Reordering »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Insertion Mark</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Insertion mark is a line showing location between items. Better
|
||||
ListView support displaying the insertion mark on various locations with
|
||||
support for groups and item hierarchy:</p>
|
||||
|
||||
<p class="images"><img src="insertion-mark-hierarchy1.png"><img src="insertion-mark-hierarchy2.png"><img src="insertion-mark-hierarchy3.png"><img src="insertion-mark-vertical.png"></p>
|
||||
|
||||
<p>The basic usage of insertion mark is the same as in regular .NET
|
||||
ListView. Setting <span class="code">InsertionMark</span> property using one of these
|
||||
constructors will give you the <strong><em>classic</em></strong> insertion
|
||||
mark:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(int index)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(int index, bool
|
||||
showAfterItem)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(int index, bool showAfterItem,
|
||||
Color color)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(int index, bool showAfterItem,
|
||||
Color color, bool enabled)</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The last constructor has an extra parameter <span class="code">enabled</span> which
|
||||
adjusts insertion mark color slightly (giving it alpha transparency) to be
|
||||
displayed in an <strong><em>inactive</em></strong> or
|
||||
<strong><em>disabled</em></strong> state.</p>
|
||||
|
||||
<p>There are also more general constructors for displaying insertion mark
|
||||
on arbitrary location in item hierarchy and on groups:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(BetterListViewInsertionLocation
|
||||
insertionLocation)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(BetterListViewInsertionLocation
|
||||
insertionLocation, Color color)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionMark(BetterListViewInsertionLocation
|
||||
insertionLocation, Color color, bool enabled)</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Instead of <span class="code">index</span>, there is an
|
||||
<span class="code">insertionLocation</span> parameter.</p>
|
||||
|
||||
<h2>Insertion Locations</h2>
|
||||
|
||||
|
||||
<p>The <span class="code">BetterListViewInsertionLocation</span> type can describe
|
||||
any location in item hierarchy and on groups. The location consists of
|
||||
three properties:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>Address<ul style="list-style:none"><li>
|
||||
<p>Counterpart to index in item hierarchy (see <strong><em><a href="chapter-item-hierarchy.html#addressing-elements">Addressing
|
||||
Elements</a></em></strong>). It can describe either group or a child
|
||||
item.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>DropPart<ul style="list-style:none"><li>
|
||||
<p>Defines relative insertion location to the element specified
|
||||
by the <span class="code">Address</span>. The drop part value can be either
|
||||
<span class="code">Before</span> the element, <span class="code">After</span> the element or
|
||||
<span class="code">Inside</span> the element. For groups, the <span class="code">Inside</span>
|
||||
is the only valid value. Items can display any of the three drop
|
||||
parts. The difference between <span class="code">After</span> and
|
||||
<span class="code">Inside</span> is that with <span class="code">Inside</span> it is possible
|
||||
to create new child items. Otherwise, the location <strong><em>inside
|
||||
item</em></strong> can be substituted by <strong><em>before first child
|
||||
item of that item</em></strong>.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>Level<ul style="list-style:none"><li>
|
||||
<p>Specifies target level in item hierarchy. It is valid for
|
||||
<span class="code">Before</span> and <span class="code">After</span> drop parts only. By
|
||||
default, the <span class="code">Level</span> property has value of
|
||||
<span class="code">BetterListViewInsertionLocation.LevelUndefined</span> and thus
|
||||
inheriting level of the currently located item. When set, it
|
||||
overrides the level and the insertion mark can start on smaller
|
||||
offset than the child item. This is used mainly internally for item
|
||||
reordering, when user puts item after the last child item and then
|
||||
moves mouse cursor to the left, to put it after its parent,
|
||||
actually.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>Offset<ul style="list-style:none"><li>
|
||||
<p>Specifies custom additional indentation of insertion mark (in
|
||||
pixels).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>The following sample shows how to display insertion mark according
|
||||
to current mouse position (see <strong><em><a href="chapter-hit-test.html">Hit Test</a></em></strong>).</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
// create groups with items and child items
|
||||
BetterListViewGroup groupRecent = new BetterListViewGroup("Recent Items");
|
||||
|
||||
groupRecent.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"Ming Dynasty Vase",
|
||||
"Collection of Rembrandt",
|
||||
"Photos from Prokudin Gorskij"
|
||||
});
|
||||
|
||||
groupRecent.Items[1].ChildItems.AddRange(
|
||||
new[]
|
||||
{
|
||||
"The Night Watch",
|
||||
"Belshazzar's Feast"
|
||||
});
|
||||
|
||||
BetterListViewGroup groupArchived = new BetterListViewGroup("Archived Items");
|
||||
|
||||
groupArchived.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"Statue of Zeus",
|
||||
"Rare pens from Hamburg and Dresden"
|
||||
});
|
||||
|
||||
this.listView.Groups.AddRange(
|
||||
new[]
|
||||
{
|
||||
groupRecent,
|
||||
groupArchived
|
||||
});
|
||||
|
||||
// set custom color for the insertion mark
|
||||
this.listView.ColorInsertionMark = Color.DarkGreen;
|
||||
// make the groups visible
|
||||
this.listView.ShowGroups = true;
|
||||
|
||||
this.listView.EndUpdate();
|
||||
|
||||
// this will set insertion mark every time hit test changes
|
||||
this.listView.HitTestChanged += ListViewHitTestChanged;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
' create groups with items and child items
|
||||
Dim groupRecent As New BetterListViewGroup("Recent Items")
|
||||
|
||||
groupRecent.Items.AddRange(
|
||||
New String() {
|
||||
"Ming Dynasty Vase",
|
||||
"Collection of Rembrandt",
|
||||
"Photos from Prokudin Gorskij"
|
||||
})
|
||||
|
||||
groupRecent.Items(1).ChildItems.AddRange(
|
||||
New String() {
|
||||
"The Night Watch",
|
||||
"Belshazzar's Feast"
|
||||
})
|
||||
|
||||
Dim groupArchived As New BetterListViewGroup("Archived Items")
|
||||
|
||||
groupArchived.Items.AddRange(
|
||||
New String() {
|
||||
"Statue of Zeus",
|
||||
"Rare pens from Hamburg and Dresden"
|
||||
})
|
||||
|
||||
ListView.Groups.AddRange(New BetterListViewGroup() {groupRecent, groupArchived})
|
||||
|
||||
' set custom color for the insertion mark
|
||||
ListView.ColorInsertionMark = Color.DarkGreen
|
||||
' make the groups visible
|
||||
ListView.ShowGroups = True
|
||||
|
||||
ListView.EndUpdate()
|
||||
|
||||
' this will set insertion mark every time hit test changes
|
||||
AddHandler ListView.HitTestChanged, AddressOf ListViewHitTestChanged</code></pre>
|
||||
|
||||
<p>The <span class="code">HitTestInfoChanged</span> event handler determines the
|
||||
actual insertion mark location and sets it:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">void ListViewHitTestChanged(object sender, BetterListViewHitTestChangedEventArgs eventArgs)
|
||||
{
|
||||
// get current hit test information
|
||||
BetterListViewHitTestInfo hitTestInfo = eventArgs.HitTestInfoNew;
|
||||
|
||||
// get address and drop part to assembly an insertion mark location
|
||||
BetterListViewAddress address;
|
||||
BetterListViewDropPart dropPart;
|
||||
|
||||
if (hitTestInfo.Item != null)
|
||||
{
|
||||
// the mouse cursor is located on item
|
||||
address = hitTestInfo.Item.Address;
|
||||
|
||||
if ((hitTestInfo.ItemPart & BetterListViewHitPart.VCenter) == BetterListViewHitPart.VCenter)
|
||||
{
|
||||
// the mouse cursor is located in the centre of the item - the insertion mark will point inside the item
|
||||
dropPart = BetterListViewDropPart.Inside;
|
||||
}
|
||||
else
|
||||
{
|
||||
// the mouse cursor is located on other parts of the item - the insertion mark will point before on after the item
|
||||
dropPart = (((hitTestInfo.ItemPart & BetterListViewHitPart.Bottom) == BetterListViewHitPart.Bottom)
|
||||
? BetterListViewDropPart.After
|
||||
: BetterListViewDropPart.Before);
|
||||
}
|
||||
}
|
||||
else if (
|
||||
hitTestInfo.Group != null)
|
||||
{
|
||||
// the mouse cursor is located on group
|
||||
address = hitTestInfo.Group.Address;
|
||||
dropPart = BetterListViewDropPart.Inside; //NOTE: only Inside is allowed as drop part on groups
|
||||
}
|
||||
else
|
||||
{
|
||||
// the mouse cursor is not located on item nor group
|
||||
address = null;
|
||||
dropPart = BetterListViewDropPart.Undefined;
|
||||
}
|
||||
|
||||
if (address != null)
|
||||
{
|
||||
// set insertion mark on the constructed location
|
||||
this.listView.InsertionMark = new BetterListViewInsertionMark(new BetterListViewInsertionLocation(address, dropPart));
|
||||
}
|
||||
else
|
||||
{
|
||||
// reset insertion mark
|
||||
this.listView.InsertionMark = BetterListViewInsertionMark.Empty;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Sub ListViewHitTestChanged(ByVal sender As Object, ByVal eventArgs As BetterListViewHitTestChangedEventArgs)
|
||||
|
||||
' get current hit test information
|
||||
Dim hitTestInfo As BetterListViewHitTestInfo = eventArgs.HitTestInfoNew
|
||||
|
||||
' get address and drop part to assembly an insertion mark location
|
||||
Dim address As BetterListViewAddress
|
||||
Dim dropPart As BetterListViewDropPart
|
||||
|
||||
If hitTestInfo.Item IsNot Nothing Then
|
||||
|
||||
' the mouse cursor is located on item
|
||||
address = hitTestInfo.Item.Address
|
||||
|
||||
If (hitTestInfo.ItemPart And BetterListViewHitPart.VCenter) = BetterListViewHitPart.VCenter Then
|
||||
|
||||
' the mouse cursor is located in the centre of the item - the insertion mark will point inside the item
|
||||
dropPart = BetterListViewDropPart.Inside
|
||||
|
||||
Else
|
||||
|
||||
' the mouse cursor is located on other parts of the item - the insertion mark will point before on after the item
|
||||
dropPart = (If(((hitTestInfo.ItemPart And BetterListViewHitPart.Bottom) = BetterListViewHitPart.Bottom), BetterListViewDropPart.After, BetterListViewDropPart.Before))
|
||||
|
||||
End If
|
||||
|
||||
ElseIf hitTestInfo.Group IsNot Nothing Then
|
||||
|
||||
' the mouse cursor is located on group
|
||||
address = hitTestInfo.Group.Address
|
||||
'NOTE: only Inside is allowed as drop part on groups
|
||||
dropPart = BetterListViewDropPart.Inside
|
||||
|
||||
Else
|
||||
|
||||
' the mouse cursor is not located on item nor group
|
||||
address = Nothing
|
||||
dropPart = BetterListViewDropPart.Undefined
|
||||
|
||||
End If
|
||||
|
||||
If address IsNot Nothing Then
|
||||
|
||||
' set insertion mark on the constructed location
|
||||
ListView.InsertionMark = New BetterListViewInsertionMark(New BetterListViewInsertionLocation(address, dropPart))
|
||||
|
||||
Else
|
||||
|
||||
' reset insertion mark
|
||||
ListView.InsertionMark = BetterListViewInsertionMark.Empty
|
||||
|
||||
End If
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-hit-test.html"><strong>
|
||||
« Hit Test</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-item-reorder.html"><strong>Item Reordering »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,580 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-TMSFLB4');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<script>
|
||||
function gainit()
|
||||
{
|
||||
ga('create', 'UA-16362539-4', 'auto');
|
||||
console.log('ga init');
|
||||
}
|
||||
window.onload=gainit;
|
||||
</script>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="keywords" content="better listview, list view, listview, list view control, list view component, .net list view, list view replacement, list view alternative, improved list view, enhanced list view" />
|
||||
<meta name="description" content="Better ListView is an alternative List View control - the ideal replacement for the regular .NET listview component. For WinForms C#/VB.net." />
|
||||
<meta name="author" content="ComponentOwl" />
|
||||
<meta http-equiv="Title" content="Better ListView for .NET (C#, VB) - Alternative list view component" />
|
||||
<meta name="copyright" content="(c) 2010-2018 ComponentOwl" />
|
||||
<meta name="distribution" content="Global" />
|
||||
<meta name="rating" content="General" />
|
||||
<meta name="robots" content="All" />
|
||||
<meta http-equiv="Content-Language" content="en" />
|
||||
<meta name="verify-v1" content="NK0H1gWia1vxGZ2Yhr59gsS0/P2/USBI1DVA18VkzjM=" />
|
||||
<meta name="google-site-verification" content="O7Dwtzu5x_Mob9u98uxqpZ-_wCLGpEkx2IL0UYVQ4ac" />
|
||||
<title>Better ListView for .NET (C#, VB) - Alternative list view component</title>
|
||||
<link rel="alternate" type="application/rss+xml" title="Component Owl Feed: Latest releases, news and tips & tricks from our blog" href="../../../feeds.rss" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Component Owl's Comics: Latest comic strips for developers by Libor Tinka" href="../../../comics.rss" />
|
||||
<link href="../../../stylesheets/base_packaged.css%3F1455269822.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TMSFLB4"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div class="d-page">
|
||||
|
||||
<div class="d-header d-placing">
|
||||
|
||||
<ul class="d-menu">
|
||||
<li class=""><a href="../../../index.html" class="menu-item">Home</a></li>
|
||||
<li class="active with-dropdown">
|
||||
<a href="../../../blog/page/6/index.html" class="menu-item">Products</a>
|
||||
<div class="dropdown dropdown-submenu" style="display: none; width: 370px"><div class="outer"><div class="shadowbox"><div class="border"><div class="inner">
|
||||
|
||||
<div class="dropdown-category">WinForms Components</div>
|
||||
|
||||
|
||||
<a href="../../../blog/page/6/index.html" class="featured-item"><img alt="icon" src="http://assets.componentowl.com/icons/better-listview-32-1355160256.png?1355135056" /> Better ListView<br /><span class="subline">Ultimate ListView control for .NET</span></a>
|
||||
|
||||
|
||||
<a href="../../../better-thumbnail-browser.html" class="featured-item"><img alt="icon" src="http://assets.componentowl.com/icons/better-thumbnail-browser-32-1355160281.png?1355135081" /> Better Thumbnail Browser<br /><span class="subline">Thumbnail loading and browsing control for .NET</span></a>
|
||||
|
||||
|
||||
<a href="../../../better-splitbutton.html"><img alt="icon" src="http://assets.componentowl.com/icons/better-splitbutton-32-1355160307.png?1355135107" /> Better SplitButton<br /><span class="subline">Free customizable dropdown button control</span></a>
|
||||
|
||||
|
||||
<a href="../../../better-listview-express.html"><img alt="icon" src="http://assets.componentowl.com/icons/better-listview-express-32-1355160327.png?1355135127" /> Better ListView Express<br /><span class="subline">Free edition with less features</span></a>
|
||||
|
||||
|
||||
</div></div></div></div></div>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="menu-item">Purchase</a>
|
||||
<div class="dropdown dropdown-submenu" style="display: none; width: 330px"><div class="outer"><div class="shadowbox"><div class="border"><div class="inner">
|
||||
|
||||
|
||||
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="featured-item">Better ListView</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../../../pricing-licensing/better-thumbnail-browser.html" class="featured-item">Better Thumbnail Browser</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="../../../pricing-licensing/better-splitbutton.html">Better SplitButton</a>
|
||||
|
||||
|
||||
|
||||
|
||||
</div></div></div></div></div>
|
||||
</li>
|
||||
<li class=""><a href="../../../support.html" class="menu-item">Support</a></li>
|
||||
<li class=""><a href="../../../articles.html" class="menu-item">Articles</a></li>
|
||||
<li class=""><a href="../../../blog.html" class="menu-item">Blog</a></li>
|
||||
<li class=""><a href="../../../comics/43.html" class="menu-item">Comics</a></li>
|
||||
<li class=""><a href="../../../about-us.html" class="menu-item">About Us</a></li>
|
||||
</ul>
|
||||
<div class="d-logo">
|
||||
<a href="../../../index.html" class="logoimg"><img alt="Component Owl" src="../../../images/componentowl.gif%3F1455269978" /></a>
|
||||
<g:plusone size="medium" count="false" href="http://www.componentowl.com"></g:plusone>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="d-placing">
|
||||
<div class="d-content-wrap">
|
||||
<div class="subpage product-content">
|
||||
<h1>Better ListView: Alternative list view control for .NET</h1>
|
||||
|
||||
<p class="section-info">Ideal .NET WinForms (C#, VB.net) replacement list view component. More features, less limitations, fast and optimized.</p>
|
||||
|
||||
<div class="sides">
|
||||
|
||||
<div class="right">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<input id="tabs-initial-index" name="tabs-initial-index" type="hidden" value="-1" />
|
||||
|
||||
<ul id="nav" class="nav">
|
||||
|
||||
<li><a href="../../../blog/page/6/index.html" class="current">Overview</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/screenshots.html" class="">Screenshots</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/comparison-table.html" class="">Comparison</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/resources.html" class="">Resources</a></li>
|
||||
|
||||
<li><a href="../../../better-listview/story.html" class="">Story</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="nav-panel" class="nav-panel product-detail"><div class="features-page">
|
||||
<ul class="common">
|
||||
<li>Better ListView is a <strong>list view control for .NET Windows Forms</strong></li>
|
||||
<li>Designed as a replacement for the regular .NET list view control.</li>
|
||||
<li>Compatible with: Visual Studio 2015, 2013, 2012, 2010, 2008, 2005, with full designer support.</li>
|
||||
<li>For C#, Visual Basic .NET (VB.NET), managed C++, and other CLI languages.</li>
|
||||
<li>Compatible with .NET 4.5, .NET 4, .NET 3.5, .NET 3, .NET 2, and newer. Supports .NET Client Profile.</li>
|
||||
<li>Runs on Windows 10, 8, 7, Vista, 2003, XP, 2000, and newer, both 32-bit and 64-bit.</li>
|
||||
<li>Better ListView has <strong>more features and flexibility</strong>, always uses the <strong>current system theme</strong> (including <strong>Aero</strong> support), and <strong>removes limitations</strong> of the regular .NET list view control.</li>
|
||||
<li><strong>Minimum learning needed</strong>. Better ListView can be used just like the regular list view.</li>
|
||||
<li>Written in <strong>pure managed C# code</strong>. It is fast, <strong>light-weight</strong> and optimized for 10k+ items.</li>
|
||||
<li>Easy royalty-free deployment. Single DLL file that has just 250kB when compressed.</li>
|
||||
<li>The assembly is <strong><a href="http://www.nist.gov/itl/fipsinfo.cfm" target="_blank">FIPS-compliant</a></strong>, CLS-compliant, <strong>digitally signed</strong> and strongly named.</li>
|
||||
<li>Tested in the real world by thousands of users</li>
|
||||
</ul>
|
||||
|
||||
<div class="image"><img alt="Better ListView control" src="http://assets.componentowl.com/images/7/Overview Collage_original_1367470843.png?1367445643" /></div>
|
||||
|
||||
<h2>Extra features summary</h2>
|
||||
|
||||
Better ListView is fast and flicker-free, supports hierarchical items, has improved grouping, better drag & drop and item reordering support, better column headers, inbuilt sorting, multi-column sorting, better images support, context menus for column headers and items, embedded controls for editing support, automatic and custom sizing of items and images, thumbnails view, richer event data, item text formatting, XML and binary serialization, data-binding, owner-drawing options, better tooltips, powerful hit-test, improved usability, easy saving/loading of contents into file or string, multi-line items, and more.
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
Component Owl created <b>the one and only tool I don’t want to be without when it comes to software developing in Visual Studio</b>. Also, I’ve been working as software user/developer for the last 26 years, and <b>I have never before experienced a support that really goes the needed extra mile to make things work</b>, like the guys at Component Owl do.
|
||||
</em></blockquote><strong>Göran Alfvén, Sweden</strong></div></div>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
The control is <b>very easy and intuitive to use and is well documented</b>.
|
||||
</em></blockquote><strong>DevProConnections.com Review</strong></div></div>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
Better List View is <b>awesome</b>.
|
||||
</em></blockquote><strong>Daniel N</strong></div></div>
|
||||
|
||||
<h3>Hierarchical items</h3>
|
||||
|
||||
You can create tree-like structures in Better ListView; inbuilt drag & drop hierarchical reordering of items.
|
||||
|
||||
<h3>Improved grouping</h3>
|
||||
|
||||
Better grouping – customizable group headers look and behavior, collapsible, image support, context menu support, focusable, etc. Each group header can be customized individually.
|
||||
|
||||
<h3>Save/load contents with 1 line of code</h3>
|
||||
|
||||
You can save or load the contents of Better ListView in just 1 line of code, either to file or string. Both XML and binary serialization is supported.
|
||||
|
||||
<h3>Double-buffered and flicker free</h3>
|
||||
|
||||
Simply put, Better ListView is smooth. Regular listview requires multiple anti-flicker techniques, but you do not have to worry about that with Better ListView. Better ListView is optimized for 100k+ items.
|
||||
|
||||
<h3>Column header images</h3>
|
||||
|
||||
You can use images in column headers. Custom image sizes are supported.
|
||||
|
||||
<div class="image"><img alt="Column Header Images" src="http://assets.componentowl.com/images/8/Column Header Images_original_1298620501.png?1298595301" /></div>
|
||||
|
||||
<h3>Sub-item images</h3>
|
||||
|
||||
You can set images to list view sub-items. Regular list view allows you to set only one image per list view item, but Better ListView can show image for every sub-item (in every column).
|
||||
|
||||
<h3>Image-List and Image Support</h3>
|
||||
|
||||
Better ListView supports both image list, or individual image objects (System.Drawing.Image). Regular list view forces you to use ImageList object.
|
||||
|
||||
<h3>Custom list view Image size</h3>
|
||||
|
||||
You can use any image size in the list view. Better ListView can also automatically resize images with preserving aspect ratio.
|
||||
|
||||
<h3>Drag & drop with insertion mark</h3>
|
||||
|
||||
Highly customizable drag-drop for both internal and external drag-drop. You can use drop highlight or insertion mark drag drop modes.
|
||||
|
||||
<div class="image"><img alt="List View Item Reordering Mark Preview" src="http://assets.componentowl.com/images/21/List View Item Reordering Mark Preview_original_1298631798.png?1298606598" /></div>
|
||||
|
||||
<h3>List view item reordering</h3>
|
||||
|
||||
Better ListView has inbuilt item reordering and item drag & drop inserting at the position specified by user. Drag & drop preview is shown using an insertion mark.
|
||||
|
||||
<h3>Column-header reordering</h3>
|
||||
|
||||
Better ListView has inbuilt easy drag & drop column header reordering that is much easier to use than in the regular list view. Insertion mark is shown, auto-scrolling is supported.
|
||||
|
||||
<div class="image"><img alt="Column Header Reordering With Insertion Mark" src="http://assets.componentowl.com/images/9/Column Header Reordering With Insertion Mark_original_1298621331.png?1298596131" /></div>
|
||||
|
||||
<h3>Auto-scroll for column header reordering and item reordering</h3>
|
||||
|
||||
Better ListView has inbuilt auto-scrolling for column header and item reordering.
|
||||
|
||||
<h3>Column headers can be shown in all views</h3>
|
||||
|
||||
Better ListView can display column headers in all views - Details, SmallIcons, LargeIcons, List, Tile, Thumbnails. This allows users to sort items in all views. Additionally, you can also hide the column headers even in the details view.
|
||||
|
||||
<div class="image"><img alt="Column Headers in LargeIcons View" src="http://assets.componentowl.com/images/10/Column Headers In LargeIcons View_original_1298622038.png?1298596838" /></div>
|
||||
|
||||
<h3>Thumbnails view mode</h3>
|
||||
|
||||
Better ListView supports additional "thumbnails" view mode that allows you to view images of large sizes. The images are automatically and smoothly resized with preserved aspect ratio. You can define the maximum/minimum desired image sizes.
|
||||
|
||||
<h3>Image shadows, borders and padding</h3>
|
||||
All images in Better ListView can have border or shadow specified. You can also specify padding that gives you space for owner drawing (eg. overlay images). This can be used in all views.
|
||||
|
||||
Image shadows like in Windows 7 theme are supported. Windows Explorer uses very similar shadows for image thumbnails.
|
||||
|
||||
<div class="image"><img alt="ListView Image Shadows and Image Borders" src="http://assets.componentowl.com/images/11/ListView Image Shadows and Image Borders_original_1298622678.png?1298597478" /></div>
|
||||
|
||||
<h3>Multi-column sorting</h3>
|
||||
|
||||
You can sort by multiple columns in Better ListView. Simply shift+click a secondary (or third, etc) column to add it to the current sort. Zero code needed. Additionally, the background of the primary (first) sort column can be highlighted.
|
||||
|
||||
<div class="image"><img alt="Multi Column Sort in List View" src="http://assets.componentowl.com/images/12/Multi Column Sort in List View_original_1298623013.png?1298597813" /></div>
|
||||
|
||||
<h3>Inbuilt sorting and natural sorting</h3>
|
||||
|
||||
Better ListView has inbuilt list view sorting that works out of the box. You no longer need to implement your own item comparer. If custom comparer is needed, you can inherit from the Better ListView comparer to save time.
|
||||
|
||||
<h3>Richer event data</h3>
|
||||
|
||||
Many events have richer event data that allow you to do extra operations or tell you extra useful information. The richer events include: AfterItemSort, BeforeDrag, BeforeItemSort, ColumnClick (allows you to cancel sort), DragDropException, DrawBackground, DrawColumnHeaderBackground, DrawColumnHeader, DrawItemBackground, DrawItem, HitTestChanged, ItemActivate (event data tells you how the item got activated - mouse, keyboard or code), ItemDrag, ItemDrop, ItemReorder, ItemSearch, LabelEdit, RequestEmebeddedControl.
|
||||
|
||||
<h3>Checkboxes in all views</h3>
|
||||
|
||||
You can have checkboxes in LargeIcons view, SmallIcons view, List view, Thumbnails view and of course also in the Details view.
|
||||
|
||||
<div class="image"><img alt="Checkboxes In LargeIcons View" src="http://assets.componentowl.com/images/13/Checkboxes In LargeIcons View_original_1298623385.png?1298598185" /></div>
|
||||
|
||||
<h3>Three state checkboxes</h3>
|
||||
Three state checkboxes are supported in Better ListView:
|
||||
|
||||
<div class="image"><img alt="Three-State Checkboxes in List View" src="http://assets.componentowl.com/images/14/Three State Checkboxes in List View_original_1298624577.png?1298599377" /></div>
|
||||
|
||||
<h3>Hide or show checkboxes of specific ListView Items</h3>
|
||||
|
||||
You can hide checkbox for any ListViewItem. You can also show checkboxes only for specified items. All list items in Better ListView have "AllowShowCheckBox" property.
|
||||
|
||||
<div class="image"><img alt="Show or hide checkboxes for specific listview items" src="http://assets.componentowl.com/images/23/show-or-hide-checkboxes-for-specific-listview-items_original_1299748307.png?1299723107" title="Show or hide checkboxes for specific listview items" /></div>
|
||||
|
||||
<h3>Powerful list view tooltips</h3>
|
||||
|
||||
You can display tooltips for nearly any part of Better ListView - tooltips for items, sub-items, checkboxes, item images, sub-item images, column headers, column header images, column header borders, and even for custom areas (regions). Owner-drawn tooltips are supported.
|
||||
|
||||
<div class="image"><img alt="List View Regional Tooltips and Owner Drawn Tooltips" src="http://assets.componentowl.com/images/15/List View Tooltips Region And Owner Drawn Tooltips_original_1298632357.png?1298607157" /></div>
|
||||
|
||||
<h3>Uses current Windows theme</h3>
|
||||
|
||||
Instead of implementing custom, un-native look and feel, Better ListView always automatically fully uses the current system theme. It supports Aero as well. Better ListView always looks great and feels right to the user.
|
||||
|
||||
<h3>XML and binary serialization of everything</h3>
|
||||
|
||||
Every part of Better ListView (items, sub-items, column headers) can be both binary and XML serialized. You can easily XML serialize whole list view (or binary serialize) to save it to file or transfer items between controls. Standard ways of .NET serialization can be used (BinaryFormatter, XmlSerializer).
|
||||
|
||||
<h3>Owner drawing</h3>
|
||||
|
||||
Better ListView allows you to draw over the client area, items and column headers. Contrary to .NET ListView, owner drawing is fully operational even when the system uses Aero theme. You can draw separately to background and foreground parts of Better ListView without worrying about proper drawing order. Owner drawing events provide rich data, including exact item state and areas of every item part.
|
||||
|
||||
<div class="image"><img alt="List View Owner Drawing Background Gradient" src="http://assets.componentowl.com/images/22/List View Owner Drawing Background Gradient_original_1298633053.png?1298607853" /></div>
|
||||
|
||||
<h3>Multi-line items</h3>
|
||||
|
||||
Better ListView supports multi-line items. Items with very long text can be displayed on multiple lines. Highly customizable and powerful: Focused items can have custom number of lines; hard line breaks supported as well. Foreground overlay "watermark" images are easily achievable using owner-drawing.
|
||||
|
||||
<div class="image"><img src="http://assets.componentowl.com/screenshots/21/multi-line-items_original_1312133213.png?1312133213" alt="Multi-line items"></div>
|
||||
|
||||
<h3>Background image support</h3>
|
||||
|
||||
Display background image in Better ListView easily using the BackgroundImage property. Many layouts (stretch, tile, none), alignments (top, bottom, left, right, center and combinations) are supported, as well as customizable opacity.
|
||||
|
||||
<div class="image"><img alt="ListView Background Image" src="http://assets.componentowl.com/images/27/Background-Images_original_1326106027.png?1326080827" title="ListView Background Image" /></div>
|
||||
|
||||
<h3>Context menu for column headers, list items, and empty area</h3>
|
||||
|
||||
Better ListView supports 3 types of context menus: Column header context menu, list view items context menu, and empty area context menu (when right-clicking white space).
|
||||
|
||||
<div class="image"><img alt="Column Header Context Menu in List View" src="http://assets.componentowl.com/images/17/Column Header Context Menu in List View_original_1298721855.png?1298696655" /></div>
|
||||
|
||||
<h3>Advanced hit-test with detailed information</h3>
|
||||
The hit test in Better ListView returns very detailed information. It tells you not only the location (Client Area, Sub-Item, Sub-Item Text, Sub-Item Image, Checkbox, Column Header Image, and many more), but it also tells you the state of the item, and part of the item (left or right).
|
||||
|
||||
<div class="image"><img alt="Advanced Hit-Test With Detailed Information" src="http://assets.componentowl.com/images/26/Advanced-Hit-Test_original_1326105831.png?1326080631" title="Advanced Hit-Test With Detailed Information" /></div>
|
||||
|
||||
<h3>Customizable search-by-typing</h3>
|
||||
|
||||
Better ListView has excellent customization functionality for find-as-you-type item searching. The search modes include: Prefix (searchs from beginning of items), Substring (search any part of item text), Prefix + Substring, or Disabled. Additionally, search options include: Case sensitive, search first word only, play sound when item not found, prefer prefixes, search whole words. You can also restrict the search to only certain columns. You can also call "FindItemsWithText" function to find items from code.
|
||||
|
||||
<h3>Display text when the list view is empty</h3>
|
||||
You can display a gray text centered in the list view if it's empty to hint or educate users. This will make your software more user friendly.
|
||||
|
||||
<div class="image"><img alt="Show Text When List View is Empty" src="http://assets.componentowl.com/images/18/Show Text When List View is Empty_original_1298629916.png?1298604716" /></div>
|
||||
|
||||
<h3>Embed controls for item editing</h3>
|
||||
Inbuilt in-line editing support includes label edit, combobox edit, date picker edit. You can also embed any custom control for in-line editing. Sub-item editing is supported. Highly customizable.
|
||||
|
||||
<div class="image"><img alt="Custom Embedded Control in List View for Editing" src="http://assets.componentowl.com/images/19/Custom Embedded Control in List View for Editing_original_1298630263.png?1298605063" /></div>
|
||||
|
||||
<h3>ListView item text formatting</h3>
|
||||
|
||||
Supports both text trimming and auto-ellipsis for text that's too long. You can choose from: TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath (for file paths). Column header text can be broken into multiple lines.
|
||||
|
||||
<h3>Focusable ListView sub-items and groups</h3>
|
||||
|
||||
Focus sub-items or groups in Better ListView easily with keyboard. Just use the arrow keys. (This is impossible with the regular .NET ListView)
|
||||
<div class="image"><img alt="Focusable sub-items in Better ListView" src="http://assets.componentowl.com/images/25/focus-list-view-sub-items_original_1313674098.png?1313648898" title="Focusable sub-items in Better ListView" /></div>
|
||||
|
||||
<h3>Automatic list view layout</h3>
|
||||
|
||||
Better ListView can auto-size item images, item text, column header images, column header text.
|
||||
|
||||
<h3>Custom list view item size</h3>
|
||||
|
||||
You can set custom sizes for item text area and item images. You can also set custom size for column header text area and column header images. (Text area size is different from font size, text area size basically defines the size of the list view item.) This enables you to make tiny/huge column headers or list view items.
|
||||
|
||||
<div class="image"><img alt="Custom Item Size in List View" src="http://assets.componentowl.com/images/20/Custom Item Size in List View_original_1298630739.png?1298605539" /></div>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
It's an odd thing when you're inspired by a form component, but Component Owl
|
||||
with their Better ListView has done it. Love its native feel.
|
||||
</em></blockquote><strong>Daniel N, USA</strong></div></div>
|
||||
|
||||
<h2>More advantages of our improved list view component:</h2>
|
||||
<ul class="common">
|
||||
<li><strong>Developer friendly</strong>: All classes and properties are as similar to the regular list view as possible. Everything is intuitive, very little learning is needed. You can use Better ListView immediately. <strong>Save time and ship sooner</strong>.</li>
|
||||
<li><strong>Better ListView has improved usability and fixed behavior</strong>. All Windows users are familiar with the list view used in Windows Explorer. Better ListView mimicks behavior and look & feel of the Windows Explorer list view as much as possible to leverage the existing user knowledge. <strong>Using Better ListView is pleasant for users.</strong> Many other list view components implement custom look and behavior and can oftentimes downright frustrate users (many controls don't even support mouse-wheel scrolling!) This doesn't happen with Better ListView.</li>
|
||||
<li><strong>Guaranteed support and continued development</strong>: Better ListView is developed as a joint-venture of two software companies that use Better ListView in their main products (popular <strong><a href="http://www.dextronet.com/swift-to-do-list-software" target="_blank">Swift To-Do List</a></strong> and <strong><a href="http://www.imagingshop.com" target="_blank">ImagingShop</a></strong>). These applications are used by thousands of users daily. This is your guarantee that Better ListView will be supported and developed in the future.</li>
|
||||
<li><strong>Tested in real world applications by thousands of users</strong>: Because Better ListView is used in professional consumer desktop software applications - Swift To-Do List and ImagingShop, thousands of users work with Better ListView every day. Although we use unit tests that cover most of code, and do thorough inhouse testing, this is your true guarantee that it is tested thoroughly in the real world. It is <strong>extremely stable</strong>.</li>
|
||||
<li>Better ListView does <strong>not</strong> inherit from the regular .NET list view. It is written in pure managed C# code and is flexible, light weight, and fast. Extensions of the regular .net list view only go so far. Better ListView goes further. Soure code licenses are also available for ultimate customization.</li>
|
||||
</ul>
|
||||
|
||||
<div class="testimonial-intext"><div class="testimonial-wrap"><blockquote><em>
|
||||
In addition to creating a new List View control to incorporate <b>broader flexibility and functionality</b>, Better ListView could also be called <b>Fixed ListView</b>, as it corrects a number of annoying problems with the standard List View that Microsoft delivers to Visual Studio customers.
|
||||
</em></blockquote><strong>DevProConnections.com Review</strong></div></div>
|
||||
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
|
||||
<div class="buttons-box">
|
||||
<a onclick="ga('send', 'event', 'trial', 'click');" data-sumome-listbuilder-id="4016d967-e098-487d-a20e-da328d2345df" class="standard-download image-link">Download Free Trial - With sample projects</a>
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="standard-buy image-link">See Pricing & Licensing</a>
|
||||
<p>Version 3.15 / May 27, 2015</p>
|
||||
</div>
|
||||
<div class="compatibility">
|
||||
<p><strong>Seamless integration with .NET 2.0 and higher</strong></p>
|
||||
<div class="documentation">
|
||||
<p><a href="../../../better-listview/quick-start-guide.html" onclick="window.open(this.href); return false">See Quick Start Guide</a></p>
|
||||
<p><a href="../../../better-listview/documentation.html" onclick="window.open(this.href); return false">See Documentation</a></p>
|
||||
|
||||
<p><a href="../../../better-listview/class-reference.html" onclick="window.open(this.href); return false">See Class Reference</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/15/blv-overview_original_1326499754.png?1326474554" class="screenshot" title="Better ListView control"><img alt="Better ListView" src="http://assets.componentowl.com/screenshots/15/blv-overview_thumb_1326499754.png?1326474554" /></a></p>
|
||||
</div>
|
||||
<div class="newsletter">
|
||||
<form action="http://www.componentowl.com/subscriptions" class="new_subscription" id="new_subscription_product" method="post" onsubmit="if (!validate_newsletter_form(this)) return false; jQuery.ajax({data:jQuery.param(jQuery(this).serializeArray()) + '&authenticity_token=' + encodeURIComponent('dJeFtbWrARc0arEomU+SG+XtypwJr2F4Kc9v14woStM='), dataType:'script', type:'post', url:'/subscriptions'}); return false;"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="dJeFtbWrARc0arEomU+SG+XtypwJr2F4Kc9v14woStM=" /></div> <input id="subscription_subscription_location_id" name="subscription[subscription_location_id]" type="hidden" value="512994065" />
|
||||
<input id="form_id" name="form_id" type="hidden" value="#new_subscription_product" />
|
||||
<strong>Receive product updates<br />and news via email:</strong>
|
||||
<div><input class="email inline-label" id="product-newsletter-email" name="subscription[email]" size="30" type="text" value="Your Email" /></div>
|
||||
<div id="product-newsleter-lists" class="subscription-lists-ct" style="display: none"><input name="subscription[subscription_list_ids][]" type="hidden" value="970100327" />
|
||||
<input name="subscription[subscription_list_ids][]" type="hidden" value="1009842129" /></div>
|
||||
<span class="dbtn-c subscribe dbtn-small" id="send"><span class="dbtn-w"><input class="dbtn" name="commit" type="submit" value="Subscribe" /></span></span>
|
||||
</form></div>
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/16/thumbnails_original_1312133021.png?1312107821" class="screenshot" title="Image thumbnails in groups"><img alt="Thumbnails" src="http://assets.componentowl.com/screenshots/16/thumbnails_thumb_1312133021.png?1312107821" /></a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/21/multi-line-items_original_1312133213.png?1312108013" class="screenshot" title="Items with multi-line text"><img alt="Multi-line Items" src="http://assets.componentowl.com/screenshots/21/multi-line-items_thumb_1312133213.png?1312108013" /></a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="screenshot">
|
||||
<p><a href="http://assets.componentowl.com/screenshots/18/betterlistview-tree-hierarchy_original_1313676477.png?1313651277" class="screenshot" title="Items organized in a tree-like hierarchy"><img alt="Item Hierarchy" src="http://assets.componentowl.com/screenshots/18/betterlistview-tree-hierarchy_thumb_1313676477.png?1313651277" /></a></p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="small-button-ct">
|
||||
<a href="../../../better-listview/screenshots.html" class="small-button"><span>More Screenshots</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="buttons-wrap">
|
||||
<div class="buttons">
|
||||
<a onclick="ga('send', 'event', 'trial', 'click');" data-sumome-listbuilder-id="4016d967-e098-487d-a20e-da328d2345df" class="standard-download image-link">Download Free Trial - With sample projects</a>
|
||||
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="standard-buy image-link">See Pricing & Licensing</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="screenshot-buttons" style="display: none">
|
||||
<div class="buttons">
|
||||
<a href="../../../betterlistview.exe" class="small-download image-link" onclick="download_email('better-listview');">Free Download</a>
|
||||
<a href="../../../pricing-licensing/better-listview.html" class="small-buy image-link">See Pricing & Licensing</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="d-footer">
|
||||
<div class="d-placing">
|
||||
|
||||
<div class="left">
|
||||
<div class="latest-posts">
|
||||
<h3 class="latest_from_blog"><a href="../../../blog.html">Latest From Our Blog</a></h3>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=927.html">Activation issues and how to solve them</a></h4>
|
||||
<div class="post-info">Wednesday, 01 March 2017</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=921.html">The Three Main Advantages Better ListView has Over the Classic .NET Framework</a></h4>
|
||||
<div class="post-info">Thursday, 09 February 2017</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=914.html">BLV and Internet Explorer</a></h4>
|
||||
<div class="post-info">Sunday, 13 November 2016</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=906.html">Centering Images in Better ListView Sub-items</a></h4>
|
||||
<div class="post-info">Wednesday, 06 August 2014</div>
|
||||
|
||||
<h4><a href="../../../blog/index.html%3Fp=901.html">Sub-item Check Boxes in Better ListView</a></h4>
|
||||
<div class="post-info">Sunday, 06 July 2014</div>
|
||||
|
||||
</div>
|
||||
<div class="other-posts"><a href="../../../blog.html">See more posts »</a></div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="news">
|
||||
<ul class="links">
|
||||
<li><a href="../../../feeds.rss" class="rss">Subscribe to our RSS</a></li>
|
||||
<li><a href="http://twitter.com/ComponentOwl" class="twitter">Follow us on twitter</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better ListView Express 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../betterlistviewexpress.exe" onclick="download_email('better-listview-express');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better ListView 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../betterlistview.exe" onclick="download_email('better-listview');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better SplitButton 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../bettersplitbutton.exe" onclick="download_email('better-splitbutton');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item ">
|
||||
<div class="date">27<span>May</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better Thumbnail Browser 3.15 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../betterthumbnailbrowser.exe" onclick="download_email('better-thumbnail-browser');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item last-item">
|
||||
<div class="date">08<span>Apr</span></div>
|
||||
<div class="message">
|
||||
|
||||
<h4>Better ListView Express 3.14.0 released!</h4>
|
||||
<p>
|
||||
|
||||
<a href="../../../better-listview-express/releases%3Fsince=3.14.0.html">See what's new</a>
|
||||
or
|
||||
|
||||
<a href="../../../betterlistviewexpress.exe" onclick="download_email('better-listview-express');">Download latest release</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="d-placing">
|
||||
<hr />
|
||||
<div class="copy"><div class="social"><a href="../../../support.html" class="feedback">Contact Us (Feedback)</a> <span>|</span> <a href="../../../feeds.rss" class="rss">RSS</a> <span>|</span> <a href="https://twitter.com/ComponentOwl" class="twitter">Twitter</a> <span>|</span> <a href="../../../sitemap.html" class="sitemap">Sitemap</a> <span>|</span> Our <a href="../../../index.html" class="stdl">task management software</a> that uses Better ListView</div>
|
||||
Copyright © 2021 ComponentOwl.com, All rights reserved. Read our <a href="../../../eula.html">EULA</a>, <a href="../../../disclaimer.html">Disclaimer</a> and <a href="../../../privacy-policy.html">Privacy Policy</a>.<br /></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../../javascripts/app_packaged.js%3F1455269826" type="text/javascript"></script>
|
||||
<script async>(function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='854b5e00f297990012cc230023375a00787c0000216621002775a800d79ad500';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Item Reordering</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-insertion-mark.html"><strong>
|
||||
« Insertion Mark</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-items.html"><strong>Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Item Reordering</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="images"><img src="item-reorder.png"></p>
|
||||
|
||||
<p>Changing item order by dragging items can be turned on by setting
|
||||
<span class="code">ItemReorderMode</span> to one of the following values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Disabled</span><ul style="list-style:none"><li>
|
||||
<p>Item reordering is disabled (default value).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Enabled</span><ul style="list-style:none"><li>
|
||||
<p>Item reordering is enabled and automatic.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Custom</span><ul style="list-style:none"><li>
|
||||
<p>Item reordering is enabled, but the actual reordering is up to
|
||||
the user.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The reordering is realized through Drag and Drop mechanism.</p>
|
||||
|
||||
<p>Item reordering can supports groups and item hierarchy.</p>
|
||||
|
||||
<p>Target location of reordered items is displayed using <strong><em><a href="chapter-insertion-mark.html">Insertion mark</a></em></strong>. If the
|
||||
reordering cannot be performed (e.g. when inserting item between its own
|
||||
children), then the insertion mark is displayed as disabled and the
|
||||
reordering will not be performed.</p>
|
||||
|
||||
<h2>Reordering Options</h2>
|
||||
|
||||
|
||||
<p>There are several item reordering options to adjust the feature for
|
||||
working with groups and hierarchical items. These options can be used as
|
||||
flags of the enumm property <span class="code">ItemReorderOptions</span>:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">AllowCreateChild</span><ul style="list-style:none"><li>
|
||||
<p>Allow creating a child items by inserting item into another
|
||||
item without children.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AutoCollapse</span><ul style="list-style:none"><li>
|
||||
<p>Collapse item with children prior to reordering.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">KeepGroups</span><ul style="list-style:none"><li>
|
||||
<p>Do not change item groups when reordering.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">KeepItemHierarchy</span><ul style="list-style:none"><li>
|
||||
<p>Keep parent-child item relations when reordering.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>No options are active.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SameParentOnly</span><ul style="list-style:none"><li>
|
||||
<p>Allow reordering items with same parent item only.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>None of the extra options are on by default so the default value is
|
||||
<span class="code">ItemReorderOptions.None</span>.</p>
|
||||
|
||||
|
||||
<h2>Auto-Expansion Checking</h2>
|
||||
|
||||
|
||||
<p>Auto expansion checking is performed during item reordering and
|
||||
looks whether it is valid to auto expand item over which mouse cursor
|
||||
hovers. By default, there is only one situation when auto expansion is not
|
||||
allowed: Item which is auto-collapsed will not be than auto-expanded
|
||||
again.</p>
|
||||
|
||||
<p>It is possible to add custom checking (e.g. when some items or
|
||||
groups should not expand when user drags items over it) by handling
|
||||
<span class="code">CheckAutoExpand</span> event and than set
|
||||
<span class="code">BetterListViewCheckAutoExpandEventArgs.IsValid</span> to
|
||||
<span class="code">false</span> whenever you want to deny auto-expansion. Event data
|
||||
contains both source and target items.</p>
|
||||
|
||||
|
||||
<h2>Item Reordering Checking</h2>
|
||||
|
||||
|
||||
<p>Checking for item reorder validity is performed during item
|
||||
reordering. It looks for possible reasons why the reordering may not be
|
||||
valid (e.g. reordering parent item into itself) and sets
|
||||
<span class="code">BetterListViewItemReorderEventArgs.InvalidationReasons</span>
|
||||
property. The property can have the following flags:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>None<ul style="list-style:none"><li>
|
||||
<p>Item reorder is valid.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>NotTopLevel<ul style="list-style:none"><li>
|
||||
<p>Item reorder is invalid in case of data binding when other
|
||||
than top-level item is being reordered.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>NotSameParent<ul style="list-style:none"><li>
|
||||
<p>Item is being reordered under different parent when
|
||||
SameParentOnly item reordering option is turned on.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>PutInItself<ul style="list-style:none"><li>
|
||||
<p>Item is being reordered under itself.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>AnotherGroup<ul style="list-style:none"><li>
|
||||
<p>Item is being reordered in differenet group while changing
|
||||
groups is not allowed.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>Custom<ul style="list-style:none"><li>
|
||||
<p>User-specified reason for invalid item reorder.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You can override the <span class="code">OnCheckItemReorder</span> method or add
|
||||
<span class="code">CheckItemReorder</span> event handler to add your own
|
||||
validation.</p>
|
||||
|
||||
<p>Event data contains read-only property called <span class="code">IsValid</span>,
|
||||
which is true whenever <span class="code">InvalidationReasons</span> property is equal
|
||||
to <span class="code">BetterListViewInvalidationReasons.None</span>.</p>
|
||||
|
||||
<p>Item reorder validity influences appearance of insertion mark (will
|
||||
be displayed in disabled state) and whether the reordering will be
|
||||
performed.</p>
|
||||
|
||||
|
||||
<h2>Item Reordering Info</h2>
|
||||
|
||||
|
||||
<p>When user releases mouse button, the <span class="code">ItemReorder</span> event
|
||||
is raised. You can find useful properties in the event data:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>Locations<ul style="list-style:none"><li>
|
||||
<p>Item locations before and after reordering structured as
|
||||
key-value pairs within dictionary.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>SourceItems<ul style="list-style:none"><li>
|
||||
<p>Items being reordered.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>TargetAddress<ul style="list-style:none"><li>
|
||||
<p>Target item address before reordering.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>TargetAddressAdjusted<ul style="list-style:none"><li>
|
||||
<p>Target item address after reordering. When doing custom
|
||||
reordering, this <strong><em>adjusted</em></strong> address is relevant
|
||||
when source items are removed from the list.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Columns.Add("column");
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"first item",
|
||||
"second item",
|
||||
"third item",
|
||||
"fourth item",
|
||||
"fifth item"
|
||||
});
|
||||
|
||||
// enable item reordering
|
||||
this.listView.ItemReorderMode = BetterListViewItemReorderMode.Enabled;
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
ListView.Columns.Add ("column")
|
||||
|
||||
ListView.Items.AddRange (
|
||||
New String() { _
|
||||
"first item",
|
||||
"second item",
|
||||
"third item",
|
||||
"fourth item",
|
||||
"fifth item"
|
||||
})
|
||||
|
||||
' enable item reordering
|
||||
ListView.ItemReorderMode = BetterListViewItemReorderMode.Enabled
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-insertion-mark.html"><strong>
|
||||
« Insertion Mark</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-items.html"><strong>Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,360 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Items</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-item-reorder.html"><strong>
|
||||
« Item Reordering</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-label-edit.html"><strong>Label Editing »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Items</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView items can be selected or their check state changed in
|
||||
two ways - setting properties on items or using specific collections.</p>
|
||||
|
||||
<h2>Selecting Items</h2>
|
||||
|
||||
|
||||
<p>The easy way to select or deselect some item is to set
|
||||
<span class="code">BetterListViewItem.Selected</span> property to
|
||||
<span class="code">true</span>.</p>
|
||||
|
||||
<p>When you need to select multiple items, it would be more efficient
|
||||
to use one of these collections:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListView.SelectedIndices</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListView.SelectedItems</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>These properties have only getter, so to edit selection, simply
|
||||
modify the collection. For example, the code to select all items in the
|
||||
list would look like this:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.SelectedItems.Set(listView.Items);</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.SelectedItems.Set(listView.Items)</code></pre>
|
||||
|
||||
<p>In addition to standard collection operations
|
||||
(<strong><em>add</em></strong>, <strong><em>remove</em></strong>,
|
||||
<strong><em>clear</em></strong>...) the collections provide a <span class="code">Set</span>
|
||||
method allowing to change selection from one set of items to
|
||||
another.</p>
|
||||
|
||||
<p>Note that when you use <span class="code">SelectedIndices</span>, you obtain and
|
||||
can set only indices of top-level items, while <span class="code">SelectedItems</span>
|
||||
allows you to set selections for hierarchical items as well.</p>
|
||||
|
||||
<p>If you are accustomed to use <strong><em><a href="chapter-data.html">Data Binding</a></em></strong>, the following
|
||||
properties provide you the means for selecting items via addressing
|
||||
objects they represent:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListView.SelectedValue</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListView.SelectedValues</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Checking Items</h2>
|
||||
|
||||
|
||||
<p>To change check state of some item, set
|
||||
<span class="code">BetterListViewItem.Checked</span> or
|
||||
<span class="code">BetterListViewItem.CheckState</span> property. The
|
||||
<span class="code">CheckState</span> property allows you to set indeterminate state of
|
||||
items (supported if <span class="code">BetterListView.CheckBoxes</span> property is set
|
||||
to <span class="code">ThreeState</span>), while <span class="code">Checked</span> is just for
|
||||
checked/unchecked state.</p>
|
||||
|
||||
<p>When you need to check multiple items, it would be more efficient to
|
||||
use one of these collections:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListView.SelectedIndices</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListView.SelectedItems</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>These properties have only getter, so to edit selection, simply
|
||||
modify the collection. For example, the code to un-check all items in the
|
||||
list would look like this:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.CheckedItems.Clear();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.CheckedItems.Clear()</code></pre>
|
||||
|
||||
<p>In addition to standard collection operations
|
||||
(<strong><em>add</em></strong>, <strong><em>remove</em></strong>,
|
||||
<strong><em>clear</em></strong>...) the collections provide a <span class="code">Set</span>
|
||||
method allowing to change selection from one set of items to
|
||||
another.</p>
|
||||
|
||||
<p>Note that when you use <span class="code">CheckedIndices</span>, you obtain and
|
||||
can set only indices of top-level items, while <span class="code">CheckedItems</span>
|
||||
allows you to set selections for hierarchical items as well.</p>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">The <span class="code">CheckedItems</span> and <span class="code">CheckedIndices</span>
|
||||
collections do not contain items in indeterminate check state.</p>
|
||||
<hr>
|
||||
<br><h2>Detecting selection and check state changes</h2>
|
||||
|
||||
|
||||
<p>Better ListView provides several events to detect when selection or
|
||||
check state of items change:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">CheckedItemsChanged</span><ul style="list-style:none"><li>
|
||||
<p>Raised when value of <span class="code">CheckedItems</span> property has
|
||||
changed. It is raised once every time check state of items changes,
|
||||
even when multiple items are checked in one operation.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ItemCheck</span><ul style="list-style:none"><li>
|
||||
<p>Raised when item check state is about to change. You can
|
||||
cancel the check operation in the event handler. If multiple items
|
||||
change its check state, this event is raised multiple times.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ItemChecked</span><ul style="list-style:none"><li>
|
||||
<p>Raised after an item has been checked. If multiple items
|
||||
change its check state, this event is raised multiple times.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ItemSelectionChanged</span><ul style="list-style:none"><li>
|
||||
<p>Raised for every item whose <span class="code">Selected</span> property has
|
||||
changed. If multiple items has been selected and de-selected, this
|
||||
event will be raised multiple times.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SelectedIndexChanged</span><ul style="list-style:none"><li>
|
||||
<p>Raised when index of the focused selected item has been
|
||||
changed. This event is useful when only single item can be selected
|
||||
(i.e. <span class="code">MultiSelect</span> is set to <span class="code">false</span>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SelectedItemsChanged</span><ul style="list-style:none"><li>
|
||||
<p>Raised when value of <span class="code">SelectedItems</span> property has
|
||||
changed. It is raised once every time selection changes, even when
|
||||
multiple items are selected in one operation (e.g. Shift+click on
|
||||
some item).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>It should be noted that selection is tied with Better ListView,
|
||||
rather than with individual items. So if you move item from one ListView
|
||||
to another, the selection state of the item is <strong><em>not</em></strong>
|
||||
preserved.</p>
|
||||
|
||||
<p>On the other hand, check state is a property of each item. If you
|
||||
move item from one ListView to another, check state of the item is
|
||||
preserved.</p>
|
||||
|
||||
<p>When you need to determine how the check state has been changed, use
|
||||
the <span class="code">CheckStateChangeMode</span> property of ItemCheck,
|
||||
<span class="code">ItemCheck</span> or <span class="code">CheckedItemsChanged</span> event data. It
|
||||
can have one of three values (the fourth value of enumeration is not
|
||||
used):</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Keyboard</span><ul style="list-style:none"><li>
|
||||
<p>Check state changed by keyboard.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Mouse</span><ul style="list-style:none"><li>
|
||||
<p>Check state changed by mouse.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">UserCode</span><ul style="list-style:none"><li>
|
||||
<p>Check state change from user code.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Undefined</span><ul style="list-style:none"><li>
|
||||
<p>Check state change not defined. Not used in event data.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Check If Any Item Is Selected</h2>
|
||||
|
||||
|
||||
<p>To check if there is any item selected, use
|
||||
<span class="code">IsAnythingSelected</span> boolean property.</p>
|
||||
|
||||
<p>You can also test whether <span class="code">SelectedItems.Count</span> or
|
||||
<span class="code">SelectedIndcies.Count</span> is equal to zero, but the above
|
||||
property provides potentially faster response.</p>
|
||||
|
||||
|
||||
<h2>Hiding and Preserving Selections</h2>
|
||||
|
||||
|
||||
<p>By default, when Better ListView loses focus, selections on items
|
||||
disappears.</p>
|
||||
|
||||
<p>To preserve display of item selection, set
|
||||
<span class="code">HideSelection</span> property to <span class="code">false</span>. This will cause
|
||||
selections on unfocused control to be displayed in disabled state.</p>
|
||||
|
||||
<p>If you need to draw selection always highlighted, use the
|
||||
<span class="code">HideSelectionMode</span> property, which is more thorough than
|
||||
<span class="code">HideSelection</span>. The following images show unfocused Better
|
||||
ListView with <span class="code">HideSelectionMode</span> property set to
|
||||
<span class="code">Hide</span>, <span class="code">Disable</span> and
|
||||
<span class="code">KeepSelection</span>:</p>
|
||||
|
||||
<p class="images"><img src="items-hide.png"><img src="items-disable.png"><img src="items-keep.png"></p>
|
||||
|
||||
|
||||
<h2>Non-selectable Items</h2>
|
||||
|
||||
|
||||
<p>Every item can is selectable by default. When
|
||||
<span class="code">BetterListViewItem.Selectable</span> property is set to
|
||||
<span class="code">false</span>, the item can no longer be selected by keyboard or
|
||||
mouse. These items can still be selected from user code (e.g. calling
|
||||
<span class="code">SelectedItems.Add</span>).</p>
|
||||
|
||||
<p>The following images show that non-selectable items can be used as
|
||||
separators (with owner drawing) and simply as disabled items - the
|
||||
non-selectable items can still be expanded/collapsed if contain
|
||||
children:</p>
|
||||
|
||||
<p class="images"><img src="items-nonselectable1.png"><img src="items-nonselectable2.png"></p>
|
||||
|
||||
|
||||
<h2>Circular Selection</h2>
|
||||
|
||||
|
||||
<p>Sometimes it is pleasant to connect the first and the last item so
|
||||
that the focus and selection can move from the last item to the first one
|
||||
and vice versa.</p>
|
||||
|
||||
<p>This behavior can be turned by setting
|
||||
<span class="code">CircularSelection</span> property to <span class="code">true</span>.</p>
|
||||
|
||||
<p>The following image shows how selection moves when circular
|
||||
selection is active and the user is pressing down arrow:</p>
|
||||
|
||||
<p class="images"><img src="items-circular.png"></p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="combined-items" id="combined-items"></a>Combined Items</h2>
|
||||
|
||||
|
||||
<p>Parent and child items can be selected separately, by default. You
|
||||
can combine parent and child items to behave just like a single item by
|
||||
setting <span class="code">BetterListViewItem.AllowSelectChildItems</span> to
|
||||
<span class="code">false</span>.</p>
|
||||
|
||||
<p>Even when combined, child items can use individual check boxes and
|
||||
can be detected with a hit test (see <strong><em><a href="chapter-hit-test.html">Hit Test</a></em></strong> for more
|
||||
information).</p>
|
||||
|
||||
<p>The following screenshots show combined items in action:</p>
|
||||
|
||||
<p class="images"><img src="items-combineditems1.png"><img src="items-combineditems2.png"></p>
|
||||
|
||||
<p>To determine which item is actually the "selectable parent" one, use
|
||||
a <span class="code">BetterListViewItem.SelectableItem</span> property. The child items
|
||||
provide reference to parent item with <span class="code">AllowSelectChildItems</span>
|
||||
property set to <span class="code">false</span> in the
|
||||
<span class="code">BetterListViewItem.SelectableItem</span> property.</p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="hide-items" id="hide-items"></a>Hiding Items</h2>
|
||||
|
||||
|
||||
<p>Items can be hidden by setting
|
||||
<span class="code">BetterListViewItem.Visible</span> property to
|
||||
<span class="code">false</span>.</p>
|
||||
|
||||
<p>The hiding affects only display of the item, the item is still
|
||||
present in its owner collection.</p>
|
||||
|
||||
<p>If you hide an item containing child items, the child items will be
|
||||
hidden as well.</p>
|
||||
|
||||
<p>Hiding have the same effect as if the item has been removed from
|
||||
<span class="code">Items</span> (or <span class="code">BetterListView.ChildItems</span>,
|
||||
respectively) collection, but is still present in the collection.</p>
|
||||
|
||||
|
||||
<h2>Getting Visible Items Only</h2>
|
||||
|
||||
|
||||
<p>Some items may be scrolled out of view or hidden (see <strong><em><a href="chapter-items.html#hide-items">Hiding Items</a></em></strong>). If you need to iterate
|
||||
through the visible items only, use the <span class="code">VisibleItems</span>
|
||||
property. The property getter returns collection which is re-created
|
||||
whenever the visibility of items changes.</p>
|
||||
|
||||
<p>The collection contains items regardless of hierarchy, so there are
|
||||
both parent and child items. If you need only the visible top-level items,
|
||||
for example, you need to filter them out using the
|
||||
<span class="code">BetterListViewItem.Level</span> property.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-item-reorder.html"><strong>
|
||||
« Item Reordering</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-label-edit.html"><strong>Label Editing »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,299 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Label Editing</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-items.html"><strong>
|
||||
« Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-multi-line.html"><strong>Multi-line Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Label Editing</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Label editing allows user to edit items and sub-items on the fly. Just
|
||||
set the <span class="code">LabelEdit</span> property to <span class="code">true</span> (or
|
||||
<span class="code">LabelEditModeItems</span> to
|
||||
<span class="code">BetterListViewLabelEditMode.Text</span>) and the user is allowed to
|
||||
edit items using text box:</p>
|
||||
|
||||
<p class="images"><img src="label-editing-control1.png"></p>
|
||||
|
||||
<p>To enable label editing for sub-items, set the
|
||||
<span class="code">LabelEditModeSubItems</span> property to value other than
|
||||
<span class="code">LabelEditModeSubItems.None</span>. For example, you can use different
|
||||
editing controls, like a combo box by setting
|
||||
<span class="code">LabelEditModeSubItems</span> to
|
||||
<span class="code">LabelEditModeSubItems.CustomControl</span>. Then handler
|
||||
<span class="code">RequestEmbeddedControl</span> event and return the editing control in
|
||||
the event handler.</p>
|
||||
|
||||
<p>You can also specify position of the editing control by setting
|
||||
<span class="code">BetterListViewRequestEmbeddedControlEventArgs.ControlPlacement</span>.
|
||||
The position is determined from sub-item text position by default.</p>
|
||||
|
||||
<p class="images"><img src="label-editing-control2.png"></p>
|
||||
|
||||
<p>There are three basic editing controls pre-packed in Better
|
||||
ListView:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">BetterListViewTextBoxEmbeddedControl</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">TextBox</span>-based control used for basic label
|
||||
editing.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListViewComboBoxEmbeddedControl</span><ul style="list-style:none"><li>
|
||||
<p>ComboBox-based control used for editing enumerations.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListViewDateTimePickerEmbeddedControl</span><ul style="list-style:none"><li>
|
||||
<p>DateTimePicker-based control used for editing date and time
|
||||
values.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you want to create your own editing controls, see <strong><em><a href="chapter-embedded-controls.html">Embedded Controls</a></em></strong>, for
|
||||
more information.</p>
|
||||
|
||||
<h2>Label Editing Events</h2>
|
||||
|
||||
|
||||
<p>Here are the events associated with label editing. They are
|
||||
mentioned in the order of occurence during the label editing
|
||||
process:</p>
|
||||
|
||||
<p></p>
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">BeforeLabelEdit</span><ul style="list-style:none"><li>
|
||||
<p>Raised after an item is clicked and label editing is about
|
||||
to proceed. Label editing can be cancelled at this point.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AfterLabelEditCancel</span><ul style="list-style:none"><li>
|
||||
<p>Raised after item label is edited. Label editing can be
|
||||
cancelled at this point.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AfterLabelEditEmbeddedControl</span><ul style="list-style:none"><li>
|
||||
<p>Raised after item label is edited using custom control.
|
||||
Label editing cannot be cancelled at this point.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AfterLabelEdit</span><ul style="list-style:none"><li>
|
||||
<p>Raised after item label is edited. Label editing cannot be
|
||||
cancelled at this point.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Label Editing Activation</h2>
|
||||
|
||||
|
||||
<p><span class="code">LabelEditActivation</span> property allows you to specify
|
||||
label editing invocation. It is a flags enum, so you can combine the
|
||||
values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Default</span><ul style="list-style:none"><li>
|
||||
<p>Default behavior. None of the options below are used.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Keyboard</span><ul style="list-style:none"><li>
|
||||
<p>Label editing can be invoked using <strong><em>F2</em></strong>
|
||||
key.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SingleClick</span><ul style="list-style:none"><li>
|
||||
<p>Label editing can be invoked by clicking on item text without
|
||||
needing the item to be focused.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Immediate</span><ul style="list-style:none"><li>
|
||||
<p>Label editing starts immediately when invoked, no delay (e.g.
|
||||
for canceling label edit by clicking on other item) is
|
||||
applied.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ClickThrough</span><ul style="list-style:none"><li>
|
||||
<p>Label editing is performed even when user clicks on unfocused
|
||||
control. This is behavior similar to button, which can be clicked
|
||||
even when its parent form is not active at the moment of clicking
|
||||
(but becomes focused thereafter).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Default Action</h2>
|
||||
|
||||
|
||||
<p>When label edit is terminated by the control (e.g. when user clicks
|
||||
outside the editing control or Better ListView loses focus), the edited
|
||||
data can be either accepted or cancelled.</p>
|
||||
|
||||
<p>By default, the data is accepted, but this can be changed by setting
|
||||
<span class="code">LabelEditDefaultAccept</span> to <span class="code">false</span>.</p>
|
||||
|
||||
|
||||
<h2>Invoking Label Editing</h2>
|
||||
|
||||
|
||||
<p>Label editing can be initiated and terminated from user code using
|
||||
<span class="code">BeginEdit</span> and <span class="code">EndEdit</span> methods.</p>
|
||||
|
||||
<p><span class="code">BeginEdit</span> is adopted from .NET ListView and allows you
|
||||
to start label editing of a specific sub-item (e.g. when some keyboard
|
||||
shortcut is pressed).</p>
|
||||
|
||||
<p><span class="code">EndEdit</span> can be used to terminate label editing at any
|
||||
time. This method can be called even when label editing is not currently
|
||||
in progress.</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>The following sample shows initialization of a Better ListView with
|
||||
custom label editing for sub-items:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Columns.AddRange(new[] { "Property", "Visiblity" });
|
||||
|
||||
this.listView.Items.Add(new[] { "AlphaProperty", "public" });
|
||||
this.listView.Items.Add(new[] { "BetaProperty", "internal" });
|
||||
this.listView.Items.Add(new[] { "GammaProperty", "private" });
|
||||
|
||||
// start editing items with just single click (optional)
|
||||
this.listView.LabelEditActivation = BetterListViewLabelEditActivation.SingleClick;
|
||||
// we would like to edit sub-items, so set editing mode of sub-items
|
||||
this.listView.LabelEditModeSubItems = BetterListViewLabelEditMode.CustomControl;
|
||||
|
||||
this.listView.EndUpdate();
|
||||
|
||||
// custom label editing needs to handle this event to obtain actual editing control
|
||||
this.listView.RequestEmbeddedControl += ListViewRequestEmbeddedControl;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
ListView.Columns.AddRange (New String() {"Property", "Visiblity"})
|
||||
|
||||
ListView.Items.Add (New String() {"AlphaProperty", "public"})
|
||||
ListView.Items.Add (New String() {"BetaProperty", "internal"})
|
||||
ListView.Items.Add (New String() {"GammaProperty", "private"})
|
||||
|
||||
' start editing items with just single click (optional)
|
||||
ListView.LabelEditActivation = BetterListViewLabelEditActivation.SingleClick
|
||||
' we would like to edit sub-items, so set editing mode of sub-items
|
||||
ListView.LabelEditModeSubItems = BetterListViewLabelEditMode.CustomControl
|
||||
|
||||
ListView.EndUpdate()
|
||||
|
||||
' custom label editing needs to handle this event to obtain actual editing control
|
||||
AddHandler ListView.RequestEmbeddedControl, AddressOf ListViewRequestEmbeddedControl</code></pre>
|
||||
|
||||
<p>The <span class="code">RequestEmbeddedControl</span> event handler provides the
|
||||
actual label editing control:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">IBetterListViewEmbeddedControl ListViewRequestEmbeddedControl(object sender, BetterListViewRequestEmbeddedControlEventArgs eventArgs)
|
||||
{
|
||||
if (eventArgs.SubItem.Index == 1) // user edits the first sub-item
|
||||
{
|
||||
// create ComboBox editing control from BetterListView
|
||||
BetterListViewComboBoxEmbeddedControl comboBoxEmbeddedControl = new BetterListViewComboBoxEmbeddedControl();
|
||||
|
||||
comboBoxEmbeddedControl.DropDownStyle = ComboBoxStyle.DropDownList;
|
||||
|
||||
// add items into the editing control
|
||||
comboBoxEmbeddedControl.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"public",
|
||||
"internal",
|
||||
"private"
|
||||
});
|
||||
|
||||
return comboBoxEmbeddedControl;
|
||||
}
|
||||
|
||||
return null;
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Function ListViewRequestEmbeddedControl (ByVal sender As Object,
|
||||
ByVal eventArgs As BetterListViewRequestEmbeddedControlEventArgs) _
|
||||
As IBetterListViewEmbeddedControl
|
||||
|
||||
If eventArgs.SubItem.Index = 1 Then
|
||||
|
||||
' user edits the first sub-item
|
||||
' create ComboBox editing control from BetterListView
|
||||
Dim comboBoxEmbeddedControl As New BetterListViewComboBoxEmbeddedControl()
|
||||
|
||||
comboBoxEmbeddedControl.DropDownStyle = ComboBoxStyle.DropDownList
|
||||
|
||||
' add items into the editing control
|
||||
comboBoxEmbeddedControl.Items.AddRange (New String() {"public", "internal", "private"})
|
||||
|
||||
Return comboBoxEmbeddedControl
|
||||
|
||||
End If
|
||||
|
||||
Return Nothing
|
||||
|
||||
End Function</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-items.html"><strong>
|
||||
« Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-multi-line.html"><strong>Multi-line Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,600 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Layout</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-using.html"><strong>
|
||||
« Using the Control</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-loading.html"><strong>Loading Thumbnails »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Layout</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView consists of three visual parts: <strong><em>column
|
||||
headers</em></strong>, <strong><em>items</em></strong>
|
||||
(<strong><em>sub-items</em></strong>) and <strong><em>groups</em></strong>. Each of
|
||||
these has its corresponding <span class="code">BetterListViewLayout</span> instance that
|
||||
defines how to measure and position elements in these parts. Furthermore,
|
||||
every view has its layout, because it behaves differently, can contain
|
||||
images of different size, etc. The layout instances can be accessed through
|
||||
these properties:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">LayoutColumns</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutGroupsCurrent</span> (<strong><em>depends on current
|
||||
view</em></strong>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsCurrent</span> (<strong><em>depends on current
|
||||
view</em></strong>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>There are also properties for specific views, so you can address
|
||||
layout properties of other than current view:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">LayoutGroupsHorizontal</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutGroupsVertical</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsDetails</span> (<strong><em>used when columns are
|
||||
not present in Details view</em></strong>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsDetailsColumns</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsLargeIcon</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsList</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsSmallIcon</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsThumbnails</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsTile</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>All the layout properties properties always reference the same
|
||||
instance of <span class="code">BetterListViewLayout</span> except for
|
||||
<span class="code">LayoutGroupsCurrent</span> and <span class="code">LayoutItemsCurrent</span> which
|
||||
depend on current view. There are also two layouts for
|
||||
<strong><em>Details</em></strong> view. This is because Better ListView uses
|
||||
different layout for items in <strong><em>Details</em></strong> view with and
|
||||
without columns (regular .NET ListView supports <strong><em>Details</em></strong>
|
||||
view, but only when columns are visible).</p>
|
||||
|
||||
<p>These layout contain properties defining sizes and paddings of all the
|
||||
elements and element parts. These properties are descibed below in their
|
||||
contexts.</p>
|
||||
|
||||
<h2>Thumbnail Size</h2>
|
||||
|
||||
|
||||
<p>Current thumbnail image size can be changed using
|
||||
<span class="code">ThumbnailSize</span> property. The value is a space reserved for
|
||||
thumbnail image, although the image can be larger or smaller than
|
||||
<span class="code">ThumbnailSize</span>. When the image is larger, it is resized
|
||||
proportionally to fit in size defined by <span class="code">ThumbnailSize</span>. When
|
||||
the image is smaller, it is centered within area of reserved space.</p>
|
||||
|
||||
<h2>ThumbnailSizeChanged Event</h2>
|
||||
|
||||
|
||||
<p>When value of <span class="code">ThumbnailSize</span> property is changed,
|
||||
either from code or by the user, a <span class="code">ThumbnailSizeChanged</span>
|
||||
event is raised. The even contains data about current view, current
|
||||
thumbnail size and the new thumbnail size.</p>
|
||||
|
||||
|
||||
<h2>Mousewheel Thumbnail Resizing</h2>
|
||||
|
||||
|
||||
<p>Better Thumbnail Browser supports resizing thumbnails by using
|
||||
<strong><em>Control</em></strong> key + mouse wheel.</p>
|
||||
|
||||
<p>The same resizing effect can be achieved by calling
|
||||
<span class="code">ZoomIn()</span> and <span class="code">ZoomOut()</span> methods. Both methods
|
||||
return boolean value, which is false if further zooming is not
|
||||
possible.</p>
|
||||
|
||||
<p>You can specify allowed thumbnail sizes using the
|
||||
<span class="code">ThumbnailSizesMouseWheel</span> property. It is simply a list of
|
||||
<span class="code">System.Drawing.Size</span> instances sorted from smaller to
|
||||
larger.</p>
|
||||
|
||||
<p>When <strong><em>Control+MouseWheel</em></strong> combination is used,
|
||||
or when <span class="code">ZoomIn()</span> or <span class="code">ZoomOut()</span> method is used,
|
||||
a nearest size from the <span class="code">ThumbnailSizesMouseWheel</span> list is
|
||||
chosed and then next or previous item from the list is used as a new
|
||||
thubmnail size.</p>
|
||||
|
||||
|
||||
|
||||
<h2>Centering Thumbnails</h2>
|
||||
|
||||
|
||||
<p>Thumbnails are horzontally centered by default, but can be brought
|
||||
to the left side by setting <span class="code">CenterThumbnails</span> property to
|
||||
<span class="code">false</span>:</p>
|
||||
|
||||
<p class="images"><img src="layout-thumbnails-center1.jpg"></p>
|
||||
|
||||
<p class="images"><img src="layout-thumbnails-center2.jpg"></p>
|
||||
|
||||
|
||||
<h2>Spacing Between Thumbnails</h2>
|
||||
|
||||
|
||||
<p>Spacing between thumbnails can be controlled by
|
||||
<span class="code">ThumbnailOuterPadding</span> property, which is of type
|
||||
<span class="code">System.Drawing.Size</span> (you can set horizontal and vertical
|
||||
padding separately):</p>
|
||||
|
||||
<p class="images"><img src="layout-thumbnails-spacing.jpg"></p>
|
||||
|
||||
|
||||
<h2>Image Borders</h2>
|
||||
|
||||
|
||||
<p>There are three properties for controlling thumbnail image
|
||||
borders:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">ThumbnailImageBorderColor</span><ul style="list-style:none"><li>
|
||||
<p>A color of the border, be it a line or shadow.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailImageBorderThickness</span><ul style="list-style:none"><li>
|
||||
<p>Thickness of the border, in pixels. It applies for shadow size
|
||||
as well. The border size is limited by
|
||||
<span class="code">ThumbnailInnerPadding</span> value, so if you want very thick
|
||||
borders, remember to set this property to larger value.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailImageBorderType</span><ul style="list-style:none"><li>
|
||||
<p>Style of image border - there are several options.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="images"><img src="layout-thumbnails-border.jpg"></p>
|
||||
|
||||
|
||||
<h2>Internal Paddings</h2>
|
||||
|
||||
|
||||
<p>There are several additional properties for controlling paddings
|
||||
around content of each thumbnail. Each is of type
|
||||
<span class="code">System.Windows.Forms.Padding</span>, so that the padding is defined
|
||||
for every side separately (top, bottom, left, right):</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">ThumbnailImagePadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding around thumbnail image. This make space for possible
|
||||
image border or shadow.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailInnerPadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding between thumbnail image boundary and its
|
||||
content.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailTextPadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding around thumbnail item label.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Custom Item Height</h2>
|
||||
|
||||
|
||||
<p>Item height can be customized with
|
||||
<span class="code">BetterListViewItem.CustomHeight</span> property. The default value
|
||||
is <span class="code">0</span>, which means that the custom height if effectively not
|
||||
used.</p>
|
||||
|
||||
<p>Every item has some minimum height determined by its font, image and
|
||||
number of text lines. The <span class="code">CustomHeight</span> value will take effect
|
||||
whenever it is larger than the minimum height.</p>
|
||||
|
||||
<p>The following image shows items with different heights:</p>
|
||||
|
||||
<p class="images"><img src="layout-customheight.png"></p>
|
||||
|
||||
<p>The property works for <strong><em>Details</em></strong> view
|
||||
only.</p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="text-layout" id="text-layout"></a>Text Layout</h2>
|
||||
|
||||
|
||||
<p>The only common property for all layouts is
|
||||
<span class="code">TextPadding</span>, which is the spacing around text area.</p>
|
||||
|
||||
<p>There is no property for settings text size, because it depends on
|
||||
text in each element. There is, however, some control over text height. It
|
||||
is different for column header, group, and item layout.</p>
|
||||
|
||||
<p>Column header and group layouts share a property called
|
||||
<span class="code">MinimumTextHeight</span>. This is a minimum allowed height of the
|
||||
text area. When the actual text height is smaller than this value, the
|
||||
text area will have <span class="code">MinimumTextHeight</span> pixels in vertical
|
||||
dimension and the text will be centered vertically in it.</p>
|
||||
|
||||
<p>Column header and item layouts have an extra property called
|
||||
<span class="code">MaximumTextLines</span> which allows displaying multi-line text.
|
||||
When its value is greater than <span class="code">1</span>, the text is first broken
|
||||
into multiple lines up to the specified value. Text trimming is used when
|
||||
there is no remaining lines left:</p>
|
||||
|
||||
<p class="images"><img src="layout-multiline1.png"></p>
|
||||
|
||||
<p>In this example, <span class="code">MaximumTextLines</span> property was set to
|
||||
<span class="code">3</span> for both column headers and items:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.LayoutColumnHeaders.MaximumTextLines = listView.LayoutItemsCurrent.MaximumTextLines = 3;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.LayoutColumnHeaders.MaximumTextLines = ListView.LayoutItemsCurrent.MaximumTextLines = 3</code></pre>
|
||||
|
||||
<p>When the column width is too small to maintain given text, even then
|
||||
the text is trimmed:</p>
|
||||
|
||||
<p class="images"><img src="layout-multiline2.png"></p>
|
||||
|
||||
<p>Maximum allowed number of text lines can also be specified on each
|
||||
sub-item individually by setting
|
||||
<span class="code">BetterListViewSubItem.MaximumTextLines</span>.</p>
|
||||
|
||||
|
||||
<h2>Default Image Alignment</h2>
|
||||
|
||||
|
||||
<p>Every view defined default image alignment. For example, image in
|
||||
<strong><em>Details</em></strong> view is usually aligned on the left side of
|
||||
text. You can set the <span class="code">DefaultImageAlignmentHorizontal</span> and
|
||||
<span class="code">DefaultImageAlignmentVertical</span> properties of the item layout.
|
||||
Group and column header layout also support these properties.</p>
|
||||
|
||||
<p>For example, setting
|
||||
LayoutGroupsCurrent.DefaultImageAlignmentHoriozontal to
|
||||
<span class="code">BetterListViewImageAlignmentHorizontal.AfterTextCenter</span>
|
||||
results in the following image alignment on all the groups:</p>
|
||||
|
||||
<p class="images"><img src="layout-image-align.png"></p>
|
||||
|
||||
<p>It is possible to change image alignment on every item, sub-item,
|
||||
column header and group separately.</p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="default-alignment-trimming" id="default-alignment-trimming"></a>Default Text Alignment
|
||||
and Trimming</h2>
|
||||
|
||||
|
||||
<p>Every view defines default text alignment and trimming. For example,
|
||||
text in <strong><em>Details</em></strong> view is usually aligned on left,
|
||||
while in <strong><em>LargeIcon</em></strong> view is centered. You can set the
|
||||
<span class="code">DefaultTextAlignmentHorizontal</span>,
|
||||
<span class="code">DefaultTextAlignmentVertical</span> and
|
||||
<span class="code">DefaultTextTrimming</span> properties of the item layout.</p>
|
||||
|
||||
<p>These properties are used on item when the item has
|
||||
<span class="code">AlignHorizontal</span> property set to
|
||||
<span class="code">TextAlignmentHorizontal.Default</span>, <span class="code">AlignVertical</span>
|
||||
property to <span class="code">TextAlignmentVertical.Default</span> and
|
||||
<span class="code">TextTrimming</span> property to
|
||||
<span class="code">TextTrimming.Undefined</span>.</p>
|
||||
|
||||
<p>Text alignment and trimming can be set on each element individually
|
||||
(see <strong><em><a href="chapter-text-formatting.html">Text
|
||||
Formatting</a></em></strong>).</p>
|
||||
|
||||
|
||||
<h2>Image Layout</h2>
|
||||
|
||||
|
||||
<p>Better ListView can display images of arbitrary sizes (not only
|
||||
predefined ones) in all views and always keeps aspect ratios of the
|
||||
images.</p>
|
||||
|
||||
<p>Images are downscaled, if needed, but never upscaled (they are
|
||||
rather centered in the larger bounding box).</p>
|
||||
|
||||
<p>Image layout options affect a bounding box, in which images are
|
||||
aligned. It is also possible to set up image paddings and borders of
|
||||
different styles and sizes.</p>
|
||||
|
||||
<p>Image layout can be adjusted on all Better ListView layouts through
|
||||
the corresponding properties described below.</p>
|
||||
|
||||
|
||||
<h2>Image Size</h2>
|
||||
|
||||
|
||||
<p>Column and group layouts contain <span class="code">ImageSize</span> property to
|
||||
manually adjust area for placing images.</p>
|
||||
|
||||
<p>Item layouts contain also <span class="code">SubImageSizes</span> property which
|
||||
is array of <span class="code">BetterListViewImageSize</span> objects. The collection
|
||||
should contain at leat one <span class="code">BetterListViewImageSize</span> instance
|
||||
(returned by <span class="code">ImageSize</span> property). When the collection
|
||||
contains more tnat one entry, item and sub-items can have different image
|
||||
area sizes.</p>
|
||||
|
||||
<p>The <span class="code">BetterListViewImageSize</span> instance holds minimum and
|
||||
maximum allowed image size for the corresponding item/sub-item. Better
|
||||
ListView will always fit images within these boundaries.</p>
|
||||
|
||||
<p>You can set specific image size for some layout:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.LayoutItemsLargeIcon.ImageSizes = new[] { new BetterListViewImageSize(new Size(97, 34)) };</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.LayoutItemsLargeIcon.ImageSizes = New BetterListViewImageSizeSize() {New BetterListViewImageSizeSize(New Size(97, 34))}</code></pre>
|
||||
|
||||
<p>We set bounding box for images in the <span class="code">LargeIcon</span>
|
||||
view.</p>
|
||||
|
||||
<p>The following images show how Better ListView fits larger images
|
||||
into such bounding box (displayed in gray):</p>
|
||||
|
||||
<p class="images"><img src="layout-image-large-source.png"><img src="layout-image-large-target.png"></p>
|
||||
|
||||
<p>Smaller images are just centered:</p>
|
||||
|
||||
<p class="images"><img src="layout-image-small-source.png"><img src="layout-image-small-target.png"></p>
|
||||
|
||||
|
||||
<h2>Minimum Text Size</h2>
|
||||
|
||||
|
||||
<p>It is possible to customize minimum text area size.</p>
|
||||
|
||||
<p>Every item has text area size determined by minimum size and actual
|
||||
text size. The minimum size is cointrolled by
|
||||
<span class="code">BetterListViewLayout.EmptyTextSize</span> property. We can set
|
||||
<span class="code">EmptyTextSize</span> to desired minimal size of text:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.LayoutItemsCurrent.AutoSizeText = true;
|
||||
listView.LayoutItemsCurrent.EmptyTextSize = new Size(8, 8);</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">listView.LayoutItemsCurrent.AutoSizeText = False
|
||||
listView.LayoutItemsCurrent.EmptyTextSize = New Size(8, 8)</code></pre>
|
||||
|
||||
<p>The sample code sets <span class="code">EmptyTextSize</span> to (8,8). This is
|
||||
the minimum allowed text area size.</p>
|
||||
|
||||
<p>The following image shows automatic sizing of the text when minimum
|
||||
text size is set to small value, so that child items (with smaller font)
|
||||
are allowed to be smaller:</p>
|
||||
|
||||
<p class="images"><img src="layout-text-autosize.png"></p>
|
||||
|
||||
|
||||
<h2>Image Border</h2>
|
||||
|
||||
|
||||
<p>Image is an element part and as such it has some padding around it.
|
||||
This is just empty space around the image to keep it in distance from
|
||||
other elements. This padding can be adjusted via
|
||||
<span class="code">BetterListViewLayoutItems.ImagePadding</span> property of the
|
||||
corresponding layout.</p>
|
||||
|
||||
<p>There are also two other properties available in item layouts, which
|
||||
allows setting painted frame around the image. These are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">ImageBorderColor</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">ImageBorderType</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">ImageBorderThickness</span> (in
|
||||
<strong><em>pixels</em></strong>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>For example, setting:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.LayoutItemsCurrent.ImageBorderType = ImageBorderType.SingleOffset;
|
||||
listView.LayoutItemsCurrent.ImageBorderThickness = 2;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.LayoutItemsCurrent.ImageBorderType = ImageBorderType.SingleOffset
|
||||
ListView.LayoutItemsCurrent.ImageBorderThickness = 2</code></pre>
|
||||
|
||||
<p>Yields this kind of image border:</p>
|
||||
|
||||
<p class="images"><img src="layout-thumbnails.png"></p>
|
||||
|
||||
|
||||
<h2>Column Headers Properties</h2>
|
||||
|
||||
|
||||
<p>These properties are specific to column headers layout:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewLayoutColumnHeaders.BorderSize</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewLayoutColumnHeaders.SortGlyphPadding</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p><span class="code">BorderSize</span> defines extent of boundary at the right end
|
||||
of each column header. When mouse cursor hovers over this boundary, the
|
||||
column header can be resized.</p>
|
||||
|
||||
<p><span class="code">SortGlyphPadding</span> is the spacing around sort glyph,
|
||||
which is displayed when the column header is sorted. It is displayed as an
|
||||
arrow pointing upwards or downwards (dependind on sort order). When visual
|
||||
style can be used, this glyph is located in the top part of column header.
|
||||
It is located in the right part, otherwise.</p>
|
||||
|
||||
|
||||
<h2>Group Properties</h2>
|
||||
|
||||
|
||||
<p>There is only one property specific to group layout, which is
|
||||
<span class="code">BetterListViewLayoutGroups.MinimumSize</span>. This is a minimum
|
||||
allowed size of a group. For vertically oriented groups, only height
|
||||
dimension is taken into account.</p>
|
||||
|
||||
<p>Layout of vertically oriented groups supports also
|
||||
<span class="code">BetterListViewLayoutGroupsVertical.ExpandButtonPadding</span>
|
||||
property. This is a spacing around group expand button.</p>
|
||||
|
||||
|
||||
<h2>Common Properties</h2>
|
||||
|
||||
|
||||
<p>All the layouts share following properties:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewLayout.ElementInnerPadding</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewLayout.ElementOuterPadding</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewLayout.LayoutPadding</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Each element has inner padding specified by
|
||||
<span class="code">ElementInnerPadding</span>, which is a distance between element
|
||||
boundary and its content. These is also outer padding specified by
|
||||
<span class="code">ElementOuterPadding</span>, which is a distance between
|
||||
elements.</p>
|
||||
|
||||
<p>Whole layout has also a padding specified by
|
||||
<span class="code">LayoutPadding</span>. This is a distance between elements and its
|
||||
containing area (control or group).</p>
|
||||
|
||||
<p>Following image shows different areas with and without
|
||||
paddings:</p>
|
||||
|
||||
<p class="images"><img src="layout-padding.png"></p>
|
||||
|
||||
|
||||
<h2>Centering Items in LargeIcon and Thumbnails View</h2>
|
||||
|
||||
|
||||
<p>Earch row of items in LargeIcon and Thumbnails view can be aligned
|
||||
either to the left or to center of the client area. This can be done using
|
||||
Center property of the corresponding layout (LayoutItemsLargeIcon.Center
|
||||
or LayoutItemsThumbnails.Center). The following images show how items are
|
||||
aligned when the Center property is set to true and false:</p>
|
||||
|
||||
<p class="images"><img src="layout-center1.png"><img src="layout-center2.png"></p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>The following sample shows setting up Better ListView to display
|
||||
multi-line items in <strong><em>Details</em></strong> view stretched to width
|
||||
of a client area (because there are no columns added):</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"Item label can be split in several lines defined by MaximumTextLines property of layout class corresponding to current View.",
|
||||
"All text trimming methods also works with multi-line items. When some items cannot be split to more lines, trimming with additional ellipsis can be used."
|
||||
});
|
||||
|
||||
// resize items in Details view with content to show how the text breaks
|
||||
// other way would be to add column and see text breaking when resizing the column
|
||||
this.listView.AutoSizeItemsInDetailsView = true;
|
||||
|
||||
// enable multi-line items by settings maximum allowed text lines to a number larger than 1
|
||||
this.listView.LayoutItemsDetails.MaximumTextLines = 4; //NOTE: we can also use LayoutItemsCurrent for the view currently set
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.Items.AddRange (
|
||||
New String() { _
|
||||
"Item label can be split in several lines defined by MaximumTextLines property of layout class corresponding to current View.",
|
||||
"All text trimming methods also works with multi-line items. When some items cannot be split to more lines, trimming with additional ellipsis can be used."
|
||||
})
|
||||
|
||||
' resize items in Details view with content to show how the text breaks
|
||||
' other way would be to add column and see text breaking when resizing the column
|
||||
ListView.AutoSizeItemsInDetailsView = True
|
||||
|
||||
' enable multi-line items by settings maximum allowed text lines to a number larger than 1
|
||||
ListView.LayoutItemsDetails.MaximumTextLines = 4
|
||||
'NOTE: we can also use LayoutItemsCurrent for the view currently set
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-using.html"><strong>
|
||||
« Using the Control</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-loading.html"><strong>Loading Thumbnails »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,660 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Loading Thumbnails</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-layout.html"><strong>
|
||||
« Layout</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-text-formatting.html"><strong>Text Formatting »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Loading Thumbnails</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Loading Images from a Folder</h2>
|
||||
|
||||
|
||||
<p>You can populate Better Thumbnail Browser with auto-population in
|
||||
case you want to display images from an image folder:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">thumbnailBrowser.Path = "c:\\images";</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">thumbnailBrowser.Path = "c:\images"</code></pre>
|
||||
|
||||
<p>This will automatically add items to Better Thumbnail Browser and
|
||||
starts loading them using default image loading provider:</p>
|
||||
|
||||
<p class="images"><img src="using-auto-populate.png"></p>
|
||||
|
||||
|
||||
<h2>Starting, Stopping and Restarting Loading</h2>
|
||||
|
||||
|
||||
<p>You can control item loading by calling <span class="code">StartLoading()</span>,
|
||||
<span class="code">StopLoading()</span> and <span class="code">RestartLoading()</span>
|
||||
methods.</p>
|
||||
|
||||
<p>The <span class="code">StartLoading()</span> method is asynchronous, so the code
|
||||
will continue after the call and the thumbnail items will be loaded on a
|
||||
separate thread.</p>
|
||||
|
||||
<p>The <span class="code">StopLoading()</span> method is synchronous - it will wait
|
||||
until current item finishes loading and then stops.</p>
|
||||
|
||||
<p>The <span class="code">RestartLoading()</span> method has an override with
|
||||
<span class="code">LoadingRestartOptions</span> parameter. It can have the following
|
||||
values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>Restart loading if already running. Do not start loading if
|
||||
not running.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">StopLoading</span><ul style="list-style:none"><li>
|
||||
<p>Stop loading and then start from beginning.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CanStartLoading</span><ul style="list-style:none"><li>
|
||||
<p>Restart loading if already running. Start loading even if not
|
||||
running.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>When calling <span class="code">RestartLoading()</span> method without
|
||||
parameters, the <span class="code">LoadingRestartOptions.None</span> is used.</p>
|
||||
|
||||
|
||||
<h2>Loading Events</h2>
|
||||
|
||||
|
||||
<p>During the loading process, two events are raised by the Better
|
||||
ThumbnailBrowser control:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">ItemLoaded</span><ul style="list-style:none"><li>
|
||||
<p>This event is raised whenever a single item is loaded by a
|
||||
loading provider. The event can be raised multiple times for a
|
||||
single item if a multi-pass loading (see section <strong><em><a href="chapter-loading.html#multi-pass-loading">Multi-pass Loading</a></em></strong>) is used.
|
||||
Event data contains loaded item instance, pass index, total number
|
||||
of passes and order in which the item is loaded (the order can be
|
||||
different from the item index, see section <strong><em><a href="chapter-loading.html#custom-loading-order">Custom Loading
|
||||
Order</a></em></strong>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">LoadingFinised</span><ul style="list-style:none"><li>
|
||||
<p>This event is raised when thumbnail item loading finishes for
|
||||
whatever reason (no more items to load, loading cancelled by the
|
||||
user, loading failed). Event data contains index of item on which
|
||||
the loading finished/stopped (<span class="code">LoadingFinishReason</span>
|
||||
enumeration), reason why the loading ended and
|
||||
<span class="code">System.Exception</span> instance in case the loading failed
|
||||
because exception occured on the loading thread.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Loading Options</h2>
|
||||
|
||||
|
||||
<h2>Refreshing Delay</h2>
|
||||
|
||||
|
||||
<p>When large number of small thumbnails are loaded, or when loading
|
||||
each thumbnail is quick, it is inefficient to refresh control after
|
||||
every single item is loaded. Instead, a timer looks for loaded items in
|
||||
a predefined interval and refreshes the control only if any items get
|
||||
loaded. By default, the interval is set to 250 millisecons, but you can
|
||||
set your own value through <span class="code">RefreshDelay</span> property. When you
|
||||
set property value to <span class="code">0</span>, the control will be refreshed
|
||||
after every item loaded.</p>
|
||||
|
||||
<p>Better Thumbnail Browser uses <span class="code">System.Threading.Timer</span>,
|
||||
so its accurracy is in order of tens of milliseconds.</p>
|
||||
|
||||
|
||||
<h2>Loading Thread Options</h2>
|
||||
|
||||
|
||||
<p>You can setup thumbnail item loading thread by setting the
|
||||
following properties:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">LoadingThreadIsBackground</span><ul style="list-style:none"><li>
|
||||
<p>Specifies whether the item loading thread runs as a
|
||||
background thread.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">LoadingThreadPriority</span><ul style="list-style:none"><li>
|
||||
<p>Specified item loading thread priority
|
||||
(<span class="code">System.Threading.ThreadPriority</span>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Skipping Individual Items</h2>
|
||||
|
||||
|
||||
<p>If you want <strong><em>not to</em></strong> load specific thumbnail
|
||||
items, set <span class="code">BetterThumbnailBrowserItem.Skip</span> property to
|
||||
<span class="code">true</span>.</p>
|
||||
|
||||
|
||||
|
||||
<h2>Loading Providers</h2>
|
||||
|
||||
|
||||
<p>Thumbnail item loading is performed by so called <strong><em>loading
|
||||
providers</em></strong> (instances of <span class="code">LoadingProvider</span>
|
||||
class).</p>
|
||||
|
||||
<p>These instances are listed in the <span class="code">LoadingProviders</span>
|
||||
property. In case there is more than one loading provider, a multiple
|
||||
passes over the thumbnail items are done, one for each loading
|
||||
provider.</p>
|
||||
|
||||
<p>Better Thumbnail Browser have two bases classes for deriving your own
|
||||
loading providers:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">CustomLoadingProvider</span><ul style="list-style:none"><li>
|
||||
<p>Intended for loading non-image data.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ImageLoadingProvider</span><ul style="list-style:none"><li>
|
||||
<p>Intended for loading image thumbnails.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The both of these classes are derived from
|
||||
<span class="code">LoadingProvider</span> class and implement a <span class="code">LoadItem</span>
|
||||
method. In this method, the loader calls <span class="code">LoadItemAsync</span>
|
||||
method, which have to be provided by the user as well as the
|
||||
<span class="code">LoadItemSync</span> method. The difference between these two methods
|
||||
is that <span class="code">LoadItemAsync</span> is called on the (background) loader
|
||||
thread and the <span class="code">LoadItemSync</span> is then called on the UI
|
||||
(foreground) thread.</p>
|
||||
|
||||
<p>Only <span class="code">LoadItemAsync</span> and <span class="code">LoadItemSync</span>
|
||||
methods need to be implemented by the user.</p>
|
||||
|
||||
<p>There is also <span class="code">LoadItemsSync</span> method which is used by
|
||||
<span class="code">LoadItem</span> when timer is used (see <span class="code">RefreshDelay</span>
|
||||
property), in that case, the loading provider calls only
|
||||
<span class="code">LoadItemAsync</span> and stores the result data, and then performs
|
||||
synchronization and calls <span class="code">LoadItemSync</span> in a batch.</p>
|
||||
|
||||
<h2>Loading Image Thumbnails in Better Thumbnail Browser</h2>
|
||||
|
||||
|
||||
<p>Thumbnail loading is designed to be fast and effective.</p>
|
||||
|
||||
<p>First of all, images need not to be loaded in full resolution and
|
||||
resized. Instead, you can load image in lower resolution or simply get
|
||||
low resolution version already available. For example, the default image
|
||||
loading provider in Better Thumbnail Browser makes use of existing image
|
||||
thumbnails in JPEG image, avoiding resizing.</p>
|
||||
|
||||
<p>You can still load images in full resolution. These images will be
|
||||
present in <span class="code">BetterThumbnailBrowser.Image</span> property in full
|
||||
resolution, but will be resized internally for viewing.</p>
|
||||
|
||||
<p>The thumbnail items can be zoomed and images may need to be
|
||||
reloaded in higher resolution. The loading mechanism of Better
|
||||
ThumbnailBrowser never reloads images if a full resolution is already
|
||||
loaded (smaller image gets centered in the thumbnail item instead). It
|
||||
also avoid reloading if user provided image of high-enough resolution.
|
||||
Of course, if you provide image in full resolution, then every thumbnail
|
||||
item gets loaded just once. To determine what "full resolution" means,
|
||||
there is a <span class="code">maximumImageSize</span> property in the loading method.
|
||||
One provides loaded image and informs about the full resolution. You can
|
||||
also set <span class="code">maximumImageSize</span> property to the same size as
|
||||
thumbnail image, but your image will not be reloaded in higher
|
||||
resolution if needed (and get centered in thumbnail items
|
||||
instead).</p>
|
||||
|
||||
|
||||
<h2>Custom Image Loader</h2>
|
||||
|
||||
|
||||
<p>We will illustrate how to implement a minimalist image loading
|
||||
provider. It assumes that every item contains path to image file in its
|
||||
<span class="code">Path</span> property:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class MyImageLoadingProvider : ImageLoadingProvider
|
||||
{
|
||||
public MyLoadingProvider(BetterThumbnailBrowser thumbnailBrowser)
|
||||
: base(thumbnailBrowser)
|
||||
{
|
||||
}
|
||||
|
||||
protected override void LoadItemAsync(
|
||||
BetterThumbnailBrowserItem item,
|
||||
Size targetImageSize,
|
||||
out Image image,
|
||||
out Size maximumImageSize,
|
||||
out ILoadingProviderData data)
|
||||
{
|
||||
image = Image.FromFile(item.Path);
|
||||
maximumImageSize = image.Size;
|
||||
data = null;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class MyImageLoadingProvider
|
||||
Inherits ImageLoadingProvider
|
||||
|
||||
Public Sub New(thumbnailBrowser As BetterThumbnailBrowser)
|
||||
MyBase.New(thumbnailBrowser)
|
||||
End Sub
|
||||
|
||||
Protected Overrides Sub LoadItemAsync(
|
||||
item As BetterThumbnailBrowserItem,
|
||||
targetImageSize As Size,
|
||||
ByRef image As Image,
|
||||
ByRef maximumImageSize As Size,
|
||||
ByRef data As ILoadingProviderData)
|
||||
|
||||
image = Image.FromFile(item.Path)
|
||||
maximumImageSize = image.Size
|
||||
data = Nothing
|
||||
|
||||
End Sub
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<p>As you can see, the implementation is very simple.</p>
|
||||
|
||||
<p>The entire code of <span class="code">LoadItemAsync</span> consists of just
|
||||
providing these three parameters:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">image</span><ul style="list-style:none"><li>
|
||||
<p>Loaded thumbnail image.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">maximumImageSize </span><ul style="list-style:none"><li>
|
||||
<p>Maximum allowed thumbnail size. This is actually size of a
|
||||
full resolution image, even if you have loaded smaller image (a
|
||||
thumbnail). This value informs loaded that there is a higher
|
||||
resolution available and it can re-load image in higher resolution
|
||||
if needed.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">data</span><ul style="list-style:none"><li>
|
||||
<p>Custom non-image data we would like to pass to UI thread. We
|
||||
can use any user types, they only need to implement trivial
|
||||
<span class="code">ILoadingProviderData</span> interface.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The <span class="code">LoadItemSync</span> method need not to be provided by
|
||||
the user since it is already implemented in the
|
||||
<span class="code">ImageLoadingProvider</span>. The default implementation only takes
|
||||
the <span class="code">image</span> and <span class="code">maximumImageSize</span> and sets it
|
||||
into respective properties of item:
|
||||
<span class="code">BetterThumbnailBrowserItem.Image</span> and
|
||||
<span class="code">BetterThumbnailBrowserItem.MaximumImageSize</span>.</p>
|
||||
|
||||
|
||||
<h2>Loading Non-image Data</h2>
|
||||
|
||||
|
||||
<p>Sometimes one would like to load other than image data - for
|
||||
example: metadata embedded in photos, file information, retrieve item
|
||||
info from remote database etc.</p>
|
||||
|
||||
<p>This is where <span class="code">CustomLoadingProvider</span> comes into place.
|
||||
It is more general, so it can be used for loading images as well. User
|
||||
have to provide both <span class="code">LoadImageAsync</span> and
|
||||
<span class="code">LoadItemSync</span> methods:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class MyCustomLoadingProvider : CustomLoadingProvider
|
||||
{
|
||||
public MyCustomLoadingProvider(BetterThumbnailBrowser thumbnailBrowser)
|
||||
: base(thumbnailBrowser)
|
||||
{
|
||||
}
|
||||
|
||||
protected override void LoadItemAsync(
|
||||
BetterThumbnailBrowserItem item,
|
||||
Size targetImageSize,
|
||||
out ILoadingProviderData data)
|
||||
{
|
||||
// obtain custom data (this runs on background thread)
|
||||
MyLoadingProviderData myLoadingProviderData = /* obtain the data here */;
|
||||
|
||||
data = myLoadingProviderData;
|
||||
}
|
||||
|
||||
protected override void LoadItemSync(BetterThumbnailBrowserItem item, ILoadingProviderData data)
|
||||
{
|
||||
MyLoadingProviderData myLoadingProviderData = (MyLoadingProviderData)data;
|
||||
|
||||
// set loaded data to item (this runs on main thread)
|
||||
item.Text = myLoadingProviderData.Label;
|
||||
item.ToolTips.Add(new BetterListViewToolTipInfo(BetterListViewToolTipLocation.Image, myLoadingProviderData.Description));
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class MyCustomLoadingProvider
|
||||
Inherits CustomLoadingProvider
|
||||
|
||||
Public Sub New(thumbnailBrowser As BetterThumbnailBrowser)
|
||||
MyBase.New(thumbnailBrowser)
|
||||
End Sub
|
||||
|
||||
Protected Overrides Sub LoadItemAsync(item As BetterThumbnailBrowserItem, targetImageSize As Size, ByRef data As ILoadingProviderData)
|
||||
|
||||
' obtain custom data (this runs on background thread)
|
||||
Dim myLoadingProviderData As MyLoadingProviderData = ' obtain the data here
|
||||
|
||||
data = myLoadingProviderData
|
||||
|
||||
End Sub
|
||||
|
||||
Protected Overrides Sub LoadItemSync(item As BetterThumbnailBrowserItem, data As ILoadingProviderData)
|
||||
|
||||
Dim myLoadingProviderData As MyLoadingProviderData = DirectCast(data, MyLoadingProviderData)
|
||||
|
||||
' set loaded data to item (this runs on main thread)
|
||||
item.Text = myLoadingProviderData.Label
|
||||
item.ToolTips.Add(New BetterListViewToolTipInfo(BetterListViewToolTipLocation.Image, myLoadingProviderData.Description))
|
||||
|
||||
End Sub
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<p>As you can see, we have used custom type
|
||||
<span class="code">MyLoadingProviderData</span> to hold loaded data, which is passed
|
||||
to foreground thread to further processing. This type implements
|
||||
<span class="code">ILoadingProviderData</span> - an empty interface - so its code is
|
||||
very simple:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class MyLoadingProviderData : ILoadingProviderData
|
||||
{
|
||||
public string Label
|
||||
{
|
||||
get;
|
||||
set;
|
||||
}
|
||||
|
||||
public string Description
|
||||
{
|
||||
get;
|
||||
set;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class MyLoadingProviderData
|
||||
Implements ILoadingProviderData
|
||||
|
||||
Public Property Label() As String
|
||||
Get
|
||||
Return label
|
||||
End Get
|
||||
Set
|
||||
label = Value
|
||||
End Set
|
||||
End Property
|
||||
|
||||
Public Property Description() As String
|
||||
Get
|
||||
Return description
|
||||
End Get
|
||||
Set
|
||||
description = Value
|
||||
End Set
|
||||
End Property
|
||||
|
||||
Private label As String
|
||||
Private description As String
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="custom-loading-order" id="custom-loading-order"></a>Custom Loading
|
||||
Order</h2>
|
||||
|
||||
|
||||
<p>You can specify custom order in which the items will be loaded by
|
||||
setting an <span class="code">IComparer<BetterThumbnailBrowserItem></span>
|
||||
instance in the <span class="code">LoadingProvider.ItemComparer</span> property. This
|
||||
can result in loading images in order you want:</p>
|
||||
|
||||
<p></p>
|
||||
<p class="images"><img src="loading-custom-order.png"></p>
|
||||
|
||||
<p>For example, we would like to load visible items first, then all
|
||||
the others. This can be done with the following comparer:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class CustomOrderItemComparer : IComparer<BetterThumbnailBrowserItem>
|
||||
{
|
||||
private readonly BetterThumbnailBrowser thumbnailBrowser;
|
||||
|
||||
public CustomOrderItemComparer(BetterThumbnailBrowser thumbnailBrowser)
|
||||
{
|
||||
this.thumbnailBrowser = thumbnailBrowser;
|
||||
}
|
||||
|
||||
int IComparer<BetterThumbnailBrowserItem>.Compare(BetterThumbnailBrowserItem itemA, BetterThumbnailBrowserItem itemB)
|
||||
{
|
||||
// get put visible item indices in sorted array
|
||||
ReadOnlyCollection<BetterListViewItem> visibleItems = this.thumbnailBrowser.VisibleItems;
|
||||
int[] visibleIndices = new int[visibleItems.Count];
|
||||
|
||||
for (int indexItem = 0; indexItem < visibleItems.Count; indexItem++)
|
||||
{
|
||||
visibleIndices[indexItem] = visibleItems[indexItem].Index;
|
||||
}
|
||||
|
||||
Array.Sort(visibleIndices);
|
||||
|
||||
int valueA = ((Array.BinarySearch(visibleIndices, itemA.Index) >= 0) ? 0 : 1);
|
||||
int valueB = ((Array.BinarySearch(visibleIndices, itemB.Index) >= 0) ? 0 : 1);
|
||||
|
||||
// compare items according to their visibility
|
||||
int result = valueA.CompareTo(valueB);
|
||||
|
||||
if (result != 0)
|
||||
{
|
||||
return result;
|
||||
}
|
||||
|
||||
// compare items according to their indices
|
||||
valueA = itemA.Index;
|
||||
valueB = itemB.Index;
|
||||
|
||||
return valueA.CompareTo(valueB);
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class CustomOrderItemComparer
|
||||
Implements IComparer(Of BetterThumbnailBrowserItem)
|
||||
|
||||
Private ReadOnly thumbnailBrowser As BetterThumbnailBrowser
|
||||
|
||||
Public Sub New(thumbnailBrowser As BetterThumbnailBrowser)
|
||||
Me.thumbnailBrowser = thumbnailBrowser
|
||||
End Sub
|
||||
|
||||
Private Function IComparer_Compare(itemA As BetterThumbnailBrowserItem, itemB As BetterThumbnailBrowserItem) As Integer Implements IComparer(Of BetterThumbnailBrowserItem).Compare
|
||||
|
||||
' get put visible item indices in sorted array
|
||||
Dim visibleItems As ReadOnlyCollection(Of BetterListViewItem) = Me.thumbnailBrowser.VisibleItems
|
||||
Dim visibleIndices As Integer() = New Integer(visibleItems.Count - 1) {}
|
||||
|
||||
For indexItem As Integer = 0 To visibleItems.Count - 1
|
||||
visibleIndices(indexItem) = visibleItems(indexItem).Index
|
||||
Next
|
||||
|
||||
Array.Sort(visibleIndices)
|
||||
|
||||
Dim valueA As Integer = (If((Array.BinarySearch(visibleIndices, itemA.Index) >= 0), 0, 1))
|
||||
Dim valueB As Integer = (If((Array.BinarySearch(visibleIndices, itemB.Index) >= 0), 0, 1))
|
||||
|
||||
' compare items according to their visibility
|
||||
Dim result As Integer = valueA.CompareTo(valueB)
|
||||
|
||||
If result <> 0 Then
|
||||
Return result
|
||||
End If
|
||||
|
||||
' compare items according to their indices
|
||||
valueA = itemA.Index
|
||||
valueB = itemB.Index
|
||||
|
||||
Return valueA.CompareTo(valueB)
|
||||
End Function
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
|
||||
<h2>Automatic Restaring on Scroll, Resize and Thumbnail Zoom</h2>
|
||||
|
||||
|
||||
<p>Sometimes we need to restart loading because of scrolling or
|
||||
resizing the control, or when thumbnails are zoomed. In the above
|
||||
example, we have loaded visible items first. When user scrolls the
|
||||
control, this set of visible items changes and hence we would like to
|
||||
restart loading.</p>
|
||||
|
||||
<p>For example, we load thumbnails only at the necessary resolution.
|
||||
But when the user resizes the thumbnails, we need to reload them in
|
||||
higher resolution.</p>
|
||||
|
||||
<p>Another case is that we use custom item loading order such that
|
||||
visible items are loaded first. When user scrolls the control, the order
|
||||
is changed and we need to restart loading.</p>
|
||||
|
||||
<p>This functionality is provided by Better Thumbnail Browser. You
|
||||
only need to set the following boolean properties to
|
||||
<span class="code">true</span>:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">LoadingProvider.RestartOnScroll</span><ul style="list-style:none"><li>
|
||||
<p>Restart loading when the control is scrolled or
|
||||
resized.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ImageLoadingProvider.RestartOnExpand</span><ul style="list-style:none"><li>
|
||||
<p>Restart loading when thumbnails are enlarged in size.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Safe Cross-threaded Operations</h2>
|
||||
|
||||
|
||||
<p>Better Thumbnail Browser uses two mechanisms for thread
|
||||
synchronization: <span class="code">Control.Invoke</span> and
|
||||
<span class="code">Mutex</span>.</p>
|
||||
|
||||
<p>The <span class="code">Control.Invoke</span> is used in
|
||||
<span class="code">LoadingProvider.LoadItem</span> method. Here a
|
||||
<span class="code">BetterThumbnailBrowser</span> instance is used as an synchronization
|
||||
object, then <span class="code">LoadItemSync</span> is called so that images and other
|
||||
data can be set to items on UI thread.</p>
|
||||
|
||||
<p><span class="code">Mutex</span> is used whenever Better Thumbnail Browser works
|
||||
with item data. When you work with items on both loader thread and UI
|
||||
thread, use <span class="code">BetterThumbnailBrowserItem.SyncRoot</span> as the
|
||||
synchronization object. Here is a sample of safely setting
|
||||
<span class="code">Path</span> property of
|
||||
<span class="code">BetterThumbnailBrowserItem</span>:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">lock (item.SyncRoot)
|
||||
{
|
||||
item.Path = path;
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">SyncLock item.SyncRoot
|
||||
item.Path = path
|
||||
End SyncLock</code></pre>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="multi-pass-loading" id="multi-pass-loading"></a>Multi-pass Loading</h2>
|
||||
|
||||
|
||||
<p>In case you need to load items in multiple sweeps, you can set
|
||||
multiple instances of <span class="code">LoadingProvider</span> in the
|
||||
<span class="code">LoadingProviders</span> property. The
|
||||
<strong><em>MultiPassLoadingSample</em></strong> uses several instances of a
|
||||
custom loading provider, each with different image quality setting. The
|
||||
result is that paimages are loaded in successively higher levels of
|
||||
detail:</p>
|
||||
|
||||
<p class="images"><img src="loading-multipass.png"></p>
|
||||
|
||||
<p>You can in which pass any item currently resides by reading the
|
||||
<span class="code">BetterThumbnailBrowserItem.PassIndex</span> property. When item
|
||||
loading is restarted, the items are loaded from their current pass. To
|
||||
load all items again from scratch, set the <span class="code">PassIndex</span> property
|
||||
to <span class="code">0</span> and then restart item loading.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-layout.html"><strong>
|
||||
« Layout</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-text-formatting.html"><strong>Text Formatting »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Multi-line Items</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-label-edit.html"><strong>
|
||||
« Label Editing</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-owner-draw.html"><strong>Owner Drawing »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Multi-line Items</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Setting Up Multi-line Items and Column Headers</h2>
|
||||
|
||||
|
||||
<p>Better ListView holds a property called
|
||||
<span class="code">MaximumTextLines</span> for each view. This property specifies
|
||||
maximum number of lines that can be displayed in column header, item or
|
||||
sub-item. You can access this property via the corresponding
|
||||
layout:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">LayoutColumns</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsCurrent</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LayoutItemsLargeIcon</span>, <span class="code">LayoutItemsList</span>,
|
||||
etc.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>For example, if you set <span class="code">LayoutColumns.MaximumTextLines</span>
|
||||
and <span class="code">LayoutItemsDetailsColumns.MaximumTextLines</span> to
|
||||
<span class="code">3</span>, the items and sub-items in the
|
||||
<strong><em>Details</em></strong> view with columns will have up to three
|
||||
lines:</p>
|
||||
|
||||
<p class="images"><img src="layout-multiline1.png"><img src="layout-multiline2.png"></p>
|
||||
|
||||
<p>You can also specifiy maximum allowed number of text lines for a
|
||||
(sub)item by setting one of the following properties:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItems.MaximumTextLines</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItem.MaximumTextLines</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Multi-line Groups</h2>
|
||||
|
||||
|
||||
<p>Groups can contain multi-line text as well.</p>
|
||||
|
||||
<p>However, group layouts do not have a <span class="code">MaximumTextLines</span>
|
||||
property because there are no text wrapping options available. When group
|
||||
gets too short, each line of the text gets trimmed separately (this works
|
||||
the same way for items, when <span class="code">TextWrapping</span> property is set to
|
||||
<span class="code">None</span> and item contains multi-line text. See <strong><em><a href="chapter-multi-line.html#adjusting-text-wrapping">Adjusting Text
|
||||
Wrapping</a></em></strong>):</p>
|
||||
|
||||
<p class="images"><img src="multi-line-groups.png"></p>
|
||||
|
||||
|
||||
<h2>Text with Newline Characters</h2>
|
||||
|
||||
|
||||
<p>Better ListView supports text with multiple lines by default. Better
|
||||
ListView recognizes <strong><em>LF</em></strong> characters as newlines, while
|
||||
ingoring the <strong><em>CR</em></strong> characters, so you can use either
|
||||
<strong><em>LF</em></strong> or <strong><em>CRLF</em></strong> as a newline
|
||||
mark.</p>
|
||||
|
||||
<p>By default, only the first line of the text is displayed, so set the
|
||||
<span class="code">MaximumTextLines</span> property to a number of lines you wish to
|
||||
display.</p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="adjusting-text-wrapping" id="adjusting-text-wrapping"></a>Adjusting Text
|
||||
Wrapping</h2>
|
||||
|
||||
|
||||
<p>Multi-line items gets higher when more space is needed for more
|
||||
lines. Item height is controlled by the MaximumTextLines property, but you
|
||||
may want to keep some sub-items on single line (e.g. sub-item displaying
|
||||
date), or wrap the text, but only in the available space:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-wrap.png"></p>
|
||||
|
||||
<p>To control text wrapping behavior, use the
|
||||
<span class="code">BetterListViewSubItem.TextWrapping</span> (or
|
||||
<span class="code">BetterListViewItem.TextWrapping</span>) property. See <strong><em><a href="chapter-text-formatting.html#text-wrapping">Text
|
||||
Wrapping</a></em></strong> for more informaton.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-label-edit.html"><strong>
|
||||
« Label Editing</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-owner-draw.html"><strong>Owner Drawing »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Overview</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="../../../better-thumbnail-browser/quick-start-guide.html"><strong>Quick Start »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Overview</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="images"><img src="overview.png"></p>
|
||||
|
||||
<h2>Quick Summary</h2>
|
||||
|
||||
|
||||
<p>Better Thumbnail Browser is a WinForms control for displaying and
|
||||
loading (mostly) image thumbnails. The control is written from scratch
|
||||
entirely in C#.</p>
|
||||
|
||||
<p>Better Thumbnail Browser inherits from a successful and mature Better
|
||||
ListView control.</p>
|
||||
|
||||
<p>Viewing and loading image thumbnails can be a sophisticated task, so
|
||||
this control is designed to do these things for you:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Scan folder on disk and load images.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Load images from any source you want (e.g. database) with
|
||||
minimum coding needed.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Perform all the thread operations and thread synchronization for
|
||||
you.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Resize images.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Always load viewed thumbnails first, then all other in the
|
||||
predefined order.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Allow starting, stopping and restarting the loading on
|
||||
demand.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>It has been designed to completely replace the regular .NET list
|
||||
view control, and it comes with many additional features, improvements and
|
||||
better native look and feel (including Aero support).</p>
|
||||
|
||||
|
||||
<h2>Features</h2>
|
||||
|
||||
|
||||
<p></p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Automatic loading of image thumbnails from a selected folder
|
||||
on the disk.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Handles multithreaded loading for you, no extra coding needed
|
||||
for synchronization.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support for custom loading providers, custom loading order and
|
||||
multi-pass loading.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Viewing image thumbnails of arbitrary size, with customized
|
||||
borders and paddings.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>High-quality image resampling.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Support for smart loading: Thumbnails in the view can be
|
||||
loaded first, then all other.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Thumbnail zooming on the fly.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Inherits many features from Better ListView control (for
|
||||
example: Multi-column sorting, Multi-line text, Groups, Three-state
|
||||
check boxes and much more).</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Compatibility</h2>
|
||||
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Compatible with: Visual Studio 2012, 2008, 2005 (and newer),
|
||||
with full designer support.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>For C#, Visual Basic .NET (VB.NET), managed C++, and other CLI
|
||||
languages.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Compatible with .NET 4.5, 4.0 and 4.0 Client Profile, 3.5 and
|
||||
3.5 Client Profile, 3.0, 2.0, and newer.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Runs on Windows 8, 7, Vista, 2003, XP, 2000, and newer, both
|
||||
32-bit and 64-bit.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Benefits</h2>
|
||||
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Inherits from powerful Better ListView control, which has more
|
||||
features and fixes all quirks of the regular .NET ListView
|
||||
control.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fully managed, 100% C# code. No more Win32 API.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Minimum learning needed.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Single DLL file with simple XCOPY deployment,
|
||||
royalty-free.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Great native look and feel (including Aero support).</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Because Better Thumbnail Browser is written entirely from scratch in
|
||||
pure managed code, it adds functionality hardly achievable by just
|
||||
wrapping the regular .NET WinForms control. Such features include image
|
||||
thumbnails, data binding, multi-line items ... and more!</p>
|
||||
|
||||
<p>The Better Thumbnail Browser source code consists of a single C#
|
||||
project without any external dependencies, it is clean, readable, fully
|
||||
commented and readily extensible.</p>
|
||||
|
||||
<p>You can <strong><em>save time</em></strong> with many of the inbuilt
|
||||
features (sorting, item reordering...).</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="../../../better-thumbnail-browser/quick-start-guide.html"><strong>Quick Start »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Owner Drawing</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-multi-line.html"><strong>
|
||||
« Multi-line Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-performance.html"><strong>Performance »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Owner Drawing</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Owner drawing allow to customize appearance of any element, element
|
||||
part and the control itself:</p>
|
||||
|
||||
<p class="images"><img src="owner-draw.png"></p>
|
||||
|
||||
<h2>Drawing Over Control Parts</h2>
|
||||
|
||||
|
||||
<p>The simple way to draw over control parts is by using drawing
|
||||
events:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">DrawBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawColumnHeader</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawColumnHeaderBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawGroup</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawGroupBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawItem</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawItemBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">DrawInsertionMark</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Each of these events contains <span class="code">System.Drawing.Graphics</span>
|
||||
object in event data with which custom drawing is possible. Areas of
|
||||
drawing are also provided. For example, to draw inside item inner area,
|
||||
there is a
|
||||
<span class="code">BetterListViewDrawItemEventArgs.ItemBounds.BoundsInner</span>
|
||||
property containing the rectangle.</p>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">If you want to paint outside element areas, set
|
||||
<span class="code">OptimizedInvalidation</span> property to <span class="code">false</span>. This
|
||||
will ensure your custom drawing code will be called in every redraw
|
||||
cycle.</p>
|
||||
<hr>
|
||||
<br><h2>Replacing Default Drawing by Custom Drawing</h2>
|
||||
|
||||
|
||||
<p>Owner drawing events are always called after the default drawing, so
|
||||
it is possible only to draw over exisiting drawing. When you need turn off
|
||||
some painting and do your own drawing instead of the default one (e.g.
|
||||
draw rotated text instead the straight one), you have to create your
|
||||
custom control inheriting from <span class="code">BetterListView</span>:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class OwnerDrawBetterListView : BetterListView
|
||||
{
|
||||
// ...
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class OwnerDrawBetterListView Inherits BetterListView
|
||||
' ...
|
||||
End Class</code></pre>
|
||||
|
||||
<p>Then you can override one of the drawing methods:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">OnDrawBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">OnDrawColumnHeader</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">OnDrawGroup</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">OnDrawGroupBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">OnDrawItem</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">OnDrawItemBackground</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">OnDrawInsertionMark</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>This gives you more control over the painting, because your drawing
|
||||
code can be called <strong><em>before</em></strong> or
|
||||
<strong><em>after</em></strong> the default drawing, depending on where and if
|
||||
you call base implementation.</p>
|
||||
|
||||
<p>Every part of the default drawing has a switch so you can turn the
|
||||
default drawing off. For example, if you want not to draw default text on
|
||||
some item, set <span class="code">BetterListViewDrawItemEventArgs.DrawText</span>
|
||||
property to <span class="code">false</span>.</p>
|
||||
|
||||
<p>It is also possible to do custom drawing as the very last drawing of
|
||||
the whole control. To do this, override <span class="code">DrawingRedrawCore</span>
|
||||
method and do your drawing after calling the base implementation:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">protected override void DrawingRedrawCore(Graphics grfx)
|
||||
{
|
||||
base.DrawingRedrawCore(grfx);
|
||||
|
||||
// do your custom drawing
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Protected Overrides Sub DrawingRedrawCore(grfx As Graphics)
|
||||
|
||||
MyBase.DrawingRedrawCore(grfx)
|
||||
|
||||
' do your custom drawing
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
|
||||
<h2>Overriding Item and Control States</h2>
|
||||
|
||||
|
||||
<p>The appearance of element depends not only on its state, but also on
|
||||
the control state.</p>
|
||||
|
||||
<p>If you override one of the drawing methods (e.g.
|
||||
<span class="code">OnDrawItem</span>), you can modify event data before calling base
|
||||
class implementation (e.g. <span class="code">base.OnDrawItem</span>).</p>
|
||||
|
||||
<p>For example, <span class="code">BetterListViewDrawItemEventArgs</span> contains
|
||||
<span class="code">ItemStateInfo</span> property. By modifying this property, you can
|
||||
force drawing item in any state you wish.</p>
|
||||
|
||||
<p><span class="code">BetterListViewDrawItemEventArgs</span> also contains two
|
||||
properties regarding control state:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">DrawEnabled</span><ul style="list-style:none"><li>
|
||||
<p>Draw item as if the control is in enabled state
|
||||
(<span class="code">BetterListView.Enabled</span> is <span class="code">true</span>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">DrawFocused</span><ul style="list-style:none"><li>
|
||||
<p>Draw item as if the control in in focused state
|
||||
(<span class="code">BetterListView.Focused</span> is <span class="code">true</span>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>By default, these properties correspond to actual control's state,
|
||||
but they can be modified. For example, one may want to set
|
||||
<span class="code">DrawFocused</span> to true on every item that is selected, so the
|
||||
item will be highlighted even if the control loses focus.</p>
|
||||
|
||||
<p>The control state properties are available only in the
|
||||
<span class="code">BetterListViewItemEventArgs</span>, but element states can be
|
||||
modified in all painting event handlers (also column headers and
|
||||
groups).</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>The following sample shows owner drawing of item background:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Items.Add("Item with owner-drawn image and background.");
|
||||
|
||||
this.listView.View = BetterListViewView.Tile;
|
||||
// turn off automatic image sizing to make space for image even when items do not have any images set
|
||||
this.listView.LayoutOptions = (BetterListViewLayoutOptions.Auto & ~BetterListViewLayoutOptions.AutoSizeItemImage);
|
||||
// set 4-pixel boundary around image
|
||||
this.listView.LayoutItemsCurrent.ImagePadding = new Padding(4);
|
||||
// set image size to be 50 by 50 pixels (it is possible to set image sizes for sub-items as well by adding more Size instances in the collection)
|
||||
this.listView.LayoutItemsCurrent.ImageSizes = new ReadOnlyCollection<Size>(new[] { new Size(50, 50) });
|
||||
|
||||
this.listView.EndUpdate();
|
||||
|
||||
// we would like to draw over item's foreground (custom image)
|
||||
this.listView.DrawItem += ListViewDrawItem;
|
||||
// we would like to draw over item's background
|
||||
this.listView.DrawItemBackground += ListViewDrawItemBackground;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
ListView.Items.Add("Item with owner-drawn image and background.")
|
||||
|
||||
ListView.View = BetterListViewView.Tile
|
||||
' turn off automatic image sizing to make space for image even when items do not have any images set
|
||||
ListView.LayoutOptions = (BetterListViewLayoutOptions.Auto And Not BetterListViewLayoutOptions.AutoSizeItemImage)
|
||||
' set 4-pixel boundary around image
|
||||
ListView.LayoutItemsCurrent.ImagePadding = New Padding(4)
|
||||
' set image size to be 50 by 50 pixels (it is possible to set image sizes for sub-items as well by adding more Size instances in the collection)
|
||||
ListView.LayoutItemsCurrent.ImageSizes = New ReadOnlyCollection(Of Size)(New Size() {New Size(50, 50)})
|
||||
|
||||
ListView.EndUpdate()
|
||||
|
||||
' we would like to draw over item's foreground (custom image)
|
||||
AddHandler ListView.DrawItem, AddressOf ListViewDrawItem
|
||||
' we would like to draw over item's background
|
||||
AddHandler ListView.DrawItemBackground, AddressOf ListViewDrawItemBackground</code></pre>
|
||||
|
||||
<p><span class="code">DrawItem</span> event handler draws on the item image
|
||||
area:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">void ListViewDrawItem(object sender, BetterListViewDrawItemEventArgs eventArgs)
|
||||
{
|
||||
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality;
|
||||
|
||||
Pen pen = new Pen(Color.BlueViolet, 2.5f);
|
||||
|
||||
// draw ellipse in the image area
|
||||
eventArgs.Graphics.DrawEllipse(
|
||||
pen,
|
||||
eventArgs.ItemBounds.SubItemBounds[0].BoundsImage);
|
||||
|
||||
pen.Dispose();
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Sub ListViewDrawItem(ByVal sender As Object, ByVal eventArgs As BetterListViewDrawItemEventArgs)
|
||||
|
||||
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality
|
||||
|
||||
Dim pen As New Pen(Color.BlueViolet, 2.5F)
|
||||
|
||||
' draw ellipse in the image area
|
||||
eventArgs.Graphics.DrawEllipse(pen, eventArgs.ItemBounds.SubItemBounds(0).BoundsImage)
|
||||
|
||||
pen.Dispose()
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<p><span class="code">DrawItemBackground</span> event handler draws on the item
|
||||
background area:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">void ListViewDrawItemBackground(object sender, BetterListViewDrawItemBackgroundEventArgs eventArgs)
|
||||
{
|
||||
Brush brush = new LinearGradientBrush(
|
||||
eventArgs.ItemBounds.BoundsInner,
|
||||
Color.FromArgb(64, Color.DarkSeaGreen),
|
||||
Color.Transparent,
|
||||
LinearGradientMode.ForwardDiagonal);
|
||||
|
||||
// draw over the item's background in the inner area
|
||||
eventArgs.Graphics.FillRectangle(brush, eventArgs.ItemBounds.BoundsInner);
|
||||
|
||||
brush.Dispose();
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Sub ListViewDrawItemBackground(ByVal sender As Object, ByVal eventArgs As BetterListViewDrawItemBackgroundEventArgs)
|
||||
|
||||
Dim brush As Brush = New LinearGradientBrush(
|
||||
eventArgs.ItemBounds.BoundsInner,
|
||||
Color.FromArgb(64, Color.DarkSeaGreen),
|
||||
Color.Transparent,
|
||||
LinearGradientMode.ForwardDiagonal)
|
||||
|
||||
' draw over the item's background in the inner area
|
||||
eventArgs.Graphics.FillRectangle(brush, eventArgs.ItemBounds.BoundsInner)
|
||||
|
||||
brush.Dispose()
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-multi-line.html"><strong>
|
||||
« Multi-line Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-performance.html"><strong>Performance »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Performance</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-owner-draw.html"><strong>
|
||||
« Owner Drawing</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-save-load.html"><strong>Saving and Loading ListView Content »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Performance</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="beginupdate-endupdate" id="beginupdate-endupdate"></a>Using BeginUpdate and
|
||||
EndUpdate</h2>
|
||||
|
||||
|
||||
<p>When doing several operations with Better ListView at a time, these
|
||||
operations should be enclosed in BeginUpdate and EndUpdate method
|
||||
calls.</p>
|
||||
|
||||
<p>For example:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.BeginUpdate();
|
||||
|
||||
for (int i = 0; i < 100; i++)
|
||||
{
|
||||
listView.Items.Add(String.Format("Item no. {0}", i));
|
||||
}
|
||||
|
||||
listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
For i As Integer = 0 To 99
|
||||
ListView.Items.Add([String].Format("Item no. {0}", i))
|
||||
Next
|
||||
|
||||
listView.EndUpdate()</code></pre>
|
||||
|
||||
<p>Without these methods, Better ListView would refresh itself 100
|
||||
times and the whole operation would take noticeable time. The same applies
|
||||
to setting properties or modifying other collections (column headers,
|
||||
sub-items, child items, groups) so it is still convenient to use
|
||||
<span class="code">BeginUpdate</span> and <span class="code">EndUpdate</span> when setting multiple
|
||||
properties:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">BeginUpdate();
|
||||
|
||||
listView.Items[0].SubItems[1].Align = TextAlignment.Right;
|
||||
|
||||
listView.MultiSelect = true;
|
||||
listView.CheckBoxes = BetterListViewCheckBoxes.TwoState;
|
||||
|
||||
EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">BeginUpdate()
|
||||
|
||||
ListView.Items(0).SubItems(1).Align = TextAlignment.Right
|
||||
|
||||
ListView.MultiSelect = True
|
||||
ListView.CheckBoxes = BetterListViewCheckBoxes.TwoState
|
||||
|
||||
EndUpdate()</code></pre>
|
||||
|
||||
<p>There can be multiple calls of <span class="code">BeginUpdate</span> and the
|
||||
control will actually refresh after the same number of
|
||||
<span class="code">EndUpdate</span> calls are made.</p>
|
||||
|
||||
<p>It is also possible to call <span class="code">EndUpdate</span> with boolean
|
||||
parameter. The call <span class="code">EndUpdate(true)</span> will avoid refreshing the
|
||||
control, but still move the control out of the updation state.</p>
|
||||
|
||||
<p>To check whether the control is in updation state, use the
|
||||
<span class="code">IsUpdating</span> property:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// intentionally call BeginUpdate twice
|
||||
BeginUpdate();
|
||||
BeginUpdate();
|
||||
|
||||
// listView.IsUpdating is true
|
||||
|
||||
EndUpdate();
|
||||
|
||||
// still updating, listView.IsUpdating is true
|
||||
|
||||
EndUpdate();
|
||||
|
||||
// still updating, listView.IsUpdating is false</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' intentionally call BeginUpdate twice
|
||||
BeginUpdate()
|
||||
BeginUpdate()
|
||||
|
||||
' listView.IsUpdating is true
|
||||
|
||||
EndUpdate()
|
||||
|
||||
' still updating, listView.IsUpdating is true
|
||||
|
||||
EndUpdate()
|
||||
|
||||
' still updating, listView.IsUpdating is false</code></pre>
|
||||
|
||||
|
||||
<h2>Performance of Image versus ImageList</h2>
|
||||
|
||||
|
||||
<p>There are two ways of setting images to Better ListView elements:
|
||||
<span class="code">Image</span> property and <span class="code">ImageList</span> property.</p>
|
||||
|
||||
<p><span class="code">ImageList</span> is convenient when you want to use images
|
||||
which are not attached directly to elements (the element - e.g. item -
|
||||
only refers to image index or key within the global image list). The
|
||||
performance of <span class="code">ImageList</span>, however, is quite slow. The
|
||||
slowness can be painful in some critical cases, like column
|
||||
resizing.</p>
|
||||
|
||||
<p>When working with many items, we recommend using <span class="code">Image</span>
|
||||
property instead.</p>
|
||||
|
||||
|
||||
<h2>Performance Properties</h2>
|
||||
|
||||
|
||||
<p>Better ListView was designed to be responsive to user although it is
|
||||
quite complex control. It is sometimes convenient to adjust optimization
|
||||
settings. This can be done through the following properties:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">BetterListView.AutoSizeItemsInDetailsView</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">false</span> by default</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListView.CacheImages</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">true</span> by default</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListView.MaximumToolTipTextLength</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">1000</span> by default</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListView.OptimizedInvalidation</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">true</span> by default</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListViewColumnHeader.SmoothColumnResize</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">true</span> by default. Can be set on each column header
|
||||
separately.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListView.SortOnCollectionChange</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">true</span> by default</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Automatic Resizing of Items in Details View</h2>
|
||||
|
||||
|
||||
<p>Better ListView supports displaying items in
|
||||
<strong><em>Details</em></strong> view even when there are no columns. When
|
||||
columns are displayed, item width is determined by the total width of all
|
||||
columns. When columns are not present, items have fixed width by default.
|
||||
By settings <span class="code">AutoSizeItemsInDetailsView</span> property to
|
||||
<span class="code">true</span>, items will be always stretched to client area width.
|
||||
The following images shows item size without and with automatic
|
||||
resizing:</p>
|
||||
|
||||
<p class="images"><img src="performance-autosizeitemsindetailsview1.png"></p>
|
||||
|
||||
<p class="images"><img src="performance-autosizeitemsindetailsview2.png"></p>
|
||||
|
||||
<p>Items are not resized by default, because it slows performance when
|
||||
Better ListView contains huge number of items.</p>
|
||||
|
||||
|
||||
<h2>Image Caching</h2>
|
||||
|
||||
|
||||
<p>When Better ListView contains images of various sizes which are
|
||||
possibly downscaled, its performance can drop. Showing image frames and
|
||||
shadows can slow down redrawing of the control even more. When
|
||||
<span class="code">CacheImages</span> property is set to <span class="code">true</span>, Better
|
||||
ListView downscales every image just once and then stores the scaled image
|
||||
(also with its frame) to internal cache. The scaled image is then
|
||||
displayed quickly.</p>
|
||||
|
||||
<p>The cache is cleared whenever an item property si changed affecting
|
||||
image or its border.</p>
|
||||
|
||||
|
||||
<h2>Optimized Invalidation</h2>
|
||||
|
||||
|
||||
<p>When user moves mouse cursor over the control, not all the elements
|
||||
have to be redrawn. For example, when user moves mouse cursor from column
|
||||
header A to item B, hot state of these elements changes and only these two
|
||||
elements are be redrawn. Optimized invalidation finds always the smallest
|
||||
region to redraw.</p>
|
||||
|
||||
<p>This behavior is used when <span class="code">OptimizedInvalidation</span>
|
||||
property is set to <span class="code">true</span>. This behavior can be sometimes
|
||||
unwanted, e.g. on some specific <strong><em><a href="chapter-owner-draw.html">Owner drawing</a></em></strong>.</p>
|
||||
|
||||
|
||||
<h2>Smooth Column Resizing</h2>
|
||||
|
||||
|
||||
<p>When columns are resized in <strong><em>Details</em></strong> view, the
|
||||
items and sub-items are resized as well. Item resizing may pose a
|
||||
performance bottleneck, when there are huge number of items present and
|
||||
column resizing animation may not be smooth. It is possible to set
|
||||
<span class="code">BetterListViewColumnHeader.SmoothColumnResize</span> property to
|
||||
<span class="code">false</span>, which will cause items and sub-items in the specific
|
||||
column to be resized only once: when column resizing is finished (e.g.
|
||||
when user releases mouse button).</p>
|
||||
|
||||
<p>When the smooth column resizing feature is turned off, a line is
|
||||
displayed that shows new column width:</p>
|
||||
|
||||
<p class="images"><img src="performance-smoothcolumnresize.png"></p>
|
||||
|
||||
|
||||
<h2>Sorting on Collection Change</h2>
|
||||
|
||||
|
||||
<p>When the Better ListView is sorted and its content is changed, it
|
||||
keeps sort order by default. This needs, however, to re-sort all the items
|
||||
whenever there is some change.</p>
|
||||
|
||||
<p>This behavior can be turned off by settings
|
||||
<span class="code">SortOnCollectionChanged</span> property to <span class="code">false</span>. In
|
||||
that case, Better ListView does not guarantee that the Items collection is
|
||||
always sorted and you have to perform sorting manually, when
|
||||
needed.</p>
|
||||
|
||||
|
||||
<h2>Maximum ToolTip Text Length</h2>
|
||||
|
||||
|
||||
<p>The property <span class="code">MaximumToolTipTextLength</span> limits the
|
||||
maximum allowed length of text within automatic tooltips. When element
|
||||
text is very long, it may take a long time for a tooltip to
|
||||
display.</p>
|
||||
|
||||
<p>When the element text is too long, it is shortened to length of
|
||||
(<span class="code">MaximumToolTipTextLength - 1</span>) and an ellipsis character is
|
||||
added at the end of the text.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-owner-draw.html"><strong>
|
||||
« Owner Drawing</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-save-load.html"><strong>Saving and Loading ListView Content »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Saving and Loading ListView Content</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-performance.html"><strong>
|
||||
« Performance</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-search.html"><strong>Searching Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Saving and Loading ListView Content</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView provides methods for storing its content (items with
|
||||
columns and groups) in a file or stream:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">SaveContentBinary(string filename)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">SaveContentBinary(Stream stream)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">SaveContentXml(string filename)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">SaveContentXml(XmlWriter writer)</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Analogically, there are methods to retrieving the stored content
|
||||
back:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">LoadContentBinary(string filename)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LoadContentBinary(Stream stream)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LoadContentXml(string filename)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">LoadContentXml(XmlReader reader)</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Storing Better ListView content in a file is very easy. The Following
|
||||
sample shows storing the content in a binary file:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// save Better ListView items, columns and groups in a XML file
|
||||
this.listView.SaveContentBinary("listview-content.dat");
|
||||
|
||||
// clear content to ensure it is loaded back correctly
|
||||
this.listView.Clear();
|
||||
|
||||
// restore content from file
|
||||
this.listView.LoadContentBinary("listview-content.dat");</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' save Better ListView items, columns and groups in a XML file
|
||||
ListView.SaveContentBinary("listview-content.dat")
|
||||
|
||||
' clear content to ensure it is loaded back correctly
|
||||
ListView.Clear()
|
||||
|
||||
' restore content from file
|
||||
ListView.LoadContentBinary("listview-content.dat")</code></pre>
|
||||
|
||||
<p>The content can be stored in either binary or XML format. For example,
|
||||
to store the content in a stream as formatted XML, use the following
|
||||
code:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">XmlTextWriter writer = new XmlTextWriter(stream, Encoding.UTF8);
|
||||
|
||||
writer.Formatting = Formatting.Indented;
|
||||
|
||||
listView.SaveContentXml(writer);
|
||||
|
||||
writer.Close();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Dim writer As New XmlTextWriter(stream, Encoding.UTF8)
|
||||
|
||||
writer.Formatting = Formatting.Indented
|
||||
|
||||
listView.SaveContentXml(writer)
|
||||
|
||||
writer.Close()</code></pre>
|
||||
|
||||
<p>Note that in this case it is necessary to have
|
||||
<span class="code">XmlTextReader.WhitespaceHandling</span> property set to
|
||||
<span class="code">None</span> when loading content from formatted XML stream because
|
||||
white spaces need to be skipped during the deserialization process.</p>
|
||||
|
||||
<p>Standard <strong><em><a href="chapter-serialization.html">Serialization</a></em></strong> mechanisms are
|
||||
used to store elements and its properties. The methods named above store
|
||||
also mapping between items and their corresponding groups. This cannot be
|
||||
done when simply serializing <span class="code">Groups</span> or <span class="code">Items</span>
|
||||
collection.</p>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">When content is loaded into Better ListView, the current content is
|
||||
cleared.</p>
|
||||
<hr>
|
||||
<br><br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-performance.html"><strong>
|
||||
« Performance</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-search.html"><strong>Searching Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Searching Items</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-save-load.html"><strong>
|
||||
« Saving and Loading ListView Content</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-serialization.html"><strong>Serialization »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Searching Items</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView offers many options for searching items by typing on
|
||||
keyboard and programmaticaly (<span class="code">FindItemWithText</span>,
|
||||
<span class="code">FindItemsWithText</span> methods). Search can be extended to sub-items
|
||||
and event multiple items can be contained in a search result.</p>
|
||||
|
||||
<p>Search can be customized with <span class="code">SearchSettings</span> property.
|
||||
This structure contains three other properties:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Mode</span><ul style="list-style:none"><li>
|
||||
<p>Specifies how the searching is done on each item/sub-item
|
||||
string.</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Disabled</span><ul style="list-style:none"><li>
|
||||
<p>Searching is disabled.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Prefix</span><ul style="list-style:none"><li>
|
||||
<p>Search is restricted to text prefix.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">PrefixOrSubstring</span><ul style="list-style:none"><li>
|
||||
<p>Search query can match any substring, if nothing found by
|
||||
prefix.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Substring</span><ul style="list-style:none"><li>
|
||||
<p>Search query can match any substring.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Options</span><ul style="list-style:none"><li>
|
||||
<p>Additional options for searching.</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">CaseSensitive</span><ul style="list-style:none"><li>
|
||||
<p>The search is case-sensitive.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">FirstWordOnly</span><ul style="list-style:none"><li>
|
||||
<p>Search is restricted to the first word of searched
|
||||
text.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>No options active.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">PlaySound</span><ul style="list-style:none"><li>
|
||||
<p>Sound is played, when nothing is found.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">PrefixPreference</span><ul style="list-style:none"><li>
|
||||
<p>Results matched by prefix are prefered among other (e.g.
|
||||
when searching for <strong><em>pla</em></strong>, then the text
|
||||
<strong><em>player</em></strong> is prefered among the word
|
||||
<strong><em>applause</em></strong>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SelectableItemsOnly</span><ul style="list-style:none"><li>
|
||||
<p>Restrict the search to selectable items only.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">WordSearch </span><ul style="list-style:none"><li>
|
||||
<p>Searched text si first split into words and searching is
|
||||
done on each word separately.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SubItemIndices</span><ul style="list-style:none"><li>
|
||||
<p>Specifies sub-items on which the search is done; if the
|
||||
collection is empty, than all sub-items are searched.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>There is a default one-second delay to register when user stopped
|
||||
typing and the search is discarded. A new search is initiated when user
|
||||
starts typing after this interval has passed. This interval can be set via
|
||||
<span class="code">SearchTimeoutDelay</span> property.</p>
|
||||
|
||||
<p>The delay is not relevant when user types the same letter several
|
||||
times and there are other items beginning with that letter. If there are
|
||||
items named <strong><em>ab</em></strong>, <strong><em>ac</em></strong>,
|
||||
<strong><em>ad</em></strong>, then the selection cycles through these items as
|
||||
long as the user keeps pressing <strong><em>A</em></strong> key. This works
|
||||
essentialy the same way as in the Windows Explorer.</p>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">The keyboard search works, of course, only when the control has
|
||||
focus. You can ensure this (e.g. when showing the form) by calling
|
||||
<span class="code">Focus</span> method on Better ListView.</p>
|
||||
<hr>
|
||||
<br><h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
// fill the ListView with items in two columns
|
||||
this.listView.Columns.AddRange(
|
||||
new[]
|
||||
{
|
||||
new BetterListViewColumnHeader("Word", 128),
|
||||
new BetterListViewColumnHeader("Synonym List", 160)
|
||||
});
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
new BetterListViewItem(new[] { "apparently", "evidently, presumably, seemingly" }),
|
||||
new BetterListViewItem(new[] { "blunt", "brusque, curt, snippy" }),
|
||||
new BetterListViewItem(new[] { "class", "caste, estate, folk" }),
|
||||
new BetterListViewItem(new[] { "detailed", "elaborate, full, thorough" }),
|
||||
});
|
||||
|
||||
// search in substrings
|
||||
BetterListViewSearchMode searchMode = BetterListViewSearchMode.Substring;
|
||||
|
||||
// use case-sensitive searching and play sounds
|
||||
BetterListViewSearchOptions searchOptions = (BetterListViewSearchOptions.CaseSensitive | BetterListViewSearchOptions.PlaySound);
|
||||
|
||||
// search in the first and second column
|
||||
//NOTE: empty array also means searching in all columns
|
||||
int[] subItemIndices = new[] { 0, 1 };
|
||||
|
||||
// set-up the search
|
||||
this.listView.SearchSettings = new BetterListViewSearchSettings(searchMode, searchOptions, subItemIndices);
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
' fill the ListView with items in two columns
|
||||
ListView.Columns.AddRange(
|
||||
New BetterListViewColumnHeader() { _
|
||||
New BetterListViewColumnHeader("Word", 128),
|
||||
New BetterListViewColumnHeader("Synonym List", 160)
|
||||
})
|
||||
|
||||
ListView.Items.AddRange(
|
||||
New BetterListViewItem() { _
|
||||
New BetterListViewItem(New String() _
|
||||
{"apparently", "evidently, presumably, seemingly"}),
|
||||
New BetterListViewItem(New String() {"blunt", "brusque, curt, snippy"}),
|
||||
New BetterListViewItem(New String() {"class", "caste, estate, folk"}),
|
||||
New BetterListViewItem(New String() {"detailed", "elaborate, full, thorough"})
|
||||
})
|
||||
|
||||
' search in substrings
|
||||
Dim searchMode As BetterListViewSearchMode = BetterListViewSearchMode.Substring
|
||||
|
||||
' use case-sensitive searching and play sounds
|
||||
Dim searchOptions As BetterListViewSearchOptions =
|
||||
(BetterListViewSearchOptions.CaseSensitive Or BetterListViewSearchOptions.PlaySound)
|
||||
|
||||
' search in the first and second column
|
||||
'NOTE: empty array also means searching in all columns
|
||||
Dim subItemIndices As Integer() = New Integer() {0, 1}
|
||||
|
||||
' set-up the search
|
||||
ListView.SearchSettings = New BetterListViewSearchSettings (searchMode, searchOptions, subItemIndices)
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-save-load.html"><strong>
|
||||
« Saving and Loading ListView Content</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-serialization.html"><strong>Serialization »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Serialization</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-search.html"><strong>
|
||||
« Searching Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-sort.html"><strong>Sorting Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Serialization</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>All Better ListView elements, element collections and some support
|
||||
structures can be both <strong><em>binary</em></strong> and <strong><em>XML
|
||||
serialized</em></strong>. These classes implement <span class="code">ISerializable</span>
|
||||
and <span class="code">IXmlSerializable</span> interfaces. They are also marked by
|
||||
<span class="code">SerializableAttribute</span>.</p>
|
||||
|
||||
<p>Serializable element classes are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Serializable element collections are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeaderCollection</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroupCollection</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItemCollection</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItemCollection</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Serializable support structures are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewAddress</span> (<span class="code">ToString</span> and
|
||||
<span class="code">Parse</span> methods can be also used instead of
|
||||
serialization)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewInsertionLocation</span> (see <strong><em><a href="chapter-insertion-mark.html">Insertion Mark</a></em></strong>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItemDragData</span> (see <strong><em><a href="chapter-drag-drop.html">Drag and Drop</a></em></strong>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSortList</span> (see <strong><em><a href="chapter-sort.html">Sorting Items</a></em></strong>)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewToolTipInfo</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewToolTipInfoCollection</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Comparing Elements and Collection by Value</h2>
|
||||
|
||||
|
||||
<p>When you need to check whether two objects from Better ListView
|
||||
(namely elements or collections) are same, you can serialize them and
|
||||
compare the serialized data. More efficient way to do the same is to call
|
||||
<span class="code">EqualsContent</span> method.</p>
|
||||
|
||||
<p>When using <span class="code">EqualsContent</span> on element instances, this
|
||||
method checks whether the two elements have same text, font, color...
|
||||
rather than whether there are the same instance (as happens with
|
||||
<span class="code">Equals</span> ro <span class="code">ReferenceEquals</span>):</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// create some item
|
||||
BetterListViewItem item1 = new BetterListViewItem("new iem");
|
||||
|
||||
// create second item as a clone of the first
|
||||
BetterListViewItem item2 = (BetterListViewItem)item1.Clone();
|
||||
|
||||
// check whether item1 and item2 are different instances
|
||||
item1.Equals(item2); // returns false
|
||||
|
||||
// check whether item1 and item2 have properties with the same values
|
||||
item1.EqualsContent(item2); // returns true</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' create some item
|
||||
Dim item1 As New BetterListViewItem("new iem")
|
||||
|
||||
' create second item as a clone of the first
|
||||
Dim item2 As BetterListViewItem = DirectCast(item1.Clone(), BetterListViewItem)
|
||||
|
||||
' check whether item1 and item2 are different instances
|
||||
item1.Equals(item2) ' returns false
|
||||
|
||||
' check whether item1 and item2 have properties with the same values
|
||||
item1.EqualsContent(item2) ' returns true</code></pre>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">When using <span class="code">EqualsContent</span> on collection instances,
|
||||
this method check whether both collections contain the same instances of
|
||||
collection items. It does not compare collection items by content. To do
|
||||
this, you still need to iterate both collections and call
|
||||
<span class="code">EqualsContent</span> on each collection element.</p>
|
||||
<hr>
|
||||
<br><br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-search.html"><strong>
|
||||
« Searching Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-sort.html"><strong>Sorting Items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,463 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Sorting Items</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-serialization.html"><strong>
|
||||
« Serialization</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-sub-items.html"><strong>Sub-items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Sorting Items</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView has extensive support for sorting, while it is usually
|
||||
very easy (few lines of code) to customize sorting by one's needs.</p>
|
||||
|
||||
<p>The only action needed to enable sorting is to set
|
||||
<span class="code">BetterListViewColumnHeader.Style</span> to <span class="code">Sortable</span> on
|
||||
every column you wish to enable user sorting.</p>
|
||||
|
||||
<h2>Multi-Column Sorting</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>When the <span class="code">AllowMultiColumnSorting</span> property is set to
|
||||
<span class="code">true</span> and there are multiple columns with <span class="code">Style</span>
|
||||
property set to <span class="code">Sortable</span>, user can sort items by multiple
|
||||
columns by holding <strong><em>Shift</em></strong> key while clicking on the
|
||||
sortable columns.</p>
|
||||
|
||||
<p>Here is a list of movies sorted by two columns:</p>
|
||||
|
||||
<p class="images"><img src="sorting-multi-column.png"></p>
|
||||
|
||||
<p>In this case, user first clicked on the
|
||||
<strong><em>Director</em></strong> column, and then twice on the
|
||||
<strong><em>Title</em></strong> column while holding <strong><em>Shift</em></strong>
|
||||
key. Now the list is sorted by the director's name in ascending order, but
|
||||
when director names are the same, their movie titles are sorted in
|
||||
descending order.</p>
|
||||
|
||||
<p>Sorted columns can also be un-sorted by clicking on them while
|
||||
holding a <strong><em>Control</em></strong> key.</p>
|
||||
|
||||
|
||||
<h2>Multi-Column Sorting from User Code</h2>
|
||||
|
||||
|
||||
<p>Better ListView uses list-based data structure called
|
||||
<span class="code">SortList</span> (accessible with the property of the same name) to
|
||||
store current sort state. <span class="code">SortList</span> contains indices and sort
|
||||
orders of the respective columns.</p>
|
||||
|
||||
<p>When a single solumn is sorted, <span class="code">SortList</span> contains one
|
||||
<span class="code">BetterListViewSortInfo</span> instance with index and sort order of
|
||||
that column.</p>
|
||||
|
||||
<p><span class="code">SortList</span> can be cloned (it is actually cloned every
|
||||
time you get a <span class="code">SortList</span> instance through the
|
||||
<span class="code">SortList</span> property getter). It is possible to copy sort state
|
||||
of one ListView to another:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView2.SortList = listView1.SortList;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">listView2.SortList = listView1.SortList</code></pre>
|
||||
|
||||
<p>The list gets sorted when <span class="code">SortList</span> property is
|
||||
set.</p>
|
||||
|
||||
|
||||
<h2>Sorting Item Hierarchy</h2>
|
||||
|
||||
|
||||
<p><strong><em><a href="chapter-item-hierarchy.html">Child items</a></em></strong>
|
||||
are sorted by default. If you want to disable hierarchical sorting, simply
|
||||
set <span class="code">BetterListViewItem.AllowSortChildItems</span> property to
|
||||
<span class="code">false</span>.</p>
|
||||
|
||||
<p>Another approach to more customized hierarchical sorting (e.g. when
|
||||
you want to sort child items with different comparer than parent items) is
|
||||
to use <span class="code">Sort</span> method of the item collection itself (be it
|
||||
<span class="code">BetterListView.Items</span> or
|
||||
<span class="code">BetterListViewItem.ChildItems</span>).</p>
|
||||
|
||||
|
||||
<h2>Sorting by Key or Value</h2>
|
||||
|
||||
|
||||
<p>Sometimes, there are items with non-textual data that cannot be
|
||||
sorted simply by string comparison. For example, there can be progress
|
||||
bars or other graphic gauges on items. To sort such items (sub-items),
|
||||
Better ListView can gather data from two other properties:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">BetterListViewItem.Key</span>
|
||||
(<span class="code">BetterListViewSubItem.Key</span>)<ul style="list-style:none"><li>
|
||||
<p>.<span class="code">IComparable</span> object explicitly specified by the
|
||||
user for item comparison purposes.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">BetterListViewItem.Value</span>
|
||||
(<span class="code">BetterListViewSubItem.Value</span>)<ul style="list-style:none"><li>
|
||||
<p>Value of a property from bound data source specified by the
|
||||
ValueMember property of the corresponding column (see <strong><em><a href="chapter-data.html">Data Binding</a></em></strong> for more
|
||||
information).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>There are three sorting methods that are possible on each column
|
||||
separately (see
|
||||
<span class="code">BetterListViewColumnHeader.SortMethod</span>):</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Auto</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">Key</span> is used primarily for comparison; if not
|
||||
available the comparer falls back to <span class="code">Value</span>, and if even
|
||||
this is not available, <span class="code">Text</span> is used.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Text</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">Text</span> is always used for comparison.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Key</span><ul style="list-style:none"><li>
|
||||
<p><span class="code">Key</span> is used always for comparison.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Custom and Natural (Alphanumeric) Item Comparers</h2>
|
||||
|
||||
|
||||
<p>Better ListView uses <span class="code">BetterListView.ItemComparer</span> for
|
||||
item comparison. You can set this property using custom comparer of type
|
||||
<span class="code">BetterListViewItemComparer</span>.</p>
|
||||
|
||||
<p>There are two comparers already implemented in Better ListView.
|
||||
These can be used publicly and extended:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewDefaultItemComparer</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewNaturalItemComparer</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The difference between the two is explained in <strong><em><a href="chapter-sort.html#alphanumeric-sorting">Alphanumeric Sorting</a></em></strong> section
|
||||
below.</p>
|
||||
|
||||
|
||||
<h2>Making a Custom Item Comparer</h2>
|
||||
|
||||
|
||||
<p>To make a new item comparer with custom comparison rules, create a
|
||||
new class inheriting from <span class="code">BetterListViewItemComparer</span>.</p>
|
||||
|
||||
<p><span class="code">BetterListViewItemComparer</span> implements several methods
|
||||
doing item comparison on various levels. These methods can be overriden to
|
||||
customize sorting behavior:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Compare</span><ul style="list-style:none"><li>
|
||||
<p>Compares two items. This is the core method for item
|
||||
comparison. <span class="code">BetterListViewItemComparer</span> implements
|
||||
multi-column sorting here and calls <span class="code">CompareSubItems</span> and
|
||||
<span class="code">CompareEqualItems</span> from here.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CompareSubItems</span><ul style="list-style:none"><li>
|
||||
<p>Compares two sub-items in the same column. Here the
|
||||
<span class="code">BetterListViewItemComparer</span> implements sorting methods
|
||||
(specified by <span class="code">BetterListViewColumnHeader.SortMethod</span>
|
||||
property) and calls <span class="code">CompareValues</span> from here. The
|
||||
sub-items are compared here either by value, key or by text.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CompareValues</span><ul style="list-style:none"><li>
|
||||
<p>Compares two arbitrary <span class="code">IComparable</span> values in the
|
||||
specified order. <span class="code">BetterListViewItemComparer</span> implements
|
||||
comparison with possible <span class="code">null</span> values and regarding the
|
||||
sort order.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CompareEqualItems</span><ul style="list-style:none"><li>
|
||||
<p>When two items are considered equal in the
|
||||
<span class="code">Compare</span> method, <span class="code">BetterListViewItemComparer</span>
|
||||
calls this method, which compares the items by their index.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>It is not necessary to override all the above methods, since they
|
||||
are already implemented in the <span class="code">BetterListViewItemComparer</span>
|
||||
base class.</p>
|
||||
|
||||
<p>For example, if we want to create a custom comparer that compares
|
||||
items accroding to their check box state:</p>
|
||||
|
||||
<p class="images"><img src="sorting-custom.png"></p>
|
||||
|
||||
<p>we only have to override the <span class="code">Compare</span> method. If the
|
||||
check box state is the leading criterion for sorting, we implement the
|
||||
comparison and then call <span class="code">Compare</span> method of the base class (to
|
||||
allow for multi-column sorting, further sorting according to item text
|
||||
etc.). Our custom "checkbox" comparer would look like this:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">class CheckBoxItemComparer : BetterListViewItemComparer
|
||||
{
|
||||
public override int Compare(BetterListViewItem itemA, BetterListViewItem itemB)
|
||||
{
|
||||
if (itemA != null &&
|
||||
itemB != null)
|
||||
{
|
||||
int valueA = (itemA.Checked
|
||||
? 1
|
||||
: 0);
|
||||
|
||||
int valueB = (itemB.Checked
|
||||
? 1
|
||||
: 0);
|
||||
|
||||
int result = valueA.CompareTo(valueB);
|
||||
|
||||
if (result != 0)
|
||||
{
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
return base.Compare(itemA, itemB);
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Class CheckBoxItemComparer Inherits BetterListViewItemComparer
|
||||
|
||||
Public Overrides Function Compare(itemA As BetterListViewItem, itemB As BetterListViewItem) As Integer
|
||||
|
||||
If itemA IsNot Nothing AndAlso itemB IsNot Nothing Then
|
||||
|
||||
Dim valueA As Integer = (If(itemA.Checked, 1, 0))
|
||||
|
||||
Dim valueB As Integer = (If(itemB.Checked, 1, 0))
|
||||
|
||||
Dim result As Integer = valueA.CompareTo(valueB)
|
||||
|
||||
If result <> 0 Then
|
||||
Return result
|
||||
End If
|
||||
|
||||
End If
|
||||
|
||||
Return MyBase.Compare(itemA, itemB)
|
||||
|
||||
End Function
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<p>On the contrary, if you want to make check box the least important
|
||||
criteria in the sorting, put the comparison in the
|
||||
<span class="code">CompareEqualItems</span> method.</p>
|
||||
|
||||
<p>Finally, if the comparison result of the custom comparer depends on
|
||||
other sub-items, consider implementing the <span class="code">CompareSubItems</span>
|
||||
method.</p>
|
||||
|
||||
|
||||
<h2>Highlighting the Sorted Column</h2>
|
||||
|
||||
|
||||
<p class="images"><img src="sorting-highlight.png"></p>
|
||||
|
||||
<p>There are two properties influencing column highlighting:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">SortedColumnsRowsHighlight</span><ul style="list-style:none"><li>
|
||||
<p>Affects sorted column highlighting.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ColorSortedColumn</span><ul style="list-style:none"><li>
|
||||
<p>Affects color of the highlighted column.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The column highlighting is practical in multi-column sorting,
|
||||
because it shows which column is the major one (the first sorted). By
|
||||
default, the first sorted column is highlighted in multi-column
|
||||
sorting.</p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="alphanumeric-sorting" id="alphanumeric-sorting"></a>Alphanumeric Sorting</h2>
|
||||
|
||||
|
||||
<p class="images"><img src="sorting-alphanum1.png"><img src="sorting-alphanum2.png"></p>
|
||||
|
||||
<p>The most popular way of sorting (left image) is comparing text
|
||||
values of items by their ordinal value because such comparison is
|
||||
straightforward to implement.</p>
|
||||
|
||||
<p>Better ListView supports also alphanumeric (or natural) ordering of
|
||||
items, where numbers and words are compared separately. This gives us more
|
||||
convenient results (right image - see how numbers are ordered by their
|
||||
true value).</p>
|
||||
|
||||
<p>To use alphanumeric sorting, simply write:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.ItemComparer = new BetterListViewNaturalItemComparer();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.ItemComparer = New BetterListViewNaturalItemComparer()</code></pre>
|
||||
|
||||
|
||||
<h2>Suspending the Automatic Sorting</h2>
|
||||
|
||||
|
||||
<p>When items are sorted, any change in items (e.g. item added, label
|
||||
edited...) causes updating the items to keep them sorted. It is convenient
|
||||
in some situations to suspend this mechanism. For example, when one does
|
||||
several changes in items and want to re-sort them in the end.</p>
|
||||
|
||||
<p>Better ListView provides <span class="code">SuspendSort</span> and
|
||||
<span class="code">ResumeSort</span> to achieve just this. These methods work in the
|
||||
same fashion as <span class="code">BeginUpdate</span> / <span class="code">EndUpdate</span>. It is
|
||||
possible to nest these methods using multiple calls, so
|
||||
<span class="code">ResumeSort</span> have to be called same number of times as
|
||||
<span class="code">SuspendSort</span> to actually resume the automatic sorting.</p>
|
||||
|
||||
<p>The <span class="code">ResumeSort</span> have a boolean parameter specifying
|
||||
whether this call should also update item order (perform re-sorting). If
|
||||
you pass <span class="code">true</span> to this method, item update (re-sorting) will
|
||||
not be executed and is done after some change is made to items.</p>
|
||||
|
||||
|
||||
<h2>Unsorting</h2>
|
||||
|
||||
|
||||
<p>Sorting affects the order of items in the list and also introduces
|
||||
visual cues of the sort state. These can be removed by simply calling
|
||||
<span class="code">Unsort</span> method.</p>
|
||||
|
||||
<p>Alternatively, setting <span class="code">BetterListView.SortList</span> to
|
||||
either empty <span class="code">SortList</span> or null does the same job.</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Columns.Add("Text");
|
||||
|
||||
this.listView.Columns[0].Style = BetterListViewColumnHeaderStyle.Sortable;
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
"Beta 009",
|
||||
"Alpha 113",
|
||||
"Charlie2",
|
||||
"Alpha 96",
|
||||
"Beta 030",
|
||||
"Charlie1"
|
||||
});
|
||||
|
||||
// suspend sorting so that items will not be sorted by setting ItemComparer (we let user to sort them by himself by clicking the column)
|
||||
this.listView.SuspendSort();
|
||||
|
||||
// set natural item comparer provided by Better ListView
|
||||
// to reset comparer, simply set it to 'null' or new instance of 'BetterListViewItemComparer'
|
||||
this.listView.ItemComparer = new BetterListViewNaturalItemComparer();
|
||||
|
||||
// resume sorting so that user will be able to sort items by himself
|
||||
this.listView.ResumeSort(true);
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
ListView.Columns.Add ("Text")
|
||||
|
||||
ListView.Columns (0).Style = BetterListViewColumnHeaderStyle.Sortable
|
||||
|
||||
ListView.Items.AddRange(
|
||||
New String() {
|
||||
"Beta 009",
|
||||
"Alpha 113",
|
||||
"Charlie2",
|
||||
"Alpha 96",
|
||||
"Beta 030",
|
||||
"Charlie1"
|
||||
})
|
||||
|
||||
' suspend sorting so that items will not be sorted by setting ItemComparer (we let user to sort them by himself by clicking the column)
|
||||
ListView.SuspendSort()
|
||||
|
||||
' set natural item comparer provided by Better ListView
|
||||
' to reset comparer, simply set it to 'null' or new instance of 'BetterListViewItemComparer'
|
||||
ListView.ItemComparer = New BetterListViewNaturalItemComparer()
|
||||
|
||||
' resume sorting so that user will be able to sort items by himself
|
||||
ListView.ResumeSort (True)
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-serialization.html"><strong>
|
||||
« Serialization</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-sub-items.html"><strong>Sub-items »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Sub-items</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-sort.html"><strong>
|
||||
« Sorting Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-tooltips.html"><strong>Tooltips »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Sub-items</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Every item within the list view can contain sub-items. These can be
|
||||
accessed using <span class="code">BetterListViewItem.SubItems</span> collection.</p>
|
||||
|
||||
<p>Sub-items are displayed only in the <strong><em>Details</em></strong> view
|
||||
when the columns are present. Each item can have any number of sub-items,
|
||||
but the number of sub-items displayed is limited by the number of column
|
||||
headers.</p>
|
||||
|
||||
<p>The following screenshot shows Better ListView with items and
|
||||
sub-items displayed on the right of each items (in columns) with one
|
||||
sub-item being focused (see <strong><em><a href="chapter-focus.html">Focusing
|
||||
Elements</a></em></strong> for more information):</p>
|
||||
|
||||
<p class="images"><img src="sub-items.png"></p>
|
||||
|
||||
<h2>Sub-item Visibility</h2>
|
||||
|
||||
|
||||
<p>Sub-item visibility depends on current view and column
|
||||
headers.</p>
|
||||
|
||||
<p>In <strong><em>Details</em></strong> view, every column header has a
|
||||
corresponding sub-item. If all column headers are visible, sub-item
|
||||
indices (<span class="code">BetterListViewSubItem.Index</span>) corresponding to their
|
||||
display order. When individual column headers are <strong><em><a href="chapter-columns.html#hide-custom">hidden</a></em></strong>, the
|
||||
corresponding sub-items are hidden as well. The display order can be
|
||||
retrieved using <span class="code">BetterListViewSubItem.DisplayIndex</span> property
|
||||
in the same way as <span class="code">BetterListViewColumnHeader.DisplayIndex</span>
|
||||
property. Of course, sub-items with higher display index than the display
|
||||
index of the last column are hidden.</p>
|
||||
|
||||
<p>In <strong><em>Tile</em></strong> view, image and label of the first
|
||||
sub-item is displayed along with labels of the other sub-items.</p>
|
||||
|
||||
<p>In other views, only the first sub-item is visible.</p>
|
||||
|
||||
|
||||
<h2>Copying sub-items</h2>
|
||||
|
||||
|
||||
<p>The sub-item collection behaves differently than other collections
|
||||
present in Better ListView.</p>
|
||||
|
||||
<p>It always have to contain at least one sub-item. Even if you call
|
||||
<span class="code">Clear</span> method, one sub-item remains in the collection. This is
|
||||
because this sub-item represents properties of the item itself.</p>
|
||||
|
||||
<p>To copy sub-items from one item to another, you have to consider
|
||||
<strong><em>setting</em></strong> the first sub-item, while adding the
|
||||
other:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">itemTarget.SubItems[0] = (BetterListViewSubItem)itemSource.SubItems[0].Clone();
|
||||
|
||||
for (int indexSubItem = 1; indexSubItem < itemSource.SubItems.Count; indexSubItem++)
|
||||
{
|
||||
itemTarget.SubItems.Add((BetterListViewSubItem)itemSource.SubItems[indexSubItem].Clone());
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">itemTarget.SubItems(0) = DirectCast(itemSource.SubItems(0).Clone(), BetterListViewSubItem)
|
||||
|
||||
For indexSubItem As Integer = 1 To itemSource.SubItems.Count - 1
|
||||
itemTarget.SubItems.Add(DirectCast(itemSource.SubItems(indexSubItem).Clone(), BetterListViewSubItem))
|
||||
Next</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-sort.html"><strong>
|
||||
« Sorting Items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-tooltips.html"><strong>Tooltips »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,548 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Text Formatting</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-loading.html"><strong>
|
||||
« Loading Thumbnails</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-background-image.html"><strong>Background Image »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Text Formatting</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Text formatting consists of text alignment, trimming, font and color.
|
||||
It can be adjusted on column headers, groups, items and sub-items.</p>
|
||||
|
||||
<h2>Formatting File Names</h2>
|
||||
|
||||
|
||||
<p>In case the Better Thumbnail Browser is populated automatically by
|
||||
files from a folder (specified by setting the <span class="code">Path</span> property),
|
||||
the file name format can be specified by setting the
|
||||
<span class="code">FilenameFormatOptions</span> property. It is an enumeration with
|
||||
following flags:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>No extra formatting applied.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">LowerCase</span><ul style="list-style:none"><li>
|
||||
<p>Convert label to lower case.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">UpperCase</span><ul style="list-style:none"><li>
|
||||
<p>Convert label to upper case.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ShowExtension</span><ul style="list-style:none"><li>
|
||||
<p>Include file extension.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Multi-line Text</h2>
|
||||
|
||||
|
||||
<p>Item labels can have multiple lines and custom line breaks can be
|
||||
used. The maximum allowed number of text lines is specified by
|
||||
<span class="code">ThumbnailTextLines</span> property.</p>
|
||||
|
||||
<p>For more information about formatting text, see <strong><em><a href="chapter-layout.html#text-layout">Text Layout</a></em></strong>.</p>
|
||||
|
||||
|
||||
<h2>Customized Item/Sub-tem Text</h2>
|
||||
|
||||
|
||||
<p>Items and sub-items display the same string as specified in their
|
||||
<span class="code">Text</span> property. You can format this text for display without
|
||||
changing the source string in the <span class="code">Text</span> property.</p>
|
||||
|
||||
<p>For example, one may have data bound items with numbers. The item
|
||||
<span class="code">Text</span> property contains value <strong><em>"35"</em></strong>, but
|
||||
he wants to display <strong><em>"35 pcs"</em></strong> without altering the
|
||||
<span class="code">Text</span> property, which would cause modifying the data
|
||||
source.</p>
|
||||
|
||||
<p>The following screenshots show list with and without custom text
|
||||
formatting:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-format1.png"></p>
|
||||
|
||||
<p class="images"><img src="text-formatting-format2.png"></p>
|
||||
|
||||
<p>To enable formatting, set the
|
||||
<span class="code">BetterListViewItem.FormatText</span>
|
||||
(<span class="code">BetterListViewItem.FormatText</span>) property on the respective
|
||||
item or sub-item. Then add handler for <span class="code">FormatText</span> event and
|
||||
use the properties of BetterListViewFormatItemEventArgs:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Item</span><ul style="list-style:none"><li>
|
||||
<p>Item which is being formatted.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SubItemIndex</span><ul style="list-style:none"><li>
|
||||
<p>Index of sub-item which is being formatted. If you have
|
||||
multiple sub-items in your list, the <span class="code">FormatText</span> event
|
||||
will be raised several times for each sub-item.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CurrentText</span><ul style="list-style:none"><li>
|
||||
<p>Original text to be formatted.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">NewText</span><ul style="list-style:none"><li>
|
||||
<p>Formatted text. The property initially contains same value as
|
||||
<span class="code">CurrentText</span> and can be changed in the
|
||||
<span class="code">FormatText</span> event handler.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The formatted text can be retrieved in run-item using the
|
||||
<span class="code">BetterListViewItem.DisplayText</span>
|
||||
(<span class="code">BetterListViewSubItem.DisplayText</span>). This property has no
|
||||
setter because the display text can only be changed via the formatting
|
||||
event (<span class="code">FormatText</span>).</p>
|
||||
|
||||
<p>If you want to re-format the text, call
|
||||
<span class="code">BetterListViewItem.RefreshDisplayText</span> method. Of course, if
|
||||
you want to refresh multiple items, it is more convenient to wrap
|
||||
<span class="code">BetterListViewItem.RefreshDisplayText()</span> calls between
|
||||
<span class="code">BeginUpdate()</span> and <span class="code">EndUpdate()</span>calls (see <strong><em><a href="chapter-performance.html#beginupdate-endupdate">Performance -
|
||||
Using BeginUpdate and EndUpdate</a></em></strong>).</p>
|
||||
|
||||
|
||||
<h2>Text Alignment</h2>
|
||||
|
||||
|
||||
<p>Text in column header, item, sub-item and group elements can be
|
||||
aligned horizontally and vertically. The following images shows different
|
||||
horizontal alignment of sub-items...</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-align1.png"></p>
|
||||
|
||||
<p>...and groups:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-align2.png"></p>
|
||||
|
||||
<p>Following properties govern horizontal text alignment on different
|
||||
element types:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.AlignHorizontal</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.HeaderAlignmentHorizontal</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.AlignHorizontal</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItem.AlignHorizontal</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>All of these are of type <span class="code">TextAlignment</span> with values
|
||||
<span class="code">Left</span>, <span class="code">Center</span>, <span class="code">Right</span> and
|
||||
<span class="code">Default</span>.</p>
|
||||
|
||||
<p>Following properties govern vertical text alignment on different
|
||||
element types:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.AlignVertical</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.HeaderAlignmentVertical</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.AlignVertical</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItem.AlignVertical</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>All of these are of type <span class="code">TextAlignmentVertical</span> with
|
||||
values <span class="code">Top</span>, <span class="code">Middle</span>, <span class="code">Bottom</span> and
|
||||
<span class="code">Default</span>.</p>
|
||||
|
||||
<p>The <span class="code">Default</span> value means that the alignment is
|
||||
determined from the current view default (this default alignment can also
|
||||
be modified, see <strong><em><a href="chapter-layout.html#default-alignment-trimming">Default Text
|
||||
Alignment and Trimming</a></em></strong>).</p>
|
||||
|
||||
<p>Following image shows different text alignments in the selected
|
||||
items and group:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-vertical-align.png"></p>
|
||||
|
||||
|
||||
<h2>Text Trimming</h2>
|
||||
|
||||
|
||||
<p>Text trimming is a method of shortening text when it is otherwise
|
||||
too long to be displayed in text area. There are several trimming
|
||||
options:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">None</span><ul style="list-style:none"><li>
|
||||
<p>No triming is applied and the text is just clipped,</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Character</span><ul style="list-style:none"><li>
|
||||
<p>Text is trimmed to the last visible character.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Word</span><ul style="list-style:none"><li>
|
||||
<p>Text is trimmed to the last visible word.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">EllipsisCharacter</span><ul style="list-style:none"><li>
|
||||
<p>Same as Character, but ellipsis (…) is added at the end of the
|
||||
text.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">EllipsisWord</span><ul style="list-style:none"><li>
|
||||
<p>Same as Word, but ellipsis (…) is added at the end of the
|
||||
text.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">EllipsisPath</span><ul style="list-style:none"><li>
|
||||
<p>Trimming for paths, the beginning and end of the path is
|
||||
retained and the ellipsis (…) is added in the middle of the
|
||||
text.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Here is an example of different trimming methods in action:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-trim.png"></p>
|
||||
|
||||
<p>Text trimming works also with multi-line text (see <strong><em><a href="chapter-layout.html#text-layout">Text Layout</a></em></strong>), here is
|
||||
an example of breaking text into a maximum of four lines and then trimming
|
||||
with ellipsis:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-cheader1.png"><img src="text-formatting-cheader2.png"><img src="text-formatting-cheader3.png"></p>
|
||||
|
||||
<p>Following properties on different elements govern text
|
||||
trimming:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.TextTrimming</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.TextTrimming</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.TextTrimming</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItem.TextTrimming</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>
|
||||
<a name="text-wrapping" id="text-wrapping"></a>Text Wrapping</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Text wrapping defines how item (sub-item) text is broken in several
|
||||
lines with respect to other sub-items. This property can be set only on
|
||||
items (<span class="code">BetterListViewItem.TextTrimming</span>) and sub-items
|
||||
(<span class="code">BetterListViewSubitem.TextTrimming</span>) and the property has one
|
||||
of three values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>Layout<ul style="list-style:none"><li>
|
||||
<p>Default value. Item (sub-item) text can be split to number of
|
||||
lines defined by <span class="code">MaximumTextLines</span> property of the
|
||||
corresponding layout (see <strong><em><a href="chapter-layout.html#text-layout">Text
|
||||
Layout</a></em></strong>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>Space<ul style="list-style:none"><li>
|
||||
<p>Item (sub-item) text can be split to several lines, but only
|
||||
up to available space.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>None<ul style="list-style:none"><li>
|
||||
<p>Item (sub-item) text cannot be split (single line
|
||||
only).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The effect of different text wrapping modes can be seen on the
|
||||
following screenshot:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-wrap.png"></p>
|
||||
|
||||
<p>The sub-item in the first column has <span class="code">TextWrapping</span> set
|
||||
to <span class="code">Layout</span>, hence the text is split in up to four lines
|
||||
(<span class="code">MaximumTextLines</span> is <span class="code">4</span> in the sample).</p>
|
||||
|
||||
<p>The sub-item in the second column has <span class="code">TextWrapping</span> set
|
||||
to <span class="code">None</span>, hence the text not wrapped.</p>
|
||||
|
||||
<p>The sub-item in the third column has <span class="code">TextWrapping</span> set
|
||||
to <span class="code">Space</span>, so even though the text can be split to four lines,
|
||||
it can be split to only available space, which allows for only three
|
||||
lines. The available space here is governed by the first sub-item.</p>
|
||||
|
||||
|
||||
<h2>Hotkey Prefix</h2>
|
||||
|
||||
|
||||
<p>The hotkey prefix is an underlined character in item/sub-item label.
|
||||
It is indicated by ampersand (<strong><em>&</em></strong>) character before
|
||||
the character to be displayed with underline. The following picture show
|
||||
item with hotkey prefix display turned off and on:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-hotkey.png"></p>
|
||||
|
||||
<p>The hotkey prefix can be used for easier navigation in items (e.g.
|
||||
menu items) with just key presses. The actual implementation of such
|
||||
behavior is up to user, but Better ListView allows displaying hotkey
|
||||
prefixes on items and sub-items by setting
|
||||
<span class="code">BetterListViewItem.HotkeyPrefix</span>
|
||||
(<span class="code">BetterListViewSubItem.HotkeyPrefix</span>, respectively) to
|
||||
<span class="code">true</span>.</p>
|
||||
|
||||
|
||||
<h2>Font and Color</h2>
|
||||
|
||||
|
||||
<p>Column header, group, item and sub-item can have its own font and
|
||||
color:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-fontcolor.png"></p>
|
||||
|
||||
<p>Font and colors are controlled with properties <span class="code">Font</span>,
|
||||
<span class="code">ForeColor</span> and <span class="code">BackColor</span>.</p>
|
||||
|
||||
<p>By default, elements does not have a specific font and foreground
|
||||
color set and there are fallback schemes to obtain these values. The
|
||||
arrows in the schemes mean <strong><em>if not set, use the following
|
||||
value</em></strong>.</p>
|
||||
|
||||
<p>Column headers:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.Font</span> →
|
||||
<span class="code">BetterListView.FontColumns</span> →
|
||||
<span class="code">BetterListView.Font</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewColumnHeader.ForeColor</span> →
|
||||
<span class="code">BetterListView.ForeColorColumns</span> →
|
||||
<span class="code">BetterListView.ForeColor</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Groups:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.Font</span> →
|
||||
<span class="code">BetterListViewGroup.FontGroups</span> →
|
||||
<span class="code">BetterListViewGroup.DefaultFont</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.ForeColor</span> →
|
||||
<span class="code">BetterListViewGroup.ForeColorGroups</span> →
|
||||
<span class="code">BetterListViewGroup.ForeColor</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Items:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.Font</span> →
|
||||
<span class="code">BetterListView.FontItems</span> →
|
||||
<span class="code">BetterListView.Font</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.ForeColor</span> →
|
||||
<span class="code">BetterListView.ForeColorItems</span> →
|
||||
<span class="code">BetterListView.ForeColor</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItem.Font</span> →
|
||||
<span class="code">BetterListView.FontItems</span> →
|
||||
<span class="code">BetterListView.Font</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewSubItem.ForeColor</span> →
|
||||
<span class="code">BetterListView.ForeColorItems</span> →
|
||||
<span class="code">BetterListView.ForeColor</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<br><hr>
|
||||
<p class="note">Sub-items take into acount
|
||||
<span class="code">BetterListViewItem.UseItemStyleForSubItems</span>.</p>
|
||||
<hr>
|
||||
<br><p>To better understand these schemes, look at the following sample
|
||||
code:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">// all elements will be red
|
||||
listView.ForeColor = Color.Red;
|
||||
|
||||
// ...except for column headers which will be blue
|
||||
listView.ForeColorColumns = Color.Blue;
|
||||
|
||||
// ...except for second column header, which will be green
|
||||
listView.Columns[1].ForeColor = Color.Green;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' all elements will be red
|
||||
listView.ForeColor = Color.Red
|
||||
|
||||
' ...except for column headers which will be blue
|
||||
listView.ForeColorColumns = Color.Blue
|
||||
|
||||
' ...except for second column header, which will be green
|
||||
listView.Columns(1).ForeColor = Color.Green</code></pre>
|
||||
|
||||
<p>The result looks like this:</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-fallback.png"></p>
|
||||
|
||||
|
||||
<h2>Bold Items</h2>
|
||||
|
||||
|
||||
<p>Items and sub-items can be displayed with strong appearance using
|
||||
<span class="code">BetterListViewItem.IsBold</span> property
|
||||
(<span class="code">BetterListViewSubItem.IsBold</span>, respectively):</p>
|
||||
|
||||
<p class="images"><img src="text-formatting-isbold.png"></p>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">Sub-items take into acount
|
||||
<span class="code">BetterListViewItem.UseItemStyleForSubItems</span>.</p>
|
||||
<hr>
|
||||
<br><h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">//
|
||||
// create item with untrimmed text
|
||||
//
|
||||
BetterListViewItem itemNoTrim = new BetterListViewItem();
|
||||
|
||||
itemNoTrim.Text = "Label of this item does not use any trimming, so it is simply clipped.";
|
||||
// set no trimming for this item (text will be just clipped)
|
||||
itemNoTrim.TextTrimming = TextTrimming.None;
|
||||
|
||||
//
|
||||
// create item with word-trimmed text
|
||||
//
|
||||
BetterListViewItem itemTrimWord = new BetterListViewItem();
|
||||
|
||||
itemTrimWord.Text = "Label of this item is trimmed to the nearest word. Resize the window to see how this works.";
|
||||
// set trimming to whole words in this item
|
||||
itemTrimWord.TextTrimming = TextTrimming.EllipsisWord;
|
||||
|
||||
this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
itemNoTrim,
|
||||
itemTrimWord
|
||||
});
|
||||
|
||||
// resize items in Details view with content to show how the text gets trimmed
|
||||
// other way would be to add column and see text breaking when resizing the column
|
||||
this.listView.AutoSizeItemsInDetailsView = true;
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">'
|
||||
' create item with untrimmed text
|
||||
'
|
||||
Dim itemNoTrim As New BetterListViewItem()
|
||||
|
||||
itemNoTrim.Text = "Label of this item does not use any trimming, so it is simply clipped."
|
||||
' set no trimming for this item (text will be just clipped)
|
||||
itemNoTrim.TextTrimming = TextTrimming.None
|
||||
|
||||
'
|
||||
' create item with word-trimmed text
|
||||
'
|
||||
Dim itemTrimWord As New BetterListViewItem()
|
||||
|
||||
itemTrimWord.Text =
|
||||
"Label of this item is trimmed to the nearest word. Resize the window to see how this works."
|
||||
' set trimming to whole words in this item
|
||||
itemTrimWord.TextTrimming = TextTrimming.EllipsisWord
|
||||
|
||||
ListView.BeginUpdate()
|
||||
|
||||
ListView.Items.AddRange (New BetterListViewItem() {itemNoTrim, itemTrimWord})
|
||||
|
||||
' resize items in Details view with content to show how the text gets trimmed
|
||||
' other way would be to add column and see text breaking when resizing the column
|
||||
ListView.AutoSizeItemsInDetailsView = True
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-loading.html"><strong>
|
||||
« Loading Thumbnails</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-background-image.html"><strong>Background Image »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Tooltips</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-sub-items.html"><strong>
|
||||
« Sub-items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-views.html"><strong>Views »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Tooltips</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Single or multiple tooltips can be displayed on any element and
|
||||
element part, or even user-defined areas.</p>
|
||||
|
||||
<p>Instead of creating <span class="code">System.Windows.Forms.ToolTip</span>
|
||||
component and attaching it to the Better ListView, every type of element has
|
||||
a <span class="code">ToolTips</span> property holding a collection of tooltip data.
|
||||
Actual tooltips are then shown using the internal mechanism of Better
|
||||
ListView.</p>
|
||||
|
||||
<p>To display automatic or custom toolips, at least one of the following
|
||||
properties should be set to <span class="code">true</span>:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">ShowToolTips</span><ul style="list-style:none"><li>
|
||||
<p>Controls displaying tooltips on items.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ShowToolTipsColumns</span><ul style="list-style:none"><li>
|
||||
<p>Controls displaying tooltips on column headers.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ShowToolTipsGroups</span><ul style="list-style:none"><li>
|
||||
<p>Controls displaying tooltips on groups.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ShowToolTipsSubItems</span><ul style="list-style:none"><li>
|
||||
<p>Controls displaying tooltips on sub-items.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Automatic Tooltips</h2>
|
||||
|
||||
|
||||
<p>Better ListView can show tooltips automatically when text of a
|
||||
certain element (item, sub-item, column header, group) is not fully
|
||||
visible:</p>
|
||||
|
||||
<p class="images"><img src="tooltips-auto1.png"><img src="tooltips-auto2.png"></p>
|
||||
|
||||
<p>To activate automatic tooltips, set one of the following properties
|
||||
to <span class="code">true</span>:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">AllowAutoToolTips</span><ul style="list-style:none"><li>
|
||||
<p>Allow displaying automatic tooltips on items.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AllowAutoToolTipsColumns</span><ul style="list-style:none"><li>
|
||||
<p>Allow displaying automatic tooltips on column headers.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AllowAutoToolTipsGroups</span><ul style="list-style:none"><li>
|
||||
<p>Allow displaying automatic tooltips on groups.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">AllowAutoToolTipsSubItems</span><ul style="list-style:none"><li>
|
||||
<p>Allow displaying automatic tooltips on sub-items.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Simple Tooltips</h2>
|
||||
|
||||
|
||||
<p>To set tooltip on some element, simply add a new
|
||||
<span class="code">BetterListViewToolTipInfo</span> instance into its
|
||||
<span class="code">ToolTips</span> collection:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">item.ToolTips.Add("An item tooltip!");</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">item.ToolTips.Add("An item tooltip!")</code></pre>
|
||||
|
||||
<p>The ToolTips collection contains entries of type
|
||||
<span class="code">BetterListViewToolTipInfo</span>. It is, however, possible to add
|
||||
jsut string values, because there is an implicit conversion defined. This
|
||||
way you are able to set tooltip for the whole control:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">listView.ToolTipInfo = "Tooltip on Better ListView.";</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">listView.ToolTipInfo = "Tooltip on Better ListView."</code></pre>
|
||||
|
||||
|
||||
<h2>Tooltip Options</h2>
|
||||
|
||||
|
||||
<p>Every tooltip is described by a
|
||||
<span class="code">BetterListViewToolTipInfo</span>. This structure holds all the
|
||||
settings of the original <span class="code">System.Windows.Forms.ToolTip</span> and
|
||||
some additional ones. These are:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Bounds</span><ul style="list-style:none"><li>
|
||||
<p>Defines custom location of the tooltip (see <strong><em><a href="chapter-tooltips.html#tooltip-locations">Tooltip Locations</a></em></strong>).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Location</span><ul style="list-style:none"><li>
|
||||
<p>Location of the tooltip - e.g. client area, image, custom
|
||||
rectangle...</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ShowOnPartialTextVisibility</span><ul style="list-style:none"><li>
|
||||
<p>Display the tooltip when text of the corresponding element is
|
||||
trimmed (partially visible).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Text</span><ul style="list-style:none"><li>
|
||||
<p>Text of the tooltip.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ToolTipBackColor</span>, <span class="code">ToolTipIcon</span><ul style="list-style:none"><li>
|
||||
<p>Properties of a WinForms tooltip.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>With such settings, one can generate a tooltip like this:</p>
|
||||
|
||||
<p class="images"><img src="tooltips-baloon.png"></p>
|
||||
|
||||
|
||||
<h2>
|
||||
<a name="tooltip-locations" id="tooltip-locations"></a>Tooltip Locations</h2>
|
||||
|
||||
|
||||
<p><span class="code">BetterListViewTooltipInfo.Location</span> has these possible
|
||||
values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Border</span><ul style="list-style:none"><li>
|
||||
<p>Column header border.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Client</span><ul style="list-style:none"><li>
|
||||
<p>Control client area, whole item, whole, column header
|
||||
etc.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Custom</span><ul style="list-style:none"><li>
|
||||
<p>Custom location defined by a rectangle
|
||||
(<span class="code">BetterListViewToolTipInfo.Bounds</span> property).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ExpandButton</span><ul style="list-style:none"><li>
|
||||
<p>Group or item expand button.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">CheckBox</span><ul style="list-style:none"><li>
|
||||
<p>Item check box.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Image</span><ul style="list-style:none"><li>
|
||||
<p>Element image area.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">SortGlyph</span><ul style="list-style:none"><li>
|
||||
<p>Column header sort glyph.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Text</span><ul style="list-style:none"><li>
|
||||
<p>Element text area.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>As you can see, these values depends on context of the
|
||||
tooltip.</p>
|
||||
|
||||
<p>To set tooltip on custom location, use the following
|
||||
construct:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">columnHeader.ToolTips.Add(new BetterListViewToolTipInfo(
|
||||
new Rectangle(0, 0, 16, 16),
|
||||
"Tooltip on custom location"));</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">columnHeader.ToolTips.Add(New BetterListViewToolTipInfo(
|
||||
New Rectangle(0, 0, 16, 16),
|
||||
"Tooltip on custom location"))</code></pre>
|
||||
|
||||
<p>This will create tooltip on the 16-pixel top-left corner of a column
|
||||
header.</p>
|
||||
|
||||
|
||||
<h2>Owner-Drawn Tooltips</h2>
|
||||
|
||||
|
||||
<p>Tooltips can be further customized with owner drawing. For such
|
||||
case, tooltip has to be marked as owner-drawn (by setting
|
||||
<span class="code">BetterListViewToolTipInfo.ToolTipOwnerDraw</span> to
|
||||
<span class="code">true</span>) and <span class="code">BetterListView.DrawToolTip</span> event has
|
||||
to be handled. Here is an example of such tooltip:</p>
|
||||
|
||||
<p class="images"><img src="tooltips-ownerdraw.png"></p>
|
||||
|
||||
|
||||
<h2>Tooltip for The Whole Control</h2>
|
||||
|
||||
|
||||
<p>To display tooltip attached to the Better ListView control itself
|
||||
(not on any element), use <span class="code">BetterListView.ToolTipInfo</span>
|
||||
property.</p>
|
||||
|
||||
<p>This tooltip will be displayed when mouse cursor hovers over blank
|
||||
area of the control.</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||||
|
||||
//
|
||||
// create item with two tooltips
|
||||
//
|
||||
BetterListViewItem item = new BetterListViewItem();
|
||||
|
||||
item.Text = "Item with tooltips on itself and on text.";
|
||||
|
||||
// add tooltip on item area
|
||||
item.ToolTips.Add(new BetterListViewToolTipInfo(BetterListViewToolTipLocation.Client, "Tooltip on item area"));
|
||||
// add tooltip on item text area
|
||||
item.ToolTips.Add(new BetterListViewToolTipInfo(BetterListViewToolTipLocation.Text, "Tooltip on item text"));
|
||||
|
||||
// add the item
|
||||
this.listView.Items.Add(item);
|
||||
|
||||
// enable ToolTips feature
|
||||
this.listView.ShowToolTips = true;
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||||
|
||||
'
|
||||
' create item with two tooltips
|
||||
'
|
||||
Dim item As New BetterListViewItem()
|
||||
|
||||
item.Text = "Item with tooltips on itself and on text."
|
||||
|
||||
' add tooltip on item area
|
||||
item.ToolTips.Add (New BetterListViewToolTipInfo (BetterListViewToolTipLocation.Client, "Tooltip on item area"))
|
||||
' add tooltip on item text area
|
||||
item.ToolTips.Add (New BetterListViewToolTipInfo (BetterListViewToolTipLocation.Text, "Tooltip on item text"))
|
||||
|
||||
' add the item
|
||||
ListView.Items.Add (item)
|
||||
|
||||
' enable ToolTips feature
|
||||
ListView.ShowToolTips = True
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-sub-items.html"><strong>
|
||||
« Sub-items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-views.html"><strong>Views »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Using the Control</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="../../../better-thumbnail-browser/quick-start-guide.html"><strong>
|
||||
« Quick Start</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-layout.html"><strong>Layout »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Using the Control</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Naming Conventions</h2>
|
||||
|
||||
|
||||
<p>Better Thumbnail Browser inherits from Better ListView, so most
|
||||
classes are named with BetterListView- prefix. Class names of Better
|
||||
ListView are similar to those of .NET ListView, but with the Better-
|
||||
prefix.</p>
|
||||
|
||||
<p>Better Thumbnail Browser uses its own item type -
|
||||
<span class="code">BetterThumbnailBrowserItem</span> (which inherits from
|
||||
<span class="code">BetterListViewItem</span>). Please use instances of
|
||||
<span class="code">BetterThumbnailBrowserItem</span> instead of
|
||||
<span class="code">BetterListViewItem</span> although for example the Items collection
|
||||
is of type <span class="code">BetterListViewItemCollection</span>. The
|
||||
<span class="code">BetterThumbnailBrowserItem</span> contains extra data that Better
|
||||
ThumbnailBrowser needs for item loading.</p>
|
||||
|
||||
|
||||
<h2>Auto-populating Better Thumbnail Browser with Items</h2>
|
||||
|
||||
|
||||
<p>You can populate Better Thumbnail Browser with auto-population in
|
||||
case you want to display images from an image folder:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">thumbnailBrowser.Path = "c:\\images";</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">thumbnailBrowser.Path = "c:\images"</code></pre>
|
||||
|
||||
<p>This will automatically add items to Better Thumbnail Browser and
|
||||
starts loading them using default image loading provider:</p>
|
||||
|
||||
<p class="images"><img src="using-auto-populate.png"></p>
|
||||
|
||||
|
||||
<h2>Populating Better Thumbnail Browser with Items</h2>
|
||||
|
||||
|
||||
<p>This will look for all files with supported extensions (listed in
|
||||
<span class="code">SupportedExtensions</span> property), create items for them and
|
||||
starts loading image thumbnails immediately.</p>
|
||||
|
||||
<p>Filling Better Thumbnail Browser with custom items is the same as in
|
||||
.NET ListView or Better ListView, but we use the
|
||||
<span class="code">BetterThumbnailBrowserItem</span> instances. The following code
|
||||
fills Better Thumbnail Browser with 100 items:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">thumbnailBrowser.BeginUpdate();
|
||||
|
||||
for (int indexItem = 0; indexItem < 100; indexItem++)
|
||||
{
|
||||
thumbnailBrowser.Items.Add(new BetterThumbnailBrowserItem());
|
||||
}
|
||||
|
||||
thumbnailBrowser.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">thumbnailBrowser.BeginUpdate()
|
||||
|
||||
For indexItem As Integer = 1 To 100
|
||||
thumbnailBrowser.Items.Add(New BetterThumbnailBrowserItem())
|
||||
Next
|
||||
|
||||
thumbnailBrowser.EndUpdate()</code></pre>
|
||||
|
||||
<p>If you want these items to have thumbnail of specific images from
|
||||
disk, set <span class="code">Path</span> property of each item pointing to an image
|
||||
file, then call <span class="code">StartLoading()</span> method and Better
|
||||
ThumbnailBrowser will load thumbnail images for you.</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">thumbnailBrowser.BeginUpdate();
|
||||
|
||||
foreach (string path in Directory.GetFiles("c:\\images"))
|
||||
{
|
||||
BetterThumbnailBrowserItem item = new BetterThumbnailBrowserItem();
|
||||
|
||||
item.Path = path;
|
||||
|
||||
thumbnailBrowser.Items.Add(item);
|
||||
}
|
||||
|
||||
thumbnailBrowser.EndUpdate();
|
||||
thumbnailBrowser.StartLoading();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">thumbnailBrowser.BeginUpdate()
|
||||
|
||||
For Each path As String In Directory.GetFiles("c:\images")
|
||||
|
||||
Dim item As New BetterThumbnailBrowserItem()
|
||||
|
||||
item.Path = path
|
||||
|
||||
thumbnailBrowser.Items.Add(item)
|
||||
|
||||
Next
|
||||
|
||||
thumbnailBrowser.EndUpdate()
|
||||
thumbnailBrowser.StartLoading()</code></pre>
|
||||
|
||||
|
||||
<h2>Thumbnail Display Options</h2>
|
||||
|
||||
|
||||
<p>Better Thumbnail Browser provider number of properties for adjusting
|
||||
thumbnail sizes, paddings and more:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">CenterThumbnails</span><ul style="list-style:none"><li>
|
||||
<p>Align thumbnails to center horizontally.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailImageBorderColor</span><ul style="list-style:none"><li>
|
||||
<p>Border color of thumbnail image border.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailImageBorderThickness</span><ul style="list-style:none"><li>
|
||||
<p>Thumbnail image border thickness (in pixels).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThubmnailImageBorderType</span><ul style="list-style:none"><li>
|
||||
<p>Thumbnail image border style (e.g. single line,
|
||||
shadow).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailImagePadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding around thumbnail image (in pixels).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailInnerPadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding between thumbnail item border and its content (in
|
||||
pixels).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailOuterPadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding between neighboring thumbnail items (in
|
||||
pixels).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailTextLines</span><ul style="list-style:none"><li>
|
||||
<p>Maximum number of text lines allowed in item label.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ThumbnailTextPadding</span><ul style="list-style:none"><li>
|
||||
<p>Padding around thumbnail label text (in pixels).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>For more about adjusting display, see chapter <strong><em><a href="chapter-layout.html">Layout</a></em></strong>.</p>
|
||||
|
||||
|
||||
<h2>Sorting Thumbnails with Multiple Columns</h2>
|
||||
|
||||
|
||||
<p>Column headers can be displayed in <span class="code">Thumbnails</span> view and
|
||||
the thumbnail items can be sorted using these columns:</p>
|
||||
|
||||
<p class="images"><img src="using-sorting.png"></p>
|
||||
|
||||
<p>To display columns, set <span class="code">ColumnsDisplayMode</span> property to
|
||||
<span class="code">BetterListViewColumnHeaderDisplayMode.ShowAlways</span>.</p>
|
||||
|
||||
<p>To enable sorting by specific columns, also set <span class="code">Style</span>
|
||||
property of these columns to
|
||||
<span class="code">BetterListViewColumnHeaderStyle.Sortable</span>.</p>
|
||||
|
||||
<p>Sub-items need to be added to every thumbnail item in order to allow
|
||||
sorting with multiple columns. Every item is also a single sub-item, so if
|
||||
there are four columns, we need to add three sub-items in every item
|
||||
(using <span class="code">BetterThumbnailBrowserItem.SubItems</span> property).</p>
|
||||
|
||||
<p>By default, the sorting uses <span class="code">Key</span> property of
|
||||
item/sub-item. If this is not available, item comparer looks for
|
||||
<span class="code">Value</span> property and then the <span class="code">Text</span> property of
|
||||
items and sub-items. We can use keys instead of labels by setting
|
||||
<span class="code">Key</span> property of every item and sub-item. Unlike
|
||||
<span class="code">Text</span> property, the <span class="code">Key</span> can contain any
|
||||
<span class="code">IComparable</span> instance (e.g. <span class="code">Items[3].SubItems[2].Key =
|
||||
0.5</span>).</p>
|
||||
|
||||
<p>The sorting behavior can be specified by setting
|
||||
<span class="code">BetterListViewColumnHeader.SortMethod property</span>.</p>
|
||||
|
||||
|
||||
<h2>Thumbnail Item Loading and Loading Providers</h2>
|
||||
|
||||
|
||||
<p>Item loading is performed by so called <strong><em>loading
|
||||
providers</em></strong>. By default, Better Thumbnail Browser uses its own
|
||||
loading provider designed for loading images from files on disk.</p>
|
||||
|
||||
<p>There can be more than one loading provider specified and you can
|
||||
set up your own. The loading providers can be accessed through
|
||||
<span class="code">LoadingProviders</span> property. It is a list, whose every element
|
||||
is a loading provider. If more that one loading provider is specified,
|
||||
then the first provider is used on every item until all items are loaded,
|
||||
then second is used and so on. Multiple loading providers allow for <strong><em><a href="chapter-loading.html#multi-pass-loading">Multi-pass
|
||||
loading</a></em></strong>.</p>
|
||||
|
||||
<p>You can control item loading by calling <span class="code">StartLoading()</span>,
|
||||
<span class="code">StopLoading()</span> and <span class="code">RestartLoading()</span>
|
||||
methods.</p>
|
||||
|
||||
<p>For more about loading providers, see chapter <strong><em><a href="chapter-loading.html">Loading Thumbnails</a></em></strong>.</p>
|
||||
|
||||
|
||||
<h2>Properly Disposing the Control</h2>
|
||||
|
||||
|
||||
<p>Because Better Thumbnail Browser uses thread synchronization. It is
|
||||
necessary to stop item loading before disposing the control. This is done
|
||||
automatically if the control is placed <strong><em>directly</em></strong> in a
|
||||
form, but if Better Thumbnail Browser is deeper in control hierarchy, it
|
||||
cannot detect the owner form closing and you should call
|
||||
<span class="code">StopLoading()</span> method in <span class="code">FormClosed</span> event
|
||||
handler:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">...
|
||||
|
||||
protected override void OnFormClosed(FormClosedEventArgs e)
|
||||
{
|
||||
base.OnFormClosed(e);
|
||||
this.thumbnailBrowser.StopLoading();
|
||||
}
|
||||
|
||||
...</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">...
|
||||
|
||||
Protected Overrides Sub OnFormClosed(e As FormClosedEventArgs)
|
||||
|
||||
MyBase.OnFormClosed(e)
|
||||
Me.thumbnailBrowser.StopLoading()
|
||||
|
||||
End Sub
|
||||
|
||||
...</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="../../../better-thumbnail-browser/quick-start-guide.html"><strong>
|
||||
« Quick Start</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-layout.html"><strong>Layout »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<title>Views</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="prettify.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="prettify.js"></script><script type="text/javascript" src="lang-vb.js"></script><link href="../resources/main.css" media="screen" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body onload="prettyPrint()"><div class="placing">
|
||||
<br><table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-tooltips.html"><strong>
|
||||
« Tooltips</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"></td>
|
||||
</tr></table>
|
||||
<br><h1>Views</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Better ListView can be display items in multiple ways called
|
||||
<strong><em>views</em></strong>. The view can be set using <span class="code">View</span>
|
||||
property. Following sections will present views supported by Better
|
||||
ListView. All views suppport <strong><em><a href="chapter-groups.html">Groups</a></em></strong>, as displayed in the
|
||||
screenshots.</p>
|
||||
|
||||
<p>Each of the view supports arbitrary image sizes and other settings
|
||||
(see <strong><em><a href="chapter-layout.html">Layout Properties</a></em></strong> for
|
||||
more information).</p>
|
||||
|
||||
<h2>Details view</h2>
|
||||
|
||||
|
||||
<p>This is the default view. .NET ListView displays items in detailed
|
||||
view only when there are some columns present as well. Better ListView,
|
||||
however, can display items in <strong><em>Details</em></strong> view even
|
||||
without columns:</p>
|
||||
|
||||
<p class="images"><img src="views-details1.png"><img src="views-details2.png"></p>
|
||||
|
||||
<p>When columns are added into the view, items can display their
|
||||
sub-items as well:</p>
|
||||
|
||||
<p class="images"><img src="views-detailscolumns1.png"><img src="views-detailscolumns2.png"></p>
|
||||
|
||||
|
||||
<h2>LargeIcon View</h2>
|
||||
|
||||
|
||||
<p>The <strong><em>LargeIcon</em></strong> view displays items with "large"
|
||||
icons (usually 32 by 32 pixels, but Better ListView supports any image
|
||||
size). Item text can be wrapped to up to four lines by default and the
|
||||
horizontal spacing between items is varied so that the items evenly fill
|
||||
client area:</p>
|
||||
|
||||
<p class="images"><img src="views-largeicon1.png"><img src="views-largeicon2.png"></p>
|
||||
|
||||
|
||||
<h2>List View</h2>
|
||||
|
||||
|
||||
<p>The <strong><em>List</em></strong> view is different from other views
|
||||
because it displays items vertically oriented. Instead of items flowing in
|
||||
left-right top-dop fashion, they are arranged in columns, The groups in
|
||||
the <strong><em>List</em></strong> view has to be oriented horizontally:</p>
|
||||
|
||||
<p class="images"><img src="views-list1.png"><img src="views-list2.png"></p>
|
||||
|
||||
|
||||
<h2>SmallIcon View</h2>
|
||||
|
||||
|
||||
<p>The <strong><em>SmallIcon</em></strong> view displays items with "small"
|
||||
icons (usually 16 by 16 pixels, but Better ListView supports any image
|
||||
size). Contrary to <strong><em>LargeIcon</em></strong> view, item text is
|
||||
placed to the right of item images:</p>
|
||||
|
||||
<p class="images"><img src="views-smallicon1.png"><img src="views-smallicon2.png"></p>
|
||||
|
||||
|
||||
<h2>Tile View</h2>
|
||||
|
||||
|
||||
<p>The <strong><em>Tile</em></strong> view displays items as "tiles", whose
|
||||
size can be adjusted by <span class="code">TileSize</span> property.
|
||||
<strong><em>Tile</em></strong> view can display sub-item texts on additional
|
||||
lines, but only item image (possible images of sub-items are
|
||||
hidden):</p>
|
||||
|
||||
<p class="images"><img src="views-tile1.png"><img src="views-tile2.png"></p>
|
||||
|
||||
|
||||
<h2>Thumbnails View</h2>
|
||||
|
||||
|
||||
<p>The <strong><em>Thubnails</em></strong> view is similar to
|
||||
<strong><em>LargeIcon</em></strong> view. Items are of the same height, there
|
||||
is a single-line text by default and the items are centered with fixed
|
||||
spacing between them:</p>
|
||||
|
||||
<p class="images"><img src="views-thumbnails1.png"><img src="views-thumbnails2.png"></p>
|
||||
|
||||
|
||||
<h2>Detecting view change</h2>
|
||||
|
||||
|
||||
<p>When the value of <span class="code">View</span> property has changed, a
|
||||
<span class="code">BetterListViewViewChanged</span> event is raised. Event data or the
|
||||
event contains old a new value of type
|
||||
<span class="code">BetterListViewView</span>.</p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-tooltips.html"><strong>
|
||||
« Tooltips</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1019 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
public/documentation/better-thumbnail-browser/data/data-sort.png
Normal file
BIN
public/documentation/better-thumbnail-browser/data/data-sort.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,61 @@
|
||||
// Copyright (C) 2009 Google Inc.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @fileoverview
|
||||
* Registers a language handler for various flavors of basic.
|
||||
*
|
||||
*
|
||||
* To use, include prettify.js and this file in your HTML page.
|
||||
* Then put your code in an HTML tag like
|
||||
* <pre class="prettyprint lang-vb"></pre>
|
||||
*
|
||||
*
|
||||
* http://msdn.microsoft.com/en-us/library/aa711638(VS.71).aspx defines the
|
||||
* visual basic grammar lexical grammar.
|
||||
*
|
||||
* @author mikesamuel@gmail.com
|
||||
*/
|
||||
|
||||
PR['registerLangHandler'](
|
||||
PR['createSimpleLexer'](
|
||||
[
|
||||
// Whitespace
|
||||
[PR['PR_PLAIN'], /^[\t\n\r \xA0\u2028\u2029]+/, null, '\t\n\r \xA0\u2028\u2029'],
|
||||
// A double quoted string with quotes escaped by doubling them.
|
||||
// A single character can be suffixed with C.
|
||||
[PR['PR_STRING'], /^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i, null,
|
||||
'"\u201C\u201D'],
|
||||
// A comment starts with a single quote and runs until the end of the
|
||||
// line.
|
||||
[PR['PR_COMMENT'], /^[\'\u2018\u2019][^\r\n\u2028\u2029]*/, null, '\'\u2018\u2019']
|
||||
],
|
||||
[
|
||||
[PR['PR_KEYWORD'], /^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i, null],
|
||||
// A second comment form
|
||||
[PR['PR_COMMENT'], /^REM[^\r\n\u2028\u2029]*/i],
|
||||
// A boolean, numeric, or date literal.
|
||||
[PR['PR_LITERAL'],
|
||||
/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],
|
||||
// An identifier?
|
||||
[PR['PR_PLAIN'], /^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],
|
||||
// A run of punctuation
|
||||
[PR['PR_PUNCTUATION'],
|
||||
/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],
|
||||
// Square brackets
|
||||
[PR['PR_PUNCTUATION'], /^(?:\[|\])/]
|
||||
]),
|
||||
['vb', 'vbs']);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 726 B |
Binary file not shown.
|
After Width: | Height: | Size: 831 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user