259 lines
11 KiB
HTML
259 lines
11 KiB
HTML
<!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>
|