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="../../../better-listview/quick-start-guide.html"><strong>
|
||||
« Quick Start</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="../../../better-listview/quick-start-guide.html"><strong>
|
||||
« Quick Start</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
258
public/documentation/better-listview/data/chapter-columns.html
Normal file
258
public/documentation/better-listview/data/chapter-columns.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
436
public/documentation/better-listview/data/chapter-data.html
Normal file
436
public/documentation/better-listview/data/chapter-data.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
479
public/documentation/better-listview/data/chapter-drag-drop.html
Normal file
479
public/documentation/better-listview/data/chapter-drag-drop.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-embedded-controls.html"><strong>Embedded Controls »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Drag and Drop</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-embedded-controls.html"><strong>Embedded Controls »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better ListView 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,719 @@
|
||||
<!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>Embedded Controls</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="../../../quick-start-guide/better-listview/index.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>Embedded Controls</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Embedded editing controls can be thought of as an extension to label
|
||||
edit functionality (see <strong><em><a href="chapter-label-edit.html">Label
|
||||
Editing</a></em></strong> for more information).</p>
|
||||
|
||||
<p>Every item and sub-item has a <strong><em>cell</em></strong> area on which
|
||||
an editing control can be placed. In the simplest case
|
||||
(<span class="code">LabelEdit</span> set to <span class="code">true</span>), the editing control is
|
||||
basically a <span class="code">System.Windows.Forms.TextBox</span> control. It is
|
||||
actually an instance of <span class="code">BetterListViewTextBoxEmbeddedControl</span>,
|
||||
which is a <span class="code">TextBox</span> wrapper implementing
|
||||
<span class="code">IBetterListViewEmbeddedControl</span> interface. Any control can be
|
||||
used as embedded control in Bettter ListView if implements one of these
|
||||
interfaces:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">IBetterListViewEmbeddedControl </span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">IBetterListViewEmbeddedControlExtended</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The custom embedded control is shown on the image below. When user
|
||||
clicks on sub-item text (an abbreviation of tea grading), an editing control
|
||||
appears on the top-left corner of the cell area. The control contains
|
||||
buttons for accepting and cancelling changes:</p>
|
||||
|
||||
<p class="images"><img src="embedded-control.png"></p>
|
||||
|
||||
<h2>Implementing IBetterListViewEmbeddedControl</h2>
|
||||
|
||||
|
||||
<p>This interface contains prescription for minimum amount of
|
||||
functionality required by an embedded control:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Get label text for currently edited data.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Data accepting and cancelling events (e.g. if the control has an
|
||||
OK button).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Set control size given the cell area and positioning
|
||||
data.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Move data from sub-item to the control.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Move data from the control to the sub-item.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Let's make a sample control. We will make a
|
||||
<span class="code">TextBox</span>-based embedded control for editing words in
|
||||
lower-case. First, we inherit <span class="code">TextBox</span> and implement
|
||||
<span class="code">IBetterListViewEmbeddedControl</span> interface:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// Represents a custom control embeddable in Better ListView.
|
||||
/// </summary>
|
||||
public class TextBoxEmbeddedControl : TextBox, IBetterListViewEmbeddedControl</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' Represents a custom control embeddable in Better ListView.
|
||||
''' </summary>
|
||||
Public Class TextBoxEmbeddedControl
|
||||
Inherits TextBox
|
||||
Implements IBetterListViewEmbeddedControl</code></pre>
|
||||
|
||||
<p>Then we implement the <span class="code">LabelText</span> property:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// current (edited) label text
|
||||
/// </summary>
|
||||
public string LabelText
|
||||
{
|
||||
get
|
||||
{
|
||||
return Text.ToLower();
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' current (edited) label text
|
||||
''' </summary>
|
||||
Public ReadOnly Property LabelText() As String
|
||||
Get
|
||||
Return Text.ToLower()
|
||||
End Get
|
||||
End Property</code></pre>
|
||||
|
||||
<p>As you can see, the text of the <span class="code">TextBox</span> is converted to
|
||||
lower case since we want item/sub-item labels to be only in lower
|
||||
case.</p>
|
||||
|
||||
<p>Next, we implement <span class="code">RequestAccept</span> and
|
||||
<span class="code">RequestCancel</span> events:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// request accepting updated data in BetterListView
|
||||
/// </summary>
|
||||
public event EventHandler RequestAccept;
|
||||
|
||||
/// <summary>
|
||||
/// request cancelling editing
|
||||
/// </summary>
|
||||
public event EventHandler RequestCancel;</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' request accepting updated data in BetterListView
|
||||
''' </summary>
|
||||
Public Event RequestAccept As EventHandler Implements IBetterListViewEmbeddedControl.RequestAccept
|
||||
|
||||
''' <summary>
|
||||
''' request cancelling editing
|
||||
''' </summary>
|
||||
Public Event RequestCancel As EventHandler Implements IBetterListViewEmbeddedControl.RequestCancel</code></pre>
|
||||
|
||||
<p>Next, we implement <span class="code">GetData</span> and <span class="code">SetData</span>
|
||||
methods:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// get data from the specified sub-item in control
|
||||
/// </summary>
|
||||
/// <param name = "subItem">sub-item whose data are being edited</param>
|
||||
public void GetData(BetterListViewSubItem subItem)
|
||||
{
|
||||
Text = subItem.Text;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// set data from control to the specified sub-item
|
||||
/// </summary>
|
||||
/// <param name = "subItem">sub-item whose data are being edited</param>
|
||||
public void SetData(BetterListViewSubItem subItem)
|
||||
{
|
||||
subItem.Text = LabelText;
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' get data from the specified sub-item in control
|
||||
''' </summary>
|
||||
''' <param name = "subItem">sub-item whose data are being edited</param>
|
||||
Public Sub GetData(ByVal subItem As BetterListViewSubItem) Implements IBetterListViewEmbeddedControl.GetData
|
||||
|
||||
Text = subItem.Text
|
||||
|
||||
End Sub
|
||||
|
||||
''' <summary>
|
||||
''' set data from control to the specified sub-item
|
||||
''' </summary>
|
||||
''' <param name = "subItem">sub-item whose data are being edited</param>
|
||||
Public Sub SetData(ByVal subItem As BetterListViewSubItem) Implements IBetterListViewEmbeddedControl.SetData
|
||||
|
||||
subItem.Text = LabelText
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<p>These method are trivial since we need not to do any data
|
||||
conversions (the only conversion here is lowering the case of edited text
|
||||
in the <span class="code">LabelText</span> getter).</p>
|
||||
|
||||
<p>The last method contained in the interface is <span class="code">SetSize</span>
|
||||
method, which needs not to be implemented (the body can be kept empty).
|
||||
You implement this method only if you need to adjust control's size when
|
||||
label edit starts.</p>
|
||||
|
||||
<p>The constructor should be implemented like this:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// Initializes a new instance of the <see cref = "TextBoxEmbeddedControl" /> class.
|
||||
/// </summary>
|
||||
public TextBoxEmbeddedControl()
|
||||
{
|
||||
AcceptsReturn = true;
|
||||
CausesValidation = false;
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' Initializes a new instance of the <see cref = "TextBoxEmbeddedControl" /> class.
|
||||
''' </summary>
|
||||
Public Sub New()
|
||||
|
||||
AcceptsReturn = True
|
||||
CausesValidation = False
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<p>The <span class="code">AcceptsReturn</span> property is set to <span class="code">true</span>
|
||||
because we will handle the <strong><em>ENTER</em></strong> key (and raise
|
||||
<span class="code">RequestAccept</span> event appropriately).</p>
|
||||
|
||||
<p>The <span class="code">CausesValidation</span> property is set to
|
||||
<span class="code">false</span> because it is a good practice in this situation.</p>
|
||||
|
||||
<p>Both input and output data are validated in the
|
||||
<span class="code">IBetterListViewEmbeddedControl</span> implementation and validation
|
||||
of some third-party controls can prevent whole form with the control from
|
||||
closing.</p>
|
||||
|
||||
<p>The last thing we implement is handling of the
|
||||
<strong><em>ENTER</em></strong> key for accepting the data and the
|
||||
<strong><em>ESCAPE</em></strong> key for cancelling:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">protected override void OnKeyDown(KeyEventArgs e)
|
||||
{
|
||||
if (e.KeyCode == Keys.Enter &&
|
||||
RequestAccept != null)
|
||||
{
|
||||
RequestAccept(this, EventArgs.Empty);
|
||||
|
||||
e.Handled = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.KeyCode == Keys.Escape &&
|
||||
RequestCancel != null)
|
||||
{
|
||||
RequestCancel(this, EventArgs.Empty);
|
||||
|
||||
e.Handled = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
base.OnKeyDown(e);
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">Protected Overrides Sub OnKeyDown(e As KeyEventArgs)
|
||||
|
||||
If e.KeyCode = Keys.Enter AndAlso RequestAccept IsNot Nothing Then
|
||||
|
||||
RequestAccept(Me, EventArgs.Empty)
|
||||
|
||||
e.Handled = True
|
||||
|
||||
Return
|
||||
|
||||
End If
|
||||
|
||||
If e.KeyCode = Keys.Escape AndAlso RequestCancel IsNot Nothing Then
|
||||
|
||||
RequestCancel(Me, EventArgs.Empty)
|
||||
|
||||
e.Handled = True
|
||||
|
||||
Return
|
||||
|
||||
End If
|
||||
|
||||
MyBase.OnKeyDown(e)
|
||||
|
||||
End Sub</code></pre>
|
||||
|
||||
<br><hr>
|
||||
<p class="note">It is a common good practice to implement interfaces explicitly.
|
||||
The sample implementation is implicit for the sake of better
|
||||
readability. Embedded controls implemented in BetterListView.dll are
|
||||
implemented implicitly (and marked virtual) to allow for being inherited
|
||||
(e.g. <span class="code">MyCustomControl : BetterListViewEmbeddedControl</span>) and
|
||||
you may possibly want to override any part of the interface
|
||||
implementation.</p>
|
||||
<hr>
|
||||
<br><h2>Implementing IBetterListViewEmbeddedControlExtended</h2>
|
||||
|
||||
|
||||
<p>The extended interface has currently only one method called
|
||||
<span class="code">RequestEndEdit</span>. This method can be called by the Better
|
||||
ListView, when it asks the control whether it is ready to end editing. The
|
||||
control can return a boolean value (<span class="code">true</span> - continue
|
||||
<span class="code">EndEdit</span>, <span class="code">false</span> - refuse to end editing). There
|
||||
are many situations when the label editing is terminated (e.g. scrolling
|
||||
the control, selecting items...) and terminating the label edit is not
|
||||
always wanted (this is a case of
|
||||
<span class="code">System.Windows.Forms.DateTimePicker</span> control, which sometimes
|
||||
behaves as being transparent for mouse clicks and thus being closed
|
||||
because of click-through on the Better ListView client area - the
|
||||
<span class="code">RequestEndEdit</span> method fixes such possible behavior of third
|
||||
party controls).</p>
|
||||
|
||||
|
||||
<h2>Sample Source Code</h2>
|
||||
|
||||
|
||||
<p>Form with Better ListView containing some columns and items:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// Shows embedding of custom controls into Better ListView.
|
||||
/// </summary>
|
||||
internal sealed partial class EmbeddedControlSampleForm : Form
|
||||
{
|
||||
/// <summary>
|
||||
/// Initializes a new instance of the <see cref = "EmbeddedControlSampleForm" /> class.
|
||||
/// </summary>
|
||||
public EmbeddedControlSampleForm()
|
||||
{
|
||||
InitializeComponent();
|
||||
|
||||
this.listView.BeginUpdate();
|
||||
|
||||
this.listView.Columns.AddRange(new[]
|
||||
{
|
||||
new BetterListViewColumnHeader("Document name", 160),
|
||||
new BetterListViewColumnHeader("Access", 128)
|
||||
});
|
||||
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
new BetterListViewItem(new[] { "hydro-report.pdf", "read" }),
|
||||
new BetterListViewItem(new[] { "magnetic_resonance.docx", "read write" }),
|
||||
new BetterListViewItem(new[] { "billing forms (2011).zip", "read" })
|
||||
});
|
||||
|
||||
this.listView.LabelEditActivation = (BetterListViewLabelEditActivation.Keyboard | BetterListViewLabelEditActivation.SingleClick);
|
||||
this.listView.LabelEditModeSubItems = BetterListViewLabelEditMode.CustomControl;
|
||||
|
||||
this.listView.EndUpdate();
|
||||
|
||||
this.listView.RequestEmbeddedControl += ListViewRequestEmbeddedControl;
|
||||
}
|
||||
|
||||
private IBetterListViewEmbeddedControl ListViewRequestEmbeddedControl(object sender, BetterListViewRequestEmbeddedControlEventArgs eventArgs)
|
||||
{
|
||||
if (eventArgs.SubItem.Index == 1)
|
||||
{
|
||||
return (new DocumentAccessConrol());
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' Shows embedding of custom controls into Better ListView.
|
||||
''' </summary>
|
||||
Partial Friend NotInheritable Class EmbeddedControlSampleForm
|
||||
|
||||
''' <summary>
|
||||
''' Initializes a new instance of the <see cref = "EmbeddedControlSampleForm" /> class.
|
||||
''' </summary>
|
||||
Public Sub New()
|
||||
|
||||
InitializeComponent()
|
||||
|
||||
ListView.BeginUpdate()
|
||||
|
||||
ListView.Columns.AddRange(
|
||||
New BetterListViewColumnHeader() { _
|
||||
New BetterListViewColumnHeader("Document name", 160),
|
||||
New BetterListViewColumnHeader("Access", 128)
|
||||
})
|
||||
|
||||
ListView.Items.AddRange(
|
||||
New BetterListViewItem() { _
|
||||
New BetterListViewItem(New String() {"hydro-report.pdf", "read"}),
|
||||
New BetterListViewItem(New String() {"magnetic_resonance.docx", "read write"}),
|
||||
New BetterListViewItem(New String() {"billing forms (2011).zip", "read"})
|
||||
})
|
||||
|
||||
ListView.LabelEditActivation =
|
||||
(BetterListViewLabelEditActivation.Keyboard Or BetterListViewLabelEditActivation.SingleClick)
|
||||
ListView.LabelEditModeSubItems = BetterListViewLabelEditMode.CustomControl
|
||||
|
||||
ListView.EndUpdate()
|
||||
|
||||
AddHandler ListView.RequestEmbeddedControl, AddressOf ListViewRequestEmbeddedControl
|
||||
|
||||
End Sub
|
||||
|
||||
Private Function ListViewRequestEmbeddedControl(ByVal sender As Object,
|
||||
ByVal eventArgs As BetterListViewRequestEmbeddedControlEventArgs) _
|
||||
As IBetterListViewEmbeddedControl
|
||||
|
||||
If eventArgs.SubItem.Index = 1 Then
|
||||
Return (New DocumentAccessConrol())
|
||||
End If
|
||||
|
||||
Return Nothing
|
||||
|
||||
End Function
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<p><span class="code">DocumentAccessControl</span> class used as complex embedded
|
||||
control (see <span class="code">EmbeddedControlSampleForm</span> sample in the provided
|
||||
C# and Visual Basic samples for full source code):</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">/// <summary>
|
||||
/// Represents a custom control embeddable in Better ListView.
|
||||
/// </summary>
|
||||
[ToolboxItem(false)]
|
||||
internal sealed partial class DocumentAccessConrol : UserControl, IBetterListViewEmbeddedControl
|
||||
{
|
||||
private const string StringRead = "read";
|
||||
private const string StringWrite = "write";
|
||||
|
||||
/// <summary>
|
||||
/// current (edited) label text
|
||||
/// </summary>
|
||||
public string LabelText
|
||||
{
|
||||
get
|
||||
{
|
||||
// convert control's state to label
|
||||
if (this.checkBoxRead.Checked &&
|
||||
this.checkBoxWrite.Checked)
|
||||
{
|
||||
return String.Format("{0} {1}", StringRead, StringWrite);
|
||||
}
|
||||
|
||||
if (this.checkBoxRead.Checked)
|
||||
{
|
||||
return StringRead;
|
||||
}
|
||||
|
||||
if (this.checkBoxWrite.Checked)
|
||||
{
|
||||
return StringWrite;
|
||||
}
|
||||
|
||||
return String.Empty;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// request accepting updated data in BetterListView
|
||||
/// </summary>
|
||||
public event EventHandler RequestAccept;
|
||||
|
||||
/// <summary>
|
||||
/// request cancelling editing
|
||||
/// </summary>
|
||||
public event EventHandler RequestCancel;
|
||||
|
||||
/// <summary>
|
||||
/// Initializes a new instance of the <see cref = "DocumentAccessConrol" /> class.
|
||||
/// </summary>
|
||||
public DocumentAccessConrol()
|
||||
{
|
||||
InitializeComponent();
|
||||
|
||||
//NOTE: disabling validation prevents form close cancellation
|
||||
CausesValidation = false;
|
||||
|
||||
foreach (Control control in Controls)
|
||||
{
|
||||
control.LostFocus += ControlOnLostFocus;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// get data from the specified sub-item in control
|
||||
/// </summary>
|
||||
/// <param name = "subItem">sub-item whose data are being edited</param>
|
||||
public void GetData(BetterListViewSubItem subItem)
|
||||
{
|
||||
// convert label to control's state
|
||||
this.checkBoxRead.Checked = subItem.Text.Contains(StringRead);
|
||||
this.checkBoxWrite.Checked = subItem.Text.Contains(StringWrite);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// set data from control to the specified sub-item
|
||||
/// </summary>
|
||||
/// <param name = "subItem">sub-item whose data are being edited</param>
|
||||
public void SetData(BetterListViewSubItem subItem)
|
||||
{
|
||||
subItem.Text = LabelText;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// set control size
|
||||
/// </summary>
|
||||
/// <param name = "subItem">sub-item whose data are being edited</param>
|
||||
/// <param name = "placement">placement of the embedded control within sub-item</param>
|
||||
public void SetSize(BetterListViewSubItem subItem, BetterListViewEmbeddedControlPlacement placement)
|
||||
{
|
||||
// keep size of the control unchanged
|
||||
}
|
||||
|
||||
private void ControlOnLostFocus(object sender, EventArgs eventArgs)
|
||||
{
|
||||
//
|
||||
// NOTE: this code is needed just for hiding embedded control with sub-controls when user changes active form while label editing
|
||||
//
|
||||
bool anyFocused = Focused;
|
||||
|
||||
if (anyFocused == false)
|
||||
{
|
||||
foreach (Control control in Controls)
|
||||
{
|
||||
if (control.Focused)
|
||||
{
|
||||
anyFocused = true;
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (anyFocused == false)
|
||||
{
|
||||
RequestAccept(this, eventArgs);
|
||||
}
|
||||
}
|
||||
|
||||
private void ButtonOKClick(object sender, EventArgs e)
|
||||
{
|
||||
RequestAccept(this, e);
|
||||
}
|
||||
|
||||
private void ButtonCancelClick(object sender, EventArgs e)
|
||||
{
|
||||
RequestCancel(this, e);
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">''' <summary>
|
||||
''' Represents a custom control embeddable in Better ListView.
|
||||
''' </summary>
|
||||
<ToolboxItem(False)>
|
||||
Partial Friend NotInheritable Class DocumentAccessConrol
|
||||
Inherits UserControl
|
||||
Implements IBetterListViewEmbeddedControl
|
||||
|
||||
Private Const StringRead As String = "read"
|
||||
Private Const StringWrite As String = "write"
|
||||
|
||||
''' <summary>
|
||||
''' current (edited) label text
|
||||
''' </summary>
|
||||
Public ReadOnly Property LabelText() As String Implements IBetterListViewEmbeddedControl.LabelText
|
||||
Get
|
||||
' convert control's state to label
|
||||
If CheckBoxRead.Checked AndAlso CheckBoxWrite.Checked Then
|
||||
Return [String].Format("{0} {1}", StringRead, StringWrite)
|
||||
End If
|
||||
|
||||
If CheckBoxRead.Checked Then
|
||||
Return StringRead
|
||||
End If
|
||||
|
||||
If CheckBoxWrite.Checked Then
|
||||
Return StringWrite
|
||||
End If
|
||||
|
||||
Return [String].Empty
|
||||
End Get
|
||||
End Property
|
||||
|
||||
''' <summary>
|
||||
''' request accepting updated data in BetterListView
|
||||
''' </summary>
|
||||
Public Event RequestAccept As EventHandler Implements IBetterListViewEmbeddedControl.RequestAccept
|
||||
|
||||
''' <summary>
|
||||
''' request cancelling editing
|
||||
''' </summary>
|
||||
Public Event RequestCancel As EventHandler Implements IBetterListViewEmbeddedControl.RequestCancel
|
||||
|
||||
''' <summary>
|
||||
''' Initializes a new instance of the <see cref = "DocumentAccessConrol" /> class.
|
||||
''' </summary>
|
||||
Public Sub New()
|
||||
|
||||
InitializeComponent()
|
||||
|
||||
'NOTE: disabling validation prevents form close cancellation
|
||||
CausesValidation = False
|
||||
|
||||
For Each control As Control In Controls
|
||||
AddHandler control.LostFocus, AddressOf ControlOnLostFocus
|
||||
Next
|
||||
|
||||
End Sub
|
||||
|
||||
''' <summary>
|
||||
''' get data from the specified sub-item in control
|
||||
''' </summary>
|
||||
''' <param name = "subItem">sub-item whose data are being edited</param>
|
||||
Public Sub GetData(ByVal subItem As BetterListViewSubItem) Implements IBetterListViewEmbeddedControl.GetData
|
||||
|
||||
' convert label to control's state
|
||||
CheckBoxRead.Checked = subItem.Text.Contains(StringRead)
|
||||
CheckBoxWrite.Checked = subItem.Text.Contains(StringWrite)
|
||||
|
||||
End Sub
|
||||
|
||||
''' <summary>
|
||||
''' set data from control to the specified sub-item
|
||||
''' </summary>
|
||||
''' <param name = "subItem">sub-item whose data are being edited</param>
|
||||
Public Sub SetData(ByVal subItem As BetterListViewSubItem) Implements IBetterListViewEmbeddedControl.SetData
|
||||
|
||||
subItem.Text = LabelText
|
||||
|
||||
End Sub
|
||||
|
||||
''' <summary>
|
||||
''' set control size
|
||||
''' </summary>
|
||||
''' <param name = "subItem">sub-item whose data are being edited</param>
|
||||
''' <param name = "placement">placement of the embedded control within sub-item</param>
|
||||
Public Sub SetSize(ByVal subItem As BetterListViewSubItem,
|
||||
ByVal placement As BetterListViewEmbeddedControlPlacement) _
|
||||
Implements IBetterListViewEmbeddedControl.SetSize
|
||||
|
||||
' keep size of the control unchanged
|
||||
|
||||
End Sub
|
||||
|
||||
Private Sub ControlOnLostFocus(ByVal sender As Object, ByVal eventArgs As EventArgs)
|
||||
|
||||
'
|
||||
' NOTE: this code is needed just for hiding embedded control with sub-controls when user changes active form while label editing
|
||||
'
|
||||
Dim anyFocused As Boolean = Focused
|
||||
|
||||
If anyFocused = False Then
|
||||
For Each control As Control In Controls
|
||||
If control.Focused Then
|
||||
anyFocused = True
|
||||
|
||||
Exit For
|
||||
End If
|
||||
Next
|
||||
End If
|
||||
|
||||
If anyFocused = False Then
|
||||
RaiseEvent RequestAccept(Me, eventArgs)
|
||||
End If
|
||||
|
||||
End Sub
|
||||
|
||||
Private Sub ButtonOKClick(ByVal sender As Object, ByVal e As EventArgs) Handles ButtonOK.Click
|
||||
RaiseEvent RequestAccept(Me, e)
|
||||
End Sub
|
||||
|
||||
Private Sub ButtonCancelClick(ByVal sender As Object, ByVal e As EventArgs) Handles ButtonCancel.Click
|
||||
RaiseEvent RequestCancel(Me, e)
|
||||
End Sub
|
||||
|
||||
End Class</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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,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-embedded-controls.html"><strong>
|
||||
« Embedded Controls</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-embedded-controls.html"><strong>
|
||||
« Embedded Controls</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
145
public/documentation/better-listview/data/chapter-focus.html
Normal file
145
public/documentation/better-listview/data/chapter-focus.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
339
public/documentation/better-listview/data/chapter-groups.html
Normal file
339
public/documentation/better-listview/data/chapter-groups.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
233
public/documentation/better-listview/data/chapter-hit-test.html
Normal file
233
public/documentation/better-listview/data/chapter-hit-test.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-item-hierarchy.html"><strong>Item Hierarchy »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Insertion Mark</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-item-hierarchy.html"><strong>Item Hierarchy »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better ListView 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,432 @@
|
||||
<!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>Introduction, Comparison</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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="../../../better-listview/quick-start-guide.html"><strong>Quick Start »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Introduction, Comparison</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Quick Summary</h2>
|
||||
|
||||
|
||||
<p>Better ListView is a WinForms control written from scratch entirely
|
||||
in C#. 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>Compatibility</h2>
|
||||
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Compatible with: Visual Studio 2012, 2010, 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>More features (see the comparison below).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fixed all bugs and quirks of the regular .NET ListView.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fully managed, 100% C# code. No more Win32 API.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Minimum learning needed (similar naming conventions,
|
||||
etc).</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 ListView is written entirely from scratch in pure
|
||||
managed code, it adds functionality hardly achievable by just wrapping the
|
||||
regular ListView control. Such features include hierarchical items, image
|
||||
thumbnails, data binding, multi-line items ... and more!</p>
|
||||
|
||||
<p>The Better ListView 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>
|
||||
|
||||
|
||||
<h2>Side-by-side comparison with regular .NET ListView</h2>
|
||||
|
||||
|
||||
<br><p class="table-name">Extra Features</p>
|
||||
<br><table class="comparison">
|
||||
<tr>
|
||||
<td class="comparison-line-odd"></td>
|
||||
<td class="comparison-other"><strong><em>Better ListView</em></strong></td>
|
||||
<td class="comparison-other"><strong><em>Regular .NET ListView</em></strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Data binding</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Automatic sizing of items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Background image with transparency</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Circular selection</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Embedded controls</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Serialization to XML and binary</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Inbuilt sorting</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Automatic tooltips on items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Read-only mode</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Item hiding</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Item formatting</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Hierarchical items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Column reordering</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Item reordering</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Text on empty list</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Multi-line items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Thumbnails view, customizable image shadows and
|
||||
borders</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Multi-column sorting</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Text formatting for display (DisplayText property)</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Text formatting (trimming, ellipsis, line breaks)</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Three state checkboxes</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Separate context menus for items, columns and
|
||||
groups</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Alphanumeric sorting support</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Separate context menus on columns, items and groups</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Automatic tooltips on columns and groups</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Custom tooltips</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Saving and loading Better ListView content</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Individual columns can be hidden</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Combined items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Non-selectable items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Radio buttons</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p> </p>
|
||||
|
||||
<br><p class="table-name">Improved Features</p>
|
||||
<br><table class="comparison">
|
||||
<tr>
|
||||
<td class="comparison-line-odd"></td>
|
||||
<td class="comparison-other"><strong><em>Better ListView</em></strong></td>
|
||||
<td class="comparison-other"><strong><em>Regular .NET ListView</em></strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Custom label edit (combos, date/time, ...), sub-item label
|
||||
edit</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Flicker-free</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Check boxes in all views</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Detailed hit test</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Images supported on columns, groups, items,
|
||||
sub-items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Drag and drop: with effects, cross-application item
|
||||
dragging</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Multiple tooltips attachable everywhere</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Owner drawing with full control</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Searching by typing: explorer-like behaviour,
|
||||
customizable</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Full native theme support (modern look on Windows
|
||||
Vista/7)</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Groups: focusable, preserve item order</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Variable image sizes</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Detecting source of selection and check state changes
|
||||
(keyboard, mouse, other)</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Custom item heights</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Groups: collapsible</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Column headers in all views</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Customizable item/column/group sizes and paddings in every
|
||||
view</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Check boxes can be hidden on individual items</td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p> </p>
|
||||
|
||||
<br><p class="table-name">Dropped Features</p>
|
||||
<br><table class="comparison">
|
||||
<tr>
|
||||
<td class="comparison-line-odd"></td>
|
||||
<td class="comparison-other"><strong><em>Better ListView</em></strong></td>
|
||||
<td class="comparison-other"><strong><em>Regular .NET ListView</em></strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Item arrangement</td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">Hot tracking</td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">RTL support</td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-odd">State image list</td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="comparison-line-even">Virtual mode</td>
|
||||
<td class="comparison-no"><strong>×</strong></td>
|
||||
<td class="comparison-yes"><strong>●</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p> </p>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="../../../better-listview/quick-start-guide.html"><strong>Quick Start »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better ListView 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>Item Hierarchy</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="../../../quick-start-guide/better-listview/index.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>Item Hierarchy</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Items can be organized in tree structure by using
|
||||
<span class="code">BetterListViewItem.ChildItems</span> collection. Simply add items as
|
||||
other item's children to create a parent-child relationship:</p>
|
||||
|
||||
<p class="images"><img src="item-hierarchy-overview.png"></p>
|
||||
|
||||
<p>Hierarchical items can be used in combination with columns and <strong><em><a href="chapter-groups.html">Groups</a></em></strong>:</p>
|
||||
|
||||
<p class="images"><img src="item-hierarchy-groups.png"></p>
|
||||
|
||||
<p>Child items can use sub-items as well.</p>
|
||||
|
||||
<p>Parent items can be collapsed and expanded through expand buttons.
|
||||
Expand buttons appear automatically when there are any children. Expand
|
||||
buttons can be disabled on all items using
|
||||
<span class="code">ShowItemExpandButtons</span> property or individually using
|
||||
<span class="code">BetterListViewItem.AllowShowExpandButton</span>.</p>
|
||||
|
||||
<h2>Unselecting Collapsed Items</h2>
|
||||
|
||||
|
||||
<p>When both parent and child items are selected and the parent item is
|
||||
collapsed, you may want to unselect the child items and/or select the
|
||||
parent item. There is a <span class="code">CollapsedItemUnselection</span> poperty for
|
||||
setting up this behavior. It has one of the following values:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>DoNothing<ul style="list-style:none"><li>
|
||||
<p>No action is performed when items are unselected.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>UnselectOnly<ul style="list-style:none"><li>
|
||||
<p>Child items are unselected.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>SelectParent<ul style="list-style:none"><li>
|
||||
<p>Child items are unselected and the parent item is
|
||||
selected.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Adjusting Indentation</h2>
|
||||
|
||||
|
||||
<p>By default, the child items have indentation of an expand button
|
||||
size. Indentation can be adjusted by settings <span class="code">Indent</span> property
|
||||
to any non-negative value (the indentation unit is pixels). To resume
|
||||
default indentation, set the property to
|
||||
<span class="code">BetterListView.DefaultIndent</span>. Following images show effect of
|
||||
different indentation:</p>
|
||||
|
||||
<p class="images"><img src="item-hierarchy-indent-small.png"><img src="item-hierarchy-indent-large.png"></p>
|
||||
|
||||
|
||||
<h2>Traversing Hierarchical Items</h2>
|
||||
|
||||
|
||||
<p><span class="code">BetterListViewItem</span> implements <span class="code">IEnumerable</span>
|
||||
interface to allow traversing through all its child items in a foreach
|
||||
cycle:</p>
|
||||
|
||||
<p><strong>C#</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-cs">foreach (BetterListViewItem itemChild in items)
|
||||
{
|
||||
// ...
|
||||
}</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">For Each itemChild As BetterListViewItem In items
|
||||
' ...
|
||||
Next</code></pre>
|
||||
|
||||
<p>The same is possible on whole <span class="code">BetterListView</span>; it also
|
||||
implements <span class="code">IEnumerable</span> to enumerate all items within the
|
||||
list, including child items.</p>
|
||||
|
||||
|
||||
<h2>Navigation in Hierarchy</h2>
|
||||
|
||||
|
||||
<p>Multiple levels of hierarchy are possible.
|
||||
<span class="code">BetterListViewItem</span> has following properties for easy
|
||||
navigation in item hierarchy:</p>
|
||||
|
||||
<ul style="list-style:none">
|
||||
<li>
|
||||
<span class="code">Address</span><ul style="list-style:none"><li>
|
||||
<p>Location of the item within hierarchy.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ChildItems</span><ul style="list-style:none"><li>
|
||||
<p>Child items of the item.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">LastAvailableChildItem</span><ul style="list-style:none"><li>
|
||||
<p>The last (bottom) child item that can be scrolled into
|
||||
view.</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">Level</span><ul style="list-style:none"><li>
|
||||
<p>Item level in hierarchy (the top level is 0).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">ParentItem</span><ul style="list-style:none"><li>
|
||||
<p>Parent item of the item (one level up).</p>
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>
|
||||
<a name="addressing-elements" id="addressing-elements"></a>Addressing Elements</h2>
|
||||
|
||||
|
||||
<p>Since Better ListView supports <strong><em><a href="chapter-item-hierarchy.html">Hierarchical items</a></em></strong> there
|
||||
is a need for addressing items on different levels of hierarchy. When
|
||||
using only the Items list, <span class="code">BetterListViewItem.Index</span> property
|
||||
is sufficient. Child items (contained in
|
||||
<span class="code">BetterListViewItem.ChildItems </span>collection) has its own
|
||||
indices, so there can be several items with <span class="code">Index</span> property
|
||||
equal to <span class="code">0</span>, for example. To localize every element (item or
|
||||
group) uniquely, use the <span class="code">Address</span> property:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewGroup.Address</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">BetterListViewItem.Address</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Address is a structure that can be represented as string (via
|
||||
<span class="code">ToString</span> method) or parsed from such string. Element address
|
||||
looks like this:</p>
|
||||
|
||||
<pre>5:7.3</pre>
|
||||
|
||||
<p>The first number followed by colon (prefix) is a group index. The
|
||||
rest of numbers represent indices of items and child items separated by
|
||||
periods (in this case: <strong><em>item with index 3, which is a child item
|
||||
of item with index 7</em></strong>).</p>
|
||||
|
||||
<p>If there are no groups, the prefix is not present.</p>
|
||||
|
||||
<p><span class="code">BetterListViewAddress</span> structure implements
|
||||
<span class="code">IComparable</span>, so the two addresses can be compared. Element
|
||||
that is displayed above other element in Better ListView has always lower
|
||||
address value. Addresses can also be compared using operators
|
||||
<span class="code"><</span>, <span class="code">></span>, <span class="code"><=</span> and
|
||||
<span class="code">>=</span>.</p>
|
||||
|
||||
|
||||
<h2>Get Item/Group for the Given Address</h2>
|
||||
|
||||
|
||||
<p>There are two methods for retrieving items and groups for the given
|
||||
address:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><span class="code">GetGroupFromAddress(BetterListViewAddress)</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="code">GetItemFromAddress(BetterListViewAddress)</span></p>
|
||||
</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("Documents", 256);
|
||||
|
||||
// create first top-level item
|
||||
BetterListViewItem itemAudio = new BetterListViewItem("Audio Files");
|
||||
|
||||
// add children to the first top-level item
|
||||
itemAudio.ChildItems.AddRange(
|
||||
new[]
|
||||
{
|
||||
new BetterListViewItem("Call with Josh (2011-10-6).mp3"),
|
||||
new BetterListViewItem("Great Ringtone.mp3")
|
||||
});
|
||||
|
||||
// create second top-level item
|
||||
BetterListViewItem itemVideo = new BetterListViewItem("Video Files");
|
||||
|
||||
// add children to the second top-level item
|
||||
itemVideo.ChildItems.AddRange(
|
||||
new[]
|
||||
{
|
||||
new BetterListViewItem("Annual Conference.avi")
|
||||
});
|
||||
|
||||
// add the top-level items to list
|
||||
// NOTE: children are added automatically
|
||||
this.listView.Items.AddRange(
|
||||
new[]
|
||||
{
|
||||
itemAudio,
|
||||
itemVideo
|
||||
});
|
||||
|
||||
this.listView.EndUpdate();</code></pre>
|
||||
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<pre class="prettyprint"><code class="lang-vb">' Add any initialization after the InitializeComponent() call.
|
||||
ListView.BeginUpdate()
|
||||
|
||||
ListView.Columns.Add ("Documents", 256)
|
||||
|
||||
' create first top-level item
|
||||
Dim itemAudio As New BetterListViewItem ("Audio Files")
|
||||
|
||||
' add children to the first top-level item
|
||||
itemAudio.ChildItems.AddRange (
|
||||
New BetterListViewItem() { _
|
||||
New BetterListViewItem ("Call with Josh (2011-10-6).mp3"),
|
||||
New BetterListViewItem ("Great Ringtone.mp3")
|
||||
})
|
||||
|
||||
' create second top-level item
|
||||
Dim itemVideo As New BetterListViewItem ("Video Files")
|
||||
|
||||
' add children to the second top-level item
|
||||
itemVideo.ChildItems.AddRange (
|
||||
New BetterListViewItem() { _
|
||||
New BetterListViewItem ("Annual Conference.avi")
|
||||
})
|
||||
|
||||
' add the top-level items to list
|
||||
' NOTE: children are added automatically
|
||||
ListView.Items.AddRange (
|
||||
New BetterListViewItem() { _
|
||||
itemAudio,
|
||||
itemVideo
|
||||
})
|
||||
|
||||
ListView.EndUpdate()</code></pre>
|
||||
|
||||
<br><div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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,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-item-hierarchy.html"><strong>
|
||||
« Item Hierarchy</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.html" class="dbtn">More Info</a></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="navigation"><tr>
|
||||
<td class="navigation-previous"><a href="chapter-item-hierarchy.html"><strong>
|
||||
« Item Hierarchy</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
360
public/documentation/better-listview/data/chapter-items.html
Normal file
360
public/documentation/better-listview/data/chapter-items.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-layout.html"><strong>Layout Properties »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Label Editing</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-layout.html"><strong>Layout Properties »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
478
public/documentation/better-listview/data/chapter-layout.html
Normal file
478
public/documentation/better-listview/data/chapter-layout.html
Normal file
@@ -0,0 +1,478 @@
|
||||
<!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 Properties</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="../../../quick-start-guide/better-listview/index.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>Layout Properties</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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>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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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-layout.html"><strong>
|
||||
« Layout Properties</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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 Properties</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
150
public/documentation/better-listview/data/chapter-save-load.html
Normal file
150
public/documentation/better-listview/data/chapter-save-load.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
238
public/documentation/better-listview/data/chapter-search.html
Normal file
238
public/documentation/better-listview/data/chapter-search.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
463
public/documentation/better-listview/data/chapter-sort.html
Normal file
463
public/documentation/better-listview/data/chapter-sort.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
120
public/documentation/better-listview/data/chapter-sub-items.html
Normal file
120
public/documentation/better-listview/data/chapter-sub-items.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.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>Sub-items</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView 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,507 @@
|
||||
<!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-sub-items.html"><strong>
|
||||
« Sub-items</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"><a href="chapter-tooltips.html"><strong>Tooltips »
|
||||
</strong></a></td>
|
||||
</tr></table>
|
||||
<br><h1>Text Formatting</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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>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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
334
public/documentation/better-listview/data/chapter-tooltips.html
Normal file
334
public/documentation/better-listview/data/chapter-tooltips.html
Normal file
@@ -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-text-formatting.html"><strong>
|
||||
« Text Formatting</strong></a></td>
|
||||
<td class="navigation-index"><a href="../../../quick-start-guide/better-listview/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.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 ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
143
public/documentation/better-listview/data/chapter-views.html
Normal file
143
public/documentation/better-listview/data/chapter-views.html
Normal file
@@ -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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"></td>
|
||||
</tr></table>
|
||||
<br><h1>Views</h1>
|
||||
<div class="banner">
|
||||
<a href="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../blog/page/6/index.html"><img src="../resources/overview.gif" alt="Better ListView" class="ss"></a>
|
||||
<div class="inside">
|
||||
<div class="text">Better ListView: Ultimate .NET ListView replacement control for WinForms (C#, VB.NET)</div>
|
||||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterlistview.exe" class="dbtn">Download</a></span></span>
|
||||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../blog/page/6/index.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="../../../quick-start-guide/better-listview/index.html"><strong>Index</strong></a></td>
|
||||
<td class="navigation-next"></td>
|
||||
</tr></table>
|
||||
<br><table class="footer"><tr>
|
||||
<td class="footer-title">Better ListView Documentation
|
||||
</td>
|
||||
<td class="footer-copyright">
|
||||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div></body>
|
||||
</html>
|
||||
BIN
public/documentation/better-listview/data/checkboxes-align1.png
Normal file
BIN
public/documentation/better-listview/data/checkboxes-align1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/documentation/better-listview/data/checkboxes-align2.png
Normal file
BIN
public/documentation/better-listview/data/checkboxes-align2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/documentation/better-listview/data/checkboxes-radio.png
Normal file
BIN
public/documentation/better-listview/data/checkboxes-radio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
public/documentation/better-listview/data/column-all-views.png
Normal file
BIN
public/documentation/better-listview/data/column-all-views.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/documentation/better-listview/data/column-hidden.png
Normal file
BIN
public/documentation/better-listview/data/column-hidden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
public/documentation/better-listview/data/column-hide-after.png
Normal file
BIN
public/documentation/better-listview/data/column-hide-after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/documentation/better-listview/data/column-hide-before.png
Normal file
BIN
public/documentation/better-listview/data/column-hide-before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/documentation/better-listview/data/column-reorder.png
Normal file
BIN
public/documentation/better-listview/data/column-reorder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/documentation/better-listview/data/context-menus.png
Normal file
BIN
public/documentation/better-listview/data/context-menus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
public/documentation/better-listview/data/data-bindcolumns.png
Normal file
BIN
public/documentation/better-listview/data/data-bindcolumns.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
public/documentation/better-listview/data/data-displaymember.png
Normal file
BIN
public/documentation/better-listview/data/data-displaymember.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1019 B |
BIN
public/documentation/better-listview/data/data-simple.png
Normal file
BIN
public/documentation/better-listview/data/data-simple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
public/documentation/better-listview/data/data-sort.png
Normal file
BIN
public/documentation/better-listview/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 |
BIN
public/documentation/better-listview/data/embedded-control.png
Normal file
BIN
public/documentation/better-listview/data/embedded-control.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/documentation/better-listview/data/empty-text.png
Normal file
BIN
public/documentation/better-listview/data/empty-text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/documentation/better-listview/data/focus-group.png
Normal file
BIN
public/documentation/better-listview/data/focus-group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
public/documentation/better-listview/data/focus-item.png
Normal file
BIN
public/documentation/better-listview/data/focus-item.png
Normal file
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 |
BIN
public/documentation/better-listview/data/groups-selected1.png
Normal file
BIN
public/documentation/better-listview/data/groups-selected1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/documentation/better-listview/data/groups-selected2.png
Normal file
BIN
public/documentation/better-listview/data/groups-selected2.png
Normal file
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: 7.8 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: 14 KiB |
BIN
public/documentation/better-listview/data/item-reorder.png
Normal file
BIN
public/documentation/better-listview/data/item-reorder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
public/documentation/better-listview/data/items-circular.png
Normal file
BIN
public/documentation/better-listview/data/items-circular.png
Normal file
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 |
BIN
public/documentation/better-listview/data/items-disable.png
Normal file
BIN
public/documentation/better-listview/data/items-disable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/documentation/better-listview/data/items-hide.png
Normal file
BIN
public/documentation/better-listview/data/items-hide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/documentation/better-listview/data/items-keep.png
Normal file
BIN
public/documentation/better-listview/data/items-keep.png
Normal file
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 |
61
public/documentation/better-listview/data/lang-vb.js
Normal file
61
public/documentation/better-listview/data/lang-vb.js
Normal file
@@ -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']);
|
||||
BIN
public/documentation/better-listview/data/layout-center1.png
Normal file
BIN
public/documentation/better-listview/data/layout-center1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/documentation/better-listview/data/layout-center2.png
Normal file
BIN
public/documentation/better-listview/data/layout-center2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/documentation/better-listview/data/layout-image-align.png
Normal file
BIN
public/documentation/better-listview/data/layout-image-align.png
Normal file
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 |
BIN
public/documentation/better-listview/data/layout-multiline1.png
Normal file
BIN
public/documentation/better-listview/data/layout-multiline1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
public/documentation/better-listview/data/layout-multiline2.png
Normal file
BIN
public/documentation/better-listview/data/layout-multiline2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/documentation/better-listview/data/layout-padding.png
Normal file
BIN
public/documentation/better-listview/data/layout-padding.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/documentation/better-listview/data/layout-thumbnails.png
Normal file
BIN
public/documentation/better-listview/data/layout-thumbnails.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
public/documentation/better-listview/data/multi-line-groups.png
Normal file
BIN
public/documentation/better-listview/data/multi-line-groups.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
public/documentation/better-listview/data/owner-draw.png
Normal file
BIN
public/documentation/better-listview/data/owner-draw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user