334 lines
12 KiB
HTML
334 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="../../../better-listview-express/documentation.html"><strong>Index</strong></a></td>
|
|
<td class="navigation-next"><a href="chapter-hit-test.html"><strong>Hit Test »
|
|
</strong></a></td>
|
|
</tr></table>
|
|
<br><h1>Groups</h1>
|
|
<div class="banner">
|
|
<a href="../../../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>
|
|
|
|
|
|
<br><hr>
|
|
<p class="note">Expandable groups are not supported in <strong><em>Better ListView
|
|
Express</em></strong>.</p>
|
|
<hr>
|
|
<br><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>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="../../../better-listview-express/documentation.html"><strong>Index</strong></a></td>
|
|
<td class="navigation-next"><a href="chapter-hit-test.html"><strong>Hit Test »
|
|
</strong></a></td>
|
|
</tr></table>
|
|
<br><table class="footer"><tr>
|
|
<td class="footer-title">Better ListView Express Documentation
|
|
</td>
|
|
<td class="footer-copyright">
|
|
Copyright © <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
|
</td>
|
|
</tr></table>
|
|
</div></body>
|
|
</html>
|