300 lines
12 KiB
HTML
300 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>Label Editing</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-items.html"><strong>
|
||
« Items</strong></a></td>
|
||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||
<td class="navigation-next"><a href="chapter-multi-line.html"><strong>Multi-line Items »
|
||
</strong></a></td>
|
||
</tr></table>
|
||
<br><h1>Label Editing</h1>
|
||
<div class="banner">
|
||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||
<div class="inside">
|
||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<p>Label editing allows user to edit items and sub-items on the fly. Just
|
||
set the <span class="code">LabelEdit</span> property to <span class="code">true</span> (or
|
||
<span class="code">LabelEditModeItems</span> to
|
||
<span class="code">BetterListViewLabelEditMode.Text</span>) and the user is allowed to
|
||
edit items using text box:</p>
|
||
|
||
<p class="images"><img src="label-editing-control1.png"></p>
|
||
|
||
<p>To enable label editing for sub-items, set the
|
||
<span class="code">LabelEditModeSubItems</span> property to value other than
|
||
<span class="code">LabelEditModeSubItems.None</span>. For example, you can use different
|
||
editing controls, like a combo box by setting
|
||
<span class="code">LabelEditModeSubItems</span> to
|
||
<span class="code">LabelEditModeSubItems.CustomControl</span>. Then handler
|
||
<span class="code">RequestEmbeddedControl</span> event and return the editing control in
|
||
the event handler.</p>
|
||
|
||
<p>You can also specify position of the editing control by setting
|
||
<span class="code">BetterListViewRequestEmbeddedControlEventArgs.ControlPlacement</span>.
|
||
The position is determined from sub-item text position by default.</p>
|
||
|
||
<p class="images"><img src="label-editing-control2.png"></p>
|
||
|
||
<p>There are three basic editing controls pre-packed in Better
|
||
ListView:</p>
|
||
|
||
<ul style="list-style:none">
|
||
<li>
|
||
<span class="code">BetterListViewTextBoxEmbeddedControl</span><ul style="list-style:none"><li>
|
||
<p><span class="code">TextBox</span>-based control used for basic label
|
||
editing.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">BetterListViewComboBoxEmbeddedControl</span><ul style="list-style:none"><li>
|
||
<p>ComboBox-based control used for editing enumerations.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">BetterListViewDateTimePickerEmbeddedControl</span><ul style="list-style:none"><li>
|
||
<p>DateTimePicker-based control used for editing date and time
|
||
values.</p>
|
||
</li></ul>
|
||
</li>
|
||
</ul>
|
||
<p>If you want to create your own editing controls, see <strong><em><a href="chapter-embedded-controls.html">Embedded Controls</a></em></strong>, for
|
||
more information.</p>
|
||
|
||
<h2>Label Editing Events</h2>
|
||
|
||
|
||
<p>Here are the events associated with label editing. They are
|
||
mentioned in the order of occurence during the label editing
|
||
process:</p>
|
||
|
||
<p></p>
|
||
<ul style="list-style:none">
|
||
<li>
|
||
<span class="code">BeforeLabelEdit</span><ul style="list-style:none"><li>
|
||
<p>Raised after an item is clicked and label editing is about
|
||
to proceed. Label editing can be cancelled at this point.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">AfterLabelEditCancel</span><ul style="list-style:none"><li>
|
||
<p>Raised after item label is edited. Label editing can be
|
||
cancelled at this point.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">AfterLabelEditEmbeddedControl</span><ul style="list-style:none"><li>
|
||
<p>Raised after item label is edited using custom control.
|
||
Label editing cannot be cancelled at this point.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">AfterLabelEdit</span><ul style="list-style:none"><li>
|
||
<p>Raised after item label is edited. Label editing cannot be
|
||
cancelled at this point.</p>
|
||
</li></ul>
|
||
</li>
|
||
</ul>
|
||
<h2>Label Editing Activation</h2>
|
||
|
||
|
||
<p><span class="code">LabelEditActivation</span> property allows you to specify
|
||
label editing invocation. It is a flags enum, so you can combine the
|
||
values:</p>
|
||
|
||
<ul style="list-style:none">
|
||
<li>
|
||
<span class="code">Default</span><ul style="list-style:none"><li>
|
||
<p>Default behavior. None of the options below are used.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">Keyboard</span><ul style="list-style:none"><li>
|
||
<p>Label editing can be invoked using <strong><em>F2</em></strong>
|
||
key.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">SingleClick</span><ul style="list-style:none"><li>
|
||
<p>Label editing can be invoked by clicking on item text without
|
||
needing the item to be focused.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">Immediate</span><ul style="list-style:none"><li>
|
||
<p>Label editing starts immediately when invoked, no delay (e.g.
|
||
for canceling label edit by clicking on other item) is
|
||
applied.</p>
|
||
</li></ul>
|
||
</li>
|
||
<li>
|
||
<span class="code">ClickThrough</span><ul style="list-style:none"><li>
|
||
<p>Label editing is performed even when user clicks on unfocused
|
||
control. This is behavior similar to button, which can be clicked
|
||
even when its parent form is not active at the moment of clicking
|
||
(but becomes focused thereafter).</p>
|
||
</li></ul>
|
||
</li>
|
||
</ul>
|
||
<h2>Default Action</h2>
|
||
|
||
|
||
<p>When label edit is terminated by the control (e.g. when user clicks
|
||
outside the editing control or Better ListView loses focus), the edited
|
||
data can be either accepted or cancelled.</p>
|
||
|
||
<p>By default, the data is accepted, but this can be changed by setting
|
||
<span class="code">LabelEditDefaultAccept</span> to <span class="code">false</span>.</p>
|
||
|
||
|
||
<h2>Invoking Label Editing</h2>
|
||
|
||
|
||
<p>Label editing can be initiated and terminated from user code using
|
||
<span class="code">BeginEdit</span> and <span class="code">EndEdit</span> methods.</p>
|
||
|
||
<p><span class="code">BeginEdit</span> is adopted from .NET ListView and allows you
|
||
to start label editing of a specific sub-item (e.g. when some keyboard
|
||
shortcut is pressed).</p>
|
||
|
||
<p><span class="code">EndEdit</span> can be used to terminate label editing at any
|
||
time. This method can be called even when label editing is not currently
|
||
in progress.</p>
|
||
|
||
|
||
<h2>Sample Source Code</h2>
|
||
|
||
|
||
<p>The following sample shows initialization of a Better ListView with
|
||
custom label editing for sub-items:</p>
|
||
|
||
<p><strong>C#</strong></p>
|
||
<pre class="prettyprint"><code class="lang-cs">this.listView.BeginUpdate();
|
||
|
||
this.listView.Columns.AddRange(new[] { "Property", "Visiblity" });
|
||
|
||
this.listView.Items.Add(new[] { "AlphaProperty", "public" });
|
||
this.listView.Items.Add(new[] { "BetaProperty", "internal" });
|
||
this.listView.Items.Add(new[] { "GammaProperty", "private" });
|
||
|
||
// start editing items with just single click (optional)
|
||
this.listView.LabelEditActivation = BetterListViewLabelEditActivation.SingleClick;
|
||
// we would like to edit sub-items, so set editing mode of sub-items
|
||
this.listView.LabelEditModeSubItems = BetterListViewLabelEditMode.CustomControl;
|
||
|
||
this.listView.EndUpdate();
|
||
|
||
// custom label editing needs to handle this event to obtain actual editing control
|
||
this.listView.RequestEmbeddedControl += ListViewRequestEmbeddedControl;</code></pre>
|
||
|
||
<p><strong>Visual Basic</strong></p>
|
||
<pre class="prettyprint"><code class="lang-vb">ListView.BeginUpdate()
|
||
|
||
ListView.Columns.AddRange (New String() {"Property", "Visiblity"})
|
||
|
||
ListView.Items.Add (New String() {"AlphaProperty", "public"})
|
||
ListView.Items.Add (New String() {"BetaProperty", "internal"})
|
||
ListView.Items.Add (New String() {"GammaProperty", "private"})
|
||
|
||
' start editing items with just single click (optional)
|
||
ListView.LabelEditActivation = BetterListViewLabelEditActivation.SingleClick
|
||
' we would like to edit sub-items, so set editing mode of sub-items
|
||
ListView.LabelEditModeSubItems = BetterListViewLabelEditMode.CustomControl
|
||
|
||
ListView.EndUpdate()
|
||
|
||
' custom label editing needs to handle this event to obtain actual editing control
|
||
AddHandler ListView.RequestEmbeddedControl, AddressOf ListViewRequestEmbeddedControl</code></pre>
|
||
|
||
<p>The <span class="code">RequestEmbeddedControl</span> event handler provides the
|
||
actual label editing control:</p>
|
||
|
||
<p><strong>C#</strong></p>
|
||
<pre class="prettyprint"><code class="lang-cs">IBetterListViewEmbeddedControl ListViewRequestEmbeddedControl(object sender, BetterListViewRequestEmbeddedControlEventArgs eventArgs)
|
||
{
|
||
if (eventArgs.SubItem.Index == 1) // user edits the first sub-item
|
||
{
|
||
// create ComboBox editing control from BetterListView
|
||
BetterListViewComboBoxEmbeddedControl comboBoxEmbeddedControl = new BetterListViewComboBoxEmbeddedControl();
|
||
|
||
comboBoxEmbeddedControl.DropDownStyle = ComboBoxStyle.DropDownList;
|
||
|
||
// add items into the editing control
|
||
comboBoxEmbeddedControl.Items.AddRange(
|
||
new[]
|
||
{
|
||
"public",
|
||
"internal",
|
||
"private"
|
||
});
|
||
|
||
return comboBoxEmbeddedControl;
|
||
}
|
||
|
||
return null;
|
||
}</code></pre>
|
||
|
||
<p><strong>Visual Basic</strong></p>
|
||
<pre class="prettyprint"><code class="lang-vb">Function ListViewRequestEmbeddedControl (ByVal sender As Object,
|
||
ByVal eventArgs As BetterListViewRequestEmbeddedControlEventArgs) _
|
||
As IBetterListViewEmbeddedControl
|
||
|
||
If eventArgs.SubItem.Index = 1 Then
|
||
|
||
' user edits the first sub-item
|
||
' create ComboBox editing control from BetterListView
|
||
Dim comboBoxEmbeddedControl As New BetterListViewComboBoxEmbeddedControl()
|
||
|
||
comboBoxEmbeddedControl.DropDownStyle = ComboBoxStyle.DropDownList
|
||
|
||
' add items into the editing control
|
||
comboBoxEmbeddedControl.Items.AddRange (New String() {"public", "internal", "private"})
|
||
|
||
Return comboBoxEmbeddedControl
|
||
|
||
End If
|
||
|
||
Return Nothing
|
||
|
||
End Function</code></pre>
|
||
|
||
<br><div class="banner">
|
||
<a href="../../../better-thumbnail-browser.html"><img src="../resources/better-thumbnail-browser-overview.gif" alt="Better Thumbnail Browser" class="ss"></a>
|
||
<div class="inside">
|
||
<div class="text">Better Thumbnail Browser for .NET (C#, VB) - Image thumbnail viewing and loading control</div>
|
||
<span class="dbtn-c dbtn-hilight"><span class="dbtn-w"><a href="../../../betterthumbnailbrowser.exe" class="dbtn">Download</a></span></span>
|
||
<span class="dbtn-c"><span class="dbtn-w"><a href="../../../better-thumbnail-browser.html" class="dbtn">More Info</a></span></span>
|
||
</div>
|
||
</div>
|
||
<table class="navigation"><tr>
|
||
<td class="navigation-previous"><a href="chapter-items.html"><strong>
|
||
« Items</strong></a></td>
|
||
<td class="navigation-index"><a href="../../../better-thumbnail-browser/documentation.html"><strong>Index</strong></a></td>
|
||
<td class="navigation-next"><a href="chapter-multi-line.html"><strong>Multi-line Items »
|
||
</strong></a></td>
|
||
</tr></table>
|
||
<br><table class="footer"><tr>
|
||
<td class="footer-title">Better Thumbnail Browser Documentation
|
||
</td>
|
||
<td class="footer-copyright">
|
||
Copyright © 2010-2012 <a href="../../../index.html" target="_blank">ComponentOwl.com</a>
|
||
</td>
|
||
</tr></table>
|
||
</div></body>
|
||
</html>
|