Add documentation, class reference, and quick-start guide pages (5771 files)
This commit is contained in:
Jarvis Prime
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>
|
||||
Reference in New Issue
Block a user