340 lines
12 KiB
HTML
340 lines
12 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>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>
|