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