Preserve full site structure: articles, blog posts, downloads, BLV Express, sitemap, legacy CSS/JS
This commit is contained in:
Jarvis Prime
897
public/blog/category/tutorials/feed/index.html
Normal file
897
public/blog/category/tutorials/feed/index.html
Normal file
@@ -0,0 +1,897 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
|
||||
xmlns:content="http://purl.org/rss/1.0/modules/content/"
|
||||
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:atom="http://www.w3.org/2005/Atom"
|
||||
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
|
||||
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
|
||||
>
|
||||
|
||||
<channel>
|
||||
<title>Tutorials – Owl's Blog on .NET development</title>
|
||||
<atom:link href="http://www.componentowl.com/blog/category/tutorials/feed/" rel="self" type="application/rss+xml" />
|
||||
<link>http://www.componentowl.com/blog</link>
|
||||
<description>Component Owl codes Better ListView control all night so you don't have to.</description>
|
||||
<lastBuildDate>Tue, 04 Sep 2018 13:10:05 +0000</lastBuildDate>
|
||||
<language>en-US</language>
|
||||
<sy:updatePeriod>hourly</sy:updatePeriod>
|
||||
<sy:updateFrequency>1</sy:updateFrequency>
|
||||
<generator>https://wordpress.org/?v=4.9.8</generator>
|
||||
<item>
|
||||
<title>Centering Images in Better ListView Sub-items</title>
|
||||
<link>http://www.componentowl.com/blog/centering-images-in-better-listview-sub-items/</link>
|
||||
<comments>http://www.componentowl.com/blog/centering-images-in-better-listview-sub-items/#respond</comments>
|
||||
<pubDate>Wed, 06 Aug 2014 21:14:10 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[align]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[center]]></category>
|
||||
<category><![CDATA[column]]></category>
|
||||
<category><![CDATA[columns]]></category>
|
||||
<category><![CDATA[header]]></category>
|
||||
<category><![CDATA[image]]></category>
|
||||
<category><![CDATA[images]]></category>
|
||||
<category><![CDATA[layout]]></category>
|
||||
<category><![CDATA[sub-item]]></category>
|
||||
<category><![CDATA[sub-items]]></category>
|
||||
<category><![CDATA[subitem]]></category>
|
||||
<category><![CDATA[subitems]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=906</guid>
|
||||
<description><![CDATA[How to align images to center in Better ListView sub-items and columns.]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_907" style="width: 380px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2014/08/blv-overlay.png"><img class="size-full wp-image-907" title="Centered images in Better ListView" src="../../../wp-content/uploads/2014/08/blv-overlay.png" alt="Centered images in Better ListView" width="370" height="162" /></a><p class="wp-caption-text">Centered images in Better ListView</p></div>
|
||||
<p>Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set <strong>AlignHorizontalImage</strong> property of an sub-item or column to <strong>BetterListViewImageAlignmentHorizontal.OverlayCenter</strong>.</p>
|
||||
<p>The image will be centered inside available space regardless of text.</p>
|
||||
<p>This is useful for sub-items and column headers consisting of image only.</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/centering-images-in-better-listview-sub-items/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Sub-item Check Boxes in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/sub-item-check-boxes-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/sub-item-check-boxes-in-better-listview/#respond</comments>
|
||||
<pubDate>Sun, 06 Jul 2014 21:48:41 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Announcements]]></category>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[better]]></category>
|
||||
<category><![CDATA[box]]></category>
|
||||
<category><![CDATA[boxes]]></category>
|
||||
<category><![CDATA[buttons]]></category>
|
||||
<category><![CDATA[cell]]></category>
|
||||
<category><![CDATA[cells]]></category>
|
||||
<category><![CDATA[check]]></category>
|
||||
<category><![CDATA[checkbox]]></category>
|
||||
<category><![CDATA[checkboxes]]></category>
|
||||
<category><![CDATA[listview]]></category>
|
||||
<category><![CDATA[radio]]></category>
|
||||
<category><![CDATA[radios]]></category>
|
||||
<category><![CDATA[sub-item]]></category>
|
||||
<category><![CDATA[subitem]]></category>
|
||||
<category><![CDATA[subitems]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=901</guid>
|
||||
<description><![CDATA[How to display fully interactive check boxes and radio buttons in Better ListView sub-items.]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_902" style="width: 395px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2014/07/blv-sub-item-checkboxes.png"><img class="size-full wp-image-902" title="blv-sub-item-checkboxes" src="../../../wp-content/uploads/2014/07/blv-sub-item-checkboxes.png" alt="Better ListView Sub-item Check Boxes" width="385" height="82" /></a><p class="wp-caption-text">Better ListView Sub-item Check Boxes</p></div>
|
||||
<p><a href="../../../../betterlistview.exe">Better ListView 3.10.0</a> allows displaying fully interactive check boxes and even radio buttons in sub-item cells.</p>
|
||||
<p>This feature can be activated simply by setting <strong>CheckBoxAppearance</strong> property of a given sub-item to other value than <strong>Hide</strong>. Such sub-item will not display check box or radio instead of image and text.</p>
|
||||
<p>Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).</p>
|
||||
<p>Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting <strong>CheckEnabled</strong> property to <strong>false</strong> on the respective item or sub-item.</p>
|
||||
<p>Sub-item check boxes can be operated by both mouse and keyboard. Checking sub-item with keyboard can be done by navigating focus rectangle by arrow keys to the given sub-item and pressing spacebar.</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/sub-item-check-boxes-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>How to Add Grid Lines in Empty Space in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/how-to-add-grid-lines-in-empty-space-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/how-to-add-grid-lines-in-empty-space-in-better-listview/#respond</comments>
|
||||
<pubDate>Wed, 30 Apr 2014 09:51:46 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[below]]></category>
|
||||
<category><![CDATA[better]]></category>
|
||||
<category><![CDATA[empty]]></category>
|
||||
<category><![CDATA[grid]]></category>
|
||||
<category><![CDATA[gridlines]]></category>
|
||||
<category><![CDATA[lines]]></category>
|
||||
<category><![CDATA[listview]]></category>
|
||||
<category><![CDATA[space]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=894</guid>
|
||||
<description><![CDATA[How to draw grid lines below last item in Better ListView]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_895" style="width: 271px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2014/04/blv-gridlines-1.png"><img class="size-full wp-image-895 " title="Default list without grid lines below items" src="../../../wp-content/uploads/2014/04/blv-gridlines-1.png" alt="Default list without grid lines below items" width="261" height="308" /></a><p class="wp-caption-text">Default list without grid lines below items</p></div>
|
||||
<div id="attachment_896" style="width: 271px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2014/04/blv-gridlines-2.png"><img class=" wp-image-896 " title="List with grid lines added" src="../../../wp-content/uploads/2014/04/blv-gridlines-2.png" alt="List with grid lines added" width="261" height="308" /></a><p class="wp-caption-text">List with grid lines added</p></div>
|
||||
<p style="text-align: center;">
|
||||
<p>Setting grid lines in Better ListView is easy. Simply make sure you are using <strong>Details</strong> view (the default view). Then you can set <strong>GridLines</strong> property to one of the following values:</p>
|
||||
<ul>
|
||||
<li><strong>None</strong> – grid lines are hidden</li>
|
||||
<li><strong>Horizontal</strong> – only horizontal lines are displayed</li>
|
||||
<li><strong>Vertical</strong> – only vertical lines are displayed</li>
|
||||
<li><strong>Grid</strong> – both horizontal and vertical lines are displayed, forming a grid</li>
|
||||
</ul>
|
||||
<p>None of these settings, however, cause drawing lines <em>below</em> the last visible item, which may be desirable. The reason for this is that Better ListView supports <a href="http://www.componentowl.com/blog/custom-item-height-in-details-view-of-better-listview/">custom item height</a> and there is uncertainity about the spacing between new grid lines (smallest?, largest?, average?) It is up to your choice.</p>
|
||||
<p>To draw new grid lines, handle the <strong>DrawBackground</strong> event (or subclass BetterListView and override the <strong>OnDrawBackground</strong> method) with the following code:</p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
private void ListViewOnDrawBackground(object sender, BetterListViewDrawBackgroundEventArgs eventArgs)<br />
|
||||
{<br />
|
||||
BetterListView listView = (BetterListView)sender;</p>
|
||||
<p> // get last visible item<br />
|
||||
var item = listView.BottomItem;</p>
|
||||
<p> if (item == null)<br />
|
||||
{<br />
|
||||
return;<br />
|
||||
}</p>
|
||||
<p> // measure row height<br />
|
||||
var bounds = listView.GetItemBounds(item);<br />
|
||||
int rowHeight = bounds.BoundsOuterExtended.Height;</p>
|
||||
<p> // draw additional lines<br />
|
||||
Rectangle rectClient = listView.ClientRectangleInner;<br />
|
||||
Pen penGridLines = new Pen(listView.ColorGridLines, 1.0f);</p>
|
||||
<p> int y = (bounds.BoundsOuterExtended.Bottom + rowHeight);</p>
|
||||
<p> while (y < rectClient.Bottom)
|
||||
{
|
||||
eventArgs.Graphics.DrawLine(
|
||||
penGridLines,
|
||||
rectClient.Left,
|
||||
y,
|
||||
rectClient.Right - 1,
|
||||
y);
|
||||
|
||||
y += rowHeight;
|
||||
}
|
||||
|
||||
penGridLines.Dispose();
|
||||
}
|
||||
[/csharp]
|
||||
|
||||
What this code does is getting the last visible item using <strong>BottomItem</strong> property. It is important to get this visible item instead of e.g. first item because <strong>GetItemBounds</strong> method returns non-null value on visible items only. The <strong>GetItemBounds</strong> method reveals item measurement which is used to determine item height and coordinate of its bottom. Finally, we draw new lines using current grid line color (<strong>ColorGridLines</strong> property) until reaching the bottom of the view.</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/how-to-add-grid-lines-in-empty-space-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Alternating Rows in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/alternating-rows-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/alternating-rows-in-better-listview/#respond</comments>
|
||||
<pubDate>Tue, 22 Apr 2014 22:38:15 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[alternating]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[colored]]></category>
|
||||
<category><![CDATA[colors]]></category>
|
||||
<category><![CDATA[even]]></category>
|
||||
<category><![CDATA[odd]]></category>
|
||||
<category><![CDATA[rows]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=888</guid>
|
||||
<description><![CDATA[How to set up alternating row colors in Better ListView]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_889" style="width: 234px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2014/04/blv-alternating-rows.png"><img class="size-full wp-image-889" title="Alternating Rows" src="../../../wp-content/uploads/2014/04/blv-alternating-rows.png" alt="Alternating Rows" width="224" height="220" /></a><p class="wp-caption-text">Alternating Rows</p></div>
|
||||
<p>Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.</p>
|
||||
<p>Simply add <strong>DrawItemBackground</strong> event handler and fill background on odd/even items:</p>
|
||||
<p> </p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
private void ListViewOnDrawItemBackground(object sender, BetterListViewDrawItemBackgroundEventArgs eventArgs)<br />
|
||||
{<br />
|
||||
if ((eventArgs.Item.Index & 1) == 1)<br />
|
||||
{<br />
|
||||
eventArgs.Graphics.FillRectangle(Brushes.AliceBlue, eventArgs.ItemBounds.BoundsOuter);<br />
|
||||
}<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/alternating-rows-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Search Filtering in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/search-filtering-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/search-filtering-in-better-listview/#comments</comments>
|
||||
<pubDate>Mon, 03 Feb 2014 14:58:30 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=882</guid>
|
||||
<description><![CDATA[How to improve item searching with highlights and dynamic filtering in Better ListView.]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_883" style="width: 93px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2014/02/image.gif"><img class="size-full wp-image-883" title="Search Filtering" src="../../../wp-content/uploads/2014/02/image.gif" alt="Search Filtering" width="83" height="153" /></a><p class="wp-caption-text">Search Filtering with highlight</p></div>
|
||||
<p>There are few ways of making searching in large list of items more convenient. For example, Better ListView provides <strong>Search Highlighting</strong> and <strong>Item Hiding</strong> features that can be used to improve searching. The above animation shows both of these features in action when searching for a word “pear” using keyboard.</p>
|
||||
<p>The implementation is very simple and involves handling just two events: <strong>ItemSearch</strong> (raised whenever item is searched, e.g. using keyboard ) and <strong>KeyDown</strong>:</p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
var listView = new BetterListView();</p>
|
||||
<p>listView.Items.AddRange(new[] { “apple”, “pear”, “pineapple”, “orange”, “grapefruit”, “cherry”, “avocado” });</p>
|
||||
<p>listView.ItemSearch += listView_ItemSearch;<br />
|
||||
listView.KeyDown += listView_KeyDown;<br />
|
||||
[/csharp]</p>
|
||||
<p>The ItemSearch event handler finds matching items and sets their visibility accordingly. It also updates the highlighting:</p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
void listView_ItemSearch(object sender, BetterListViewItemSearchEventArgs eventArgs)<br />
|
||||
{<br />
|
||||
var listView = (BetterListView)sender;</p>
|
||||
<p> listView.BeginUpdate();</p>
|
||||
<p> // update item visibility according to search query string<br />
|
||||
foreach (var item in listView.Items)<br />
|
||||
{<br />
|
||||
bool match = item.Text.Contains(eventArgs.QueryString);</p>
|
||||
<p> if (match)<br />
|
||||
{<br />
|
||||
item.Visible = true;</p>
|
||||
<p> item.SearchHighlight = new BetterListViewSearchHighlight(<br />
|
||||
0,<br />
|
||||
item.Text.IndexOf(eventArgs.QueryString, StringComparison.Ordinal),<br />
|
||||
eventArgs.QueryString.Length);<br />
|
||||
}<br />
|
||||
else<br />
|
||||
{<br />
|
||||
item.Visible = false;<br />
|
||||
}<br />
|
||||
}</p>
|
||||
<p> listView.EndUpdate();<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p>Finally, the KeyDown event handler resets the view when Escape key is pressed (all items are made visible and the highlight is removed):</p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
void listView_KeyDown(object sender, KeyEventArgs e)<br />
|
||||
{<br />
|
||||
var listView = (BetterListView)sender;</p>
|
||||
<p> listView.BeginUpdate();</p>
|
||||
<p> if (e.KeyCode == Keys.Escape)<br />
|
||||
{<br />
|
||||
// remove search highlight<br />
|
||||
//NOTE: we could use BetterListView.RemoveSearchHighlight() but this applies to visible items only and some items are hidden at the time<br />
|
||||
foreach (var item in listView.Items)<br />
|
||||
{<br />
|
||||
item.SearchHighlight = BetterListViewSearchHighlight.Empty;<br />
|
||||
}</p>
|
||||
<p> // make all items visible<br />
|
||||
foreach (var item in listView.Items)<br />
|
||||
{<br />
|
||||
item.Visible = true;<br />
|
||||
}</p>
|
||||
<p> // mark the key as handled<br />
|
||||
e.Handled = true;</p>
|
||||
<p> // suppress KeyPress event to prevent ItemSearch from happening<br />
|
||||
e.SuppressKeyPress = true;<br />
|
||||
}</p>
|
||||
<p> listView.EndUpdate();<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p>And that’s it!</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/search-filtering-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>2</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Custom Scroll Bar Size in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/custom-scroll-bar-size-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/custom-scroll-bar-size-in-better-listview/#comments</comments>
|
||||
<pubDate>Tue, 19 Mar 2013 15:56:22 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Components]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[bars]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[custom]]></category>
|
||||
<category><![CDATA[height]]></category>
|
||||
<category><![CDATA[large]]></category>
|
||||
<category><![CDATA[larger]]></category>
|
||||
<category><![CDATA[scroll]]></category>
|
||||
<category><![CDATA[scrollbar]]></category>
|
||||
<category><![CDATA[scrollbars]]></category>
|
||||
<category><![CDATA[size]]></category>
|
||||
<category><![CDATA[sizes]]></category>
|
||||
<category><![CDATA[width]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=878</guid>
|
||||
<description><![CDATA[How to make custom-sized scroll bars in Better ListView.]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_879" style="width: 319px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/03/blv-scroll-size.png"><img class="size-full wp-image-879" title="Better ListView custom scroll bar size" src="../../../wp-content/uploads/2013/03/blv-scroll-size.png" alt="Better ListView custom scroll bar size" width="309" height="208" /></a><p class="wp-caption-text">Better ListView custom scroll bar size</p></div>
|
||||
<p><a href="../../../../betterlistview.exe">Better ListView 3.7.0</a> contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:</p>
|
||||
<ul>
|
||||
<li><strong>HScrollBarWidth</strong></li>
|
||||
<li><strong>VScrollBarHeight</strong></li>
|
||||
</ul>
|
||||
<p>Of course, you can set these custom sizes in design-time as well as in run-time.</p>
|
||||
<p>Larger scroll bars are practical on modern touch-enabled devices with high resolution screens. The default scroll bar size (17 pixels) may be too small and you may want to make it just large enough for your index finger.</p>
|
||||
<p>This features works in both <a href="http://www.componentowl.com/better-listview">Better ListView</a> and <a href="http://www.componentowl.com/better-listview-express">Better ListView Express</a>.</p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/custom-scroll-bar-size-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>4</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>How to Make Items Fading on Edges in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/how-to-make-items-fading-on-edges-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/how-to-make-items-fading-on-edges-in-better-listview/#respond</comments>
|
||||
<pubDate>Tue, 05 Mar 2013 15:45:22 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[borders]]></category>
|
||||
<category><![CDATA[boundaries]]></category>
|
||||
<category><![CDATA[drawing]]></category>
|
||||
<category><![CDATA[drawn]]></category>
|
||||
<category><![CDATA[edge]]></category>
|
||||
<category><![CDATA[edges]]></category>
|
||||
<category><![CDATA[fading]]></category>
|
||||
<category><![CDATA[gradient]]></category>
|
||||
<category><![CDATA[items]]></category>
|
||||
<category><![CDATA[over]]></category>
|
||||
<category><![CDATA[owner]]></category>
|
||||
<category><![CDATA[ownerdrawing]]></category>
|
||||
<category><![CDATA[ownerdrawn]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=868</guid>
|
||||
<description><![CDATA[How to create the effect seen on smarphones when items are fading on control's edges with WinForms Better ListView.]]></description>
|
||||
<content:encoded><![CDATA[<p><img class="size-full wp-image-869 centered" title="Fading Edges in Better ListView" src="../../../wp-content/uploads/2013/03/blv-fading.png" alt="Fading Edges in Better ListView" width="140" height="148" /></p>
|
||||
<p>I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.</p>
|
||||
<p>You can obtain the same effect with Better ListView by overriding the <strong>DrawingRedrawCore</strong> method and do the drawing over the items:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
public class FadedListView : BetterListView<br />
|
||||
{<br />
|
||||
/// </p>
|
||||
<summary>
|
||||
/// Default size of the fading gradient.<br />
|
||||
/// </summary>
|
||||
<p> private const int FadingSize = 64;</p>
|
||||
<p> public CustomListView()<br />
|
||||
{<br />
|
||||
// this is required because we will draw outside item boundaries<br />
|
||||
OptimizedInvalidation = false;<br />
|
||||
}</p>
|
||||
<p> protected override void DrawingRedrawCore(Graphics graphics)<br />
|
||||
{<br />
|
||||
base.DrawingRedrawCore(graphics);</p>
|
||||
<p> // get boundaries of items (this excludes column headers and scroll bars)<br />
|
||||
Rectangle rectContent = BoundsContent;</p>
|
||||
<p> // get size of the gradient<br />
|
||||
int fadingSize = Math.Min(<br />
|
||||
FadingSize,<br />
|
||||
rectContent.Height >> 1);</p>
|
||||
<p> // get boundaries of the gradents<br />
|
||||
Rectangle rectFadingTop = new Rectangle(<br />
|
||||
rectContent.Left,<br />
|
||||
rectContent.Top,<br />
|
||||
rectContent.Width,<br />
|
||||
fadingSize);</p>
|
||||
<p> Rectangle rectFadingBottom = new Rectangle(<br />
|
||||
rectContent.Left,<br />
|
||||
rectContent.Bottom – fadingSize,<br />
|
||||
rectContent.Width,<br />
|
||||
fadingSize);</p>
|
||||
<p> // make boundaries larger to avoid rounding errors in gradient brushes<br />
|
||||
rectFadingTop.Inflate(1, 1);<br />
|
||||
rectFadingBottom.Inflate(1, 1);</p>
|
||||
<p> Brush brushFadingTop = new LinearGradientBrush(rectFadingTop, BackColor, Color.Transparent, LinearGradientMode.Vertical);<br />
|
||||
Brush brushFadingBottom = new LinearGradientBrush(rectFadingBottom, Color.Transparent, SystemColors.Window, LinearGradientMode.Vertical);</p>
|
||||
<p> // deflate the gradient boundaries back<br />
|
||||
rectFadingTop.Inflate(-1, -1);<br />
|
||||
rectFadingBottom.Inflate(-1, -1);</p>
|
||||
<p> // draw the gradients<br />
|
||||
graphics.FillRectangle(brushFadingTop, rectFadingTop);<br />
|
||||
graphics.FillRectangle(brushFadingBottom, rectFadingBottom);</p>
|
||||
<p> // cleanup<br />
|
||||
brushFadingTop.Dispose();<br />
|
||||
brushFadingBottom.Dispose();<br />
|
||||
}<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Public Class CustomListView<br />
|
||||
Inherits BetterListView<br />
|
||||
”’ </p>
|
||||
<summary>
|
||||
”’ Default size of the fading gradient.<br />
|
||||
”’ </summary>
|
||||
<p> Private Const FadingSize As Integer = 64</p>
|
||||
<p> Public Sub New()<br />
|
||||
‘ this is required because we will draw outside item boundaries<br />
|
||||
OptimizedInvalidation = False<br />
|
||||
End Sub</p>
|
||||
<p> Protected Overrides Sub DrawingRedrawCore(graphics As Graphics)<br />
|
||||
MyBase.DrawingRedrawCore(graphics)</p>
|
||||
<p> ‘ get boundaries of items (this excludes column headers and scroll bars)<br />
|
||||
Dim rectContent As Rectangle = BoundsContent</p>
|
||||
<p> ‘ get size of the gradient<br />
|
||||
Dim fadingSize__1 As Integer = Math.Min(FadingSize, rectContent.Height >> 1)</p>
|
||||
<p> ‘ get boundaries of the gradents<br />
|
||||
Dim rectFadingTop As New Rectangle(rectContent.Left, rectContent.Top, rectContent.Width, fadingSize__1)</p>
|
||||
<p> Dim rectFadingBottom As New Rectangle(rectContent.Left, rectContent.Bottom – fadingSize__1, rectContent.Width, fadingSize__1)</p>
|
||||
<p> ‘ make boundaries larger to avoid rounding errors in gradient brushes<br />
|
||||
rectFadingTop.Inflate(1, 1)<br />
|
||||
rectFadingBottom.Inflate(1, 1)</p>
|
||||
<p> Dim brushFadingTop As Brush = New LinearGradientBrush(rectFadingTop, BackColor, Color.Transparent, LinearGradientMode.Vertical)<br />
|
||||
Dim brushFadingBottom As Brush = New LinearGradientBrush(rectFadingBottom, Color.Transparent, SystemColors.Window, LinearGradientMode.Vertical)</p>
|
||||
<p> ‘ deflate the gradient boundaries back<br />
|
||||
rectFadingTop.Inflate(-1, -1)<br />
|
||||
rectFadingBottom.Inflate(-1, -1)</p>
|
||||
<p> ‘ draw the gradients<br />
|
||||
graphics.FillRectangle(brushFadingTop, rectFadingTop)<br />
|
||||
graphics.FillRectangle(brushFadingBottom, rectFadingBottom)</p>
|
||||
<p> ‘ cleanup<br />
|
||||
brushFadingTop.Dispose()<br />
|
||||
brushFadingBottom.Dispose()<br />
|
||||
End Sub<br />
|
||||
End Class<br />
|
||||
[/vb]</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/how-to-make-items-fading-on-edges-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Hot Tracking Items in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/hot-tracking-items-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/hot-tracking-items-in-better-listview/#respond</comments>
|
||||
<pubDate>Fri, 15 Feb 2013 22:52:12 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[backcolor]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[color]]></category>
|
||||
<category><![CDATA[drawing]]></category>
|
||||
<category><![CDATA[drawn]]></category>
|
||||
<category><![CDATA[font]]></category>
|
||||
<category><![CDATA[hot]]></category>
|
||||
<category><![CDATA[hottrack]]></category>
|
||||
<category><![CDATA[hottracking]]></category>
|
||||
<category><![CDATA[hover]]></category>
|
||||
<category><![CDATA[hovers]]></category>
|
||||
<category><![CDATA[hyperlink]]></category>
|
||||
<category><![CDATA[hyperlinks]]></category>
|
||||
<category><![CDATA[item]]></category>
|
||||
<category><![CDATA[items]]></category>
|
||||
<category><![CDATA[links]]></category>
|
||||
<category><![CDATA[mouse]]></category>
|
||||
<category><![CDATA[owner]]></category>
|
||||
<category><![CDATA[ownerdraw]]></category>
|
||||
<category><![CDATA[tracking]]></category>
|
||||
<category><![CDATA[underline]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=861</guid>
|
||||
<description><![CDATA[Tutorial on how to easily make item hot tracking work in Better ListView.]]></description>
|
||||
<content:encoded><![CDATA[<div id="attachment_862" style="width: 206px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/02/hot-item-backcolor.gif"><img class="size-full wp-image-862" title="Hot Tracking" src="../../../wp-content/uploads/2013/02/hot-item-backcolor.gif" alt="Hot Tracking" width="196" height="128" /></a><p class="wp-caption-text">Hot Tracking</p></div>
|
||||
<p>This post will show you how easy it is to make item hot tracking in <a href="../../../../betterlistview.exe">Better ListView</a>.</p>
|
||||
<p>First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
private Font fontHot = new Font(“Segoe UI”, 12.0f, FontStyle.Bold);<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Private fontHot As New Font(“Segoe UI”, 12F, FontStyle.Bold)<br />
|
||||
[/vb]</p>
|
||||
<p>This is not necessary, but we will re-use the font and will not need to create and dispose Font instances during hot tracking.</p>
|
||||
<p>Second, initialize a <strong>BetterListView</strong> instance:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
var listView = new CustomListView();</p>
|
||||
<p>// add some items in the list<br />
|
||||
listView.Items.AddRange(new string[] { “The Hobbit”, “The People’s Crisis”, “The Net” });</p>
|
||||
<p>// set default font for the items<br />
|
||||
listView.FontItems = new Font(“Segoe UI”, 12.0f, FontStyle.Regular);</p>
|
||||
<p>// add HitTestChanged event handler<br />
|
||||
listView.HitTestChanged += ListViewHitTestChanged;<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Dim listView = New CustomListView()</p>
|
||||
<p>‘ add some items in the list<br />
|
||||
listView.Items.AddRange(New String() {“The Hobbit”, “The People’s Crisis”, “The Net”})</p>
|
||||
<p>‘ set default font for the items<br />
|
||||
listView.FontItems = New Font(“Segoe UI”, 12F, FontStyle.Regular)</p>
|
||||
<p>‘ add HitTestChanged event handler<br />
|
||||
listView.HitTestChanged += ListViewHitTestChanged<br />
|
||||
[/vb]</p>
|
||||
<p>Finally, implement the <strong>HitTestChanged</strong> event handler:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
private void ListViewHitTestChanged(object sender, BetterListViewHitTestChangedEventArgs eventArgs)<br />
|
||||
{<br />
|
||||
BetterListView listView = (sender as BetterListView);<br />
|
||||
BetterListViewItem itemCurrent = eventArgs.HitTestInfoCurrent.ItemDisplay;<br />
|
||||
BetterListViewItem itemNew = eventArgs.HitTestInfoNew.ItemDisplay;</p>
|
||||
<p> if (!ReferenceEquals(itemCurrent, itemNew))<br />
|
||||
{<br />
|
||||
listView.BeginUpdate();</p>
|
||||
<p> if (itemCurrent != null)<br />
|
||||
{<br />
|
||||
// reset colors and font to default<br />
|
||||
itemCurrent.BackColor = Color.Empty;<br />
|
||||
itemCurrent.ForeColor = Color.Empty;<br />
|
||||
itemCurrent.Font = null;<br />
|
||||
}</p>
|
||||
<p> if (itemNew != null)<br />
|
||||
{<br />
|
||||
// set hot background color of an item newly hovered<br />
|
||||
itemNew.BackColor = Color.GreenYellow;<br />
|
||||
itemNew.ForeColor = Color.DarkRed;<br />
|
||||
itemNew.Font = this.fontHot;<br />
|
||||
}</p>
|
||||
<p> listView.EndUpdate();<br />
|
||||
}<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Private Sub ListViewHitTestChanged(sender As Object, eventArgs As BetterListViewHitTestChangedEventArgs)<br />
|
||||
Dim listView As BetterListView = TryCast(sender, BetterListView)<br />
|
||||
Dim itemCurrent As BetterListViewItem = eventArgs.HitTestInfoCurrent.ItemDisplay<br />
|
||||
Dim itemNew As BetterListViewItem = eventArgs.HitTestInfoNew.ItemDisplay</p>
|
||||
<p> If Not ReferenceEquals(itemCurrent, itemNew) Then<br />
|
||||
listView.BeginUpdate()</p>
|
||||
<p> If itemCurrent IsNot Nothing Then<br />
|
||||
‘ reset colors and font to default<br />
|
||||
itemCurrent.BackColor = Color.Empty<br />
|
||||
itemCurrent.ForeColor = Color.Empty<br />
|
||||
itemCurrent.Font = Nothing<br />
|
||||
End If</p>
|
||||
<p> If itemNew IsNot Nothing Then<br />
|
||||
‘ set hot background color of an item newly hovered<br />
|
||||
itemNew.BackColor = Color.GreenYellow<br />
|
||||
itemNew.ForeColor = Color.DarkRed<br />
|
||||
itemNew.Font = Me.fontHot<br />
|
||||
End If</p>
|
||||
<p> listView.EndUpdate()<br />
|
||||
End If<br />
|
||||
End Sub<br />
|
||||
[/vb]</p>
|
||||
<p>This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.</p>
|
||||
<p><strong>Thats’ it!</strong></p>
|
||||
<p>Of course, you can change any of the properties during hot tracking or make use of rich <a href="../../../wp-content/uploads/2013/02/chapter-owner-draw.html">Owner Drawing</a> capabilities.</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/hot-tracking-items-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Binding Images in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/binding-images-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/binding-images-in-better-listview/#respond</comments>
|
||||
<pubDate>Mon, 28 Jan 2013 03:54:22 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Components]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[bind]]></category>
|
||||
<category><![CDATA[binding]]></category>
|
||||
<category><![CDATA[bound]]></category>
|
||||
<category><![CDATA[data]]></category>
|
||||
<category><![CDATA[databinding]]></category>
|
||||
<category><![CDATA[databound]]></category>
|
||||
<category><![CDATA[icon]]></category>
|
||||
<category><![CDATA[icons]]></category>
|
||||
<category><![CDATA[imagekey]]></category>
|
||||
<category><![CDATA[imagelist]]></category>
|
||||
<category><![CDATA[images]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=850</guid>
|
||||
<description><![CDATA[How to use images instead of textual data in Better ListView data binding.]]></description>
|
||||
<content:encoded><![CDATA[<p><a href="../../../../betterlistview.exe">Better ListView 3.5</a> have improved data binding functionality. You can adjust how the data rows will be converted to items/sub-items and vice versa. For example, you can show images based on the bound data:</p>
|
||||
<div id="attachment_853" style="width: 270px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/screen-blv-binding3.png"><img class="size-full wp-image-853" title="Better ListView with bound list" src="../../../wp-content/uploads/2013/01/screen-blv-binding3.png" alt="Better ListView with bound list" width="260" height="222" /></a><p class="wp-caption-text">Better ListView with bound list</p></div>
|
||||
<p>Say you have a simple <strong>Server</strong> type:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
public class Server<br />
|
||||
{<br />
|
||||
public string ServerName<br />
|
||||
{<br />
|
||||
get;<br />
|
||||
set;<br />
|
||||
}</p>
|
||||
<p> public int ServerStatus<br />
|
||||
{<br />
|
||||
get;<br />
|
||||
set;<br />
|
||||
}</p>
|
||||
<p> public Server(string name, int status)<br />
|
||||
{<br />
|
||||
ServerName = name;<br />
|
||||
ServerStatus = status;<br />
|
||||
}<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Public Class Server</p>
|
||||
<p> Public Property ServerName() As String<br />
|
||||
Get<br />
|
||||
Return m_ServerName<br />
|
||||
End Get<br />
|
||||
Set<br />
|
||||
m_ServerName = Value<br />
|
||||
End Set<br />
|
||||
End Property</p>
|
||||
<p> Public Property ServerStatus() As Integer<br />
|
||||
Get<br />
|
||||
Return m_ServerStatus<br />
|
||||
End Get<br />
|
||||
Set<br />
|
||||
m_ServerStatus = Value<br />
|
||||
End Set<br />
|
||||
End Property</p>
|
||||
<p> Private m_ServerName As String<br />
|
||||
Private m_ServerStatus As Integer</p>
|
||||
<p> Public Sub New(name As String, status As Integer)<br />
|
||||
ServerName = name<br />
|
||||
ServerStatus = status<br />
|
||||
End Sub</p>
|
||||
<p>End Class<br />
|
||||
[/vb]</p>
|
||||
<p>This class contains two properties representing server name and its status. The server name is a textual property and one would like this mapped to item label as usual. However, the server status is a numerical value which have no meaning to the user even when converted to string. In fact, the numerical value can be 0 (<em>offline</em>), 1 (<em>idle</em>) or 2 (<em>running</em>). You may like to display color icons instead of plain strings or numbers. What if we would like to even highlight some items or change other properties during data binding? This is possible through Better ListView data binding customization.</p>
|
||||
<p>First, let’s create a list of <strong>Server</strong> objects and bind this to a Better ListView. We would like to have columns auto-generated, so we set <strong>DataBindColumns</strong> to <strong>true</strong>:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
Server[] servers = new[]<br />
|
||||
{<br />
|
||||
new Server(“Andromeda”, 2),<br />
|
||||
new Server(“Taurus”, 1),<br />
|
||||
new Server(“Himalia”, 2),<br />
|
||||
new Server(“Nanda”, 2),<br />
|
||||
new Server(“Elara”, 0),<br />
|
||||
new Server(“Perseus”, 2),<br />
|
||||
new Server(“Titan”, 1)<br />
|
||||
};</p>
|
||||
<p>ImageList imageList = new ImageList();</p>
|
||||
<p>imageList.ColorDepth = ColorDepth.Depth32Bit;<br />
|
||||
imageList.ImageSize = new Size(16, 16);<br />
|
||||
imageList.Images.AddStrip(Image.FromFile(“status.png”));</p>
|
||||
<p>BetterListView listView = new CustomListView();</p>
|
||||
<p>listView.DataBindColumns = true;<br />
|
||||
listView.DataSource = servers;<br />
|
||||
listView.ImageList = imageList;<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Dim servers As Server() = New () {New Server(“Andromeda”, 2), New Server(“Taurus”, 1), New Server(“Himalia”, 2), New Server(“Nanda”, 2), New Server(“Elara”, 0), New Server(“Perseus”, 2), _<br />
|
||||
New Server(“Titan”, 1)}</p>
|
||||
<p>Dim imageList As New ImageList()</p>
|
||||
<p>imageList.ColorDepth = ColorDepth.Depth32Bit<br />
|
||||
imageList.ImageSize = New Size(16, 16)<br />
|
||||
imageList.Images.AddStrip(Image.FromFile(“status.png”))</p>
|
||||
<p>Dim listView As BetterListView = New CustomListView()</p>
|
||||
<p>listView.DataBindColumns = True<br />
|
||||
listView.DataSource = servers<br />
|
||||
listView.ImageList = imageList<br />
|
||||
[/vb]</p>
|
||||
<p>Let’s take a look on the result:</p>
|
||||
<div id="attachment_851" style="width: 270px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/screen-blv-binding1.png"><img class="size-full wp-image-851" title="Better ListView with bound list" src="../../../wp-content/uploads/2013/01/screen-blv-binding1.png" alt="Better ListView with bound list" width="260" height="173" /></a><p class="wp-caption-text">Better ListView with bound list</p></div>
|
||||
<p> </p>
|
||||
<p>The columns were auto-generated and <strong>Server</strong> properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing <strong>DisplayNameAttribute</strong> on the respective properties:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
…</p>
|
||||
<p>[DisplayName(“Server Name”)]<br />
|
||||
public string ServerName<br />
|
||||
{<br />
|
||||
get;<br />
|
||||
set;<br />
|
||||
}</p>
|
||||
<p>[DisplayName(“Status”)]<br />
|
||||
public int ServerStatus<br />
|
||||
{<br />
|
||||
get;<br />
|
||||
set;<br />
|
||||
}</p>
|
||||
<p>…<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
…</p>
|
||||
<p><DisplayName("Server Name")> _<br />
|
||||
Public Property ServerName() As String<br />
|
||||
Get<br />
|
||||
Return m_ServerName<br />
|
||||
End Get<br />
|
||||
Set<br />
|
||||
m_ServerName = Value<br />
|
||||
End Set<br />
|
||||
End Property</p>
|
||||
<p><DisplayName("Status")> _<br />
|
||||
Public Property ServerStatus() As Integer<br />
|
||||
Get<br />
|
||||
Return m_ServerStatus<br />
|
||||
End Get<br />
|
||||
Set<br />
|
||||
m_ServerStatus = Value<br />
|
||||
End Set<br />
|
||||
End Property</p>
|
||||
<p>…<br />
|
||||
[/vb]</p>
|
||||
<p>Now the column names are more user friendly:</p>
|
||||
<div id="attachment_852" style="width: 270px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/screen-blv-binding2.png"><img class="size-full wp-image-852" title="Better ListView with bound list" src="../../../wp-content/uploads/2013/01/screen-blv-binding2.png" alt="Better ListView with bound list" width="260" height="173" /></a><p class="wp-caption-text">Better ListView with bound list</p></div>
|
||||
<p>We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override <strong>DataCreateItem</strong> method in a class derived from <strong>BetterListView</strong>:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
public class CustomListView : BetterListView<br />
|
||||
{<br />
|
||||
protected override BetterListViewItem DataCreateItem(<br />
|
||||
CurrencyManager currentDataManager,<br />
|
||||
BindingMemberInfo[] currentDisplayMembers,<br />
|
||||
int index)<br />
|
||||
{<br />
|
||||
// create item using the base implementation<br />
|
||||
BetterListViewItem item = base.DataCreateItem(<br />
|
||||
currentDataManager,<br />
|
||||
currentDisplayMembers,<br />
|
||||
index);</p>
|
||||
<p> // get server status from the current Server object<br />
|
||||
int serverStatus = ((Server)currentDataManager.List[index]).ServerStatus;</p>
|
||||
<p> if (serverStatus == 0)<br />
|
||||
{<br />
|
||||
// bold item when server status is 0<br />
|
||||
item.IsBold = true;<br />
|
||||
}</p>
|
||||
<p> // get sub-item corresponding to server status<br />
|
||||
BetterListViewSubItem subItemStatus = item.SubItems[1];</p>
|
||||
<p> subItemStatus.ImageIndex = serverStatus; // set image for the sub-item<br />
|
||||
subItemStatus.Text = “”; // clear sub-item text</p>
|
||||
<p> return item;<br />
|
||||
}<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Public Class CustomListView<br />
|
||||
Inherits BetterListView</p>
|
||||
<p> Protected Overrides Function DataCreateItem(currentDataManager As CurrencyManager, currentDisplayMembers As BindingMemberInfo(), index As Integer) As BetterListViewItem</p>
|
||||
<p> ‘ create item using the base implementation<br />
|
||||
Dim item As BetterListViewItem = MyBase.DataCreateItem(currentDataManager, currentDisplayMembers, index)</p>
|
||||
<p> ‘ get server status from the current Server object<br />
|
||||
Dim serverStatus As Integer = DirectCast(currentDataManager.List(index), Server).ServerStatus</p>
|
||||
<p> If serverStatus = 0 Then<br />
|
||||
‘ bold item when server status is 0<br />
|
||||
item.IsBold = True<br />
|
||||
End If</p>
|
||||
<p> ‘ get sub-item corresponding to server status<br />
|
||||
Dim subItemStatus As BetterListViewSubItem = item.SubItems(1)</p>
|
||||
<p> subItemStatus.ImageIndex = serverStatus<br />
|
||||
‘ set image for the sub-item<br />
|
||||
subItemStatus.Text = “”<br />
|
||||
‘ clear sub-item text<br />
|
||||
Return item</p>
|
||||
<p> End Function</p>
|
||||
<p>End Class<br />
|
||||
[/vb]</p>
|
||||
<p>Now the control displays adjusted images and a highlighted item:</p>
|
||||
<div id="attachment_853" style="width: 270px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/screen-blv-binding3.png"><img class="size-full wp-image-853" title="Better ListView with bound list" src="../../../wp-content/uploads/2013/01/screen-blv-binding3.png" alt="Better ListView with bound list" width="260" height="222" /></a><p class="wp-caption-text">Better ListView with bound list</p></div>
|
||||
<p>Note that you can customize data binding the other way as well by overriding the <strong>DataUpdateSubItemToSource</strong> method. This method is responsible for updating the bound data source when item/sub-item value have been modified.</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/binding-images-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>0</slash:comments>
|
||||
</item>
|
||||
<item>
|
||||
<title>Enabling Search Highlight in Better ListView</title>
|
||||
<link>http://www.componentowl.com/blog/enabling-search-highlight-in-better-listview/</link>
|
||||
<comments>http://www.componentowl.com/blog/enabling-search-highlight-in-better-listview/#comments</comments>
|
||||
<pubDate>Fri, 11 Jan 2013 02:00:17 +0000</pubDate>
|
||||
<dc:creator><![CDATA[Libor Tinka]]></dc:creator>
|
||||
<category><![CDATA[Better ListView]]></category>
|
||||
<category><![CDATA[Components]]></category>
|
||||
<category><![CDATA[Tutorials]]></category>
|
||||
<category><![CDATA[better]]></category>
|
||||
<category><![CDATA[better listview]]></category>
|
||||
<category><![CDATA[highlight]]></category>
|
||||
<category><![CDATA[highlighting]]></category>
|
||||
<category><![CDATA[items]]></category>
|
||||
<category><![CDATA[list]]></category>
|
||||
<category><![CDATA[listview]]></category>
|
||||
<category><![CDATA[mark]]></category>
|
||||
<category><![CDATA[matched]]></category>
|
||||
<category><![CDATA[search]]></category>
|
||||
<category><![CDATA[searching]]></category>
|
||||
|
||||
<guid isPermaLink="false">http://www.componentowl.com/blog/?p=843</guid>
|
||||
<description><![CDATA[How to use and customize Search Highlight feature in Better ListView.]]></description>
|
||||
<content:encoded><![CDATA[<p>We have improved <a href="../../../wp-content/uploads/2013/01/chapter-search.html">item searching</a> capabilities of <a href="http://www.componentowl.com/better-listview">Better ListView</a> by introducing <strong>Search Highlight</strong> feature. This feature automatically shows search matches and works out of the box with both searching by typing and searching from code (e.g. using search box):</p>
|
||||
<div id="attachment_844" style="width: 358px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/search-highlight-1.gif"><img class="size-full wp-image-844" title="Search Highlight Feature" src="../../../wp-content/uploads/2013/01/search-highlight-1.gif" alt="Search Highlight Feature" width="348" height="193" /></a><p class="wp-caption-text">Search Highlight Feature</p></div>
|
||||
<p> </p>
|
||||
<p>To enable the highlight, simply add <strong>UpdateSearchHighlight</strong> option in the search settings:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
listView.SearchSettings = new BetterListViewSearchSettings(<br />
|
||||
listView.SearchSettings.Mode,<br />
|
||||
listView.SearchSettings.Options | BetterListViewSearchOptions.UpdateSearchHighlight,<br />
|
||||
listView.SearchSettings.SubItemIndices);<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
ListView.SearchSettings = New BetterListViewSearchSettings(<br />
|
||||
listView.SearchSettings.Mode,<br />
|
||||
listView.SearchSettings.Options Or BetterListViewSearchOptions.UpdateSearchHighlight,<br />
|
||||
listView.SearchSettings.SubItemIndices)<br />
|
||||
[/vb]</p>
|
||||
<p>Every item contains information about the match in the <strong>BetterListViewItem.SearchHighlight</strong> property. When <strong>BetterListViewItem.SearchHighlight.IsEmpty</strong> is <strong>true</strong>, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.</p>
|
||||
<p>Highlight colors can be adjusted by three properties: <strong>ColorSearchHighlight</strong>, <strong>ColorSearchHighlightBorder</strong> and <strong>ColorSearchHighlightText</strong>:</p>
|
||||
<div id="attachment_846" style="width: 337px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/properties.png"><img class="size-full wp-image-846" title="Search Highlight Properties" src="../../../wp-content/uploads/2013/01/properties.png" alt="Search Highlight Properties" width="327" height="352" /></a><p class="wp-caption-text">Search Highlight Properties</p></div>
|
||||
<p>The display can be adjusted even further with owner drawing:</p>
|
||||
<div id="attachment_845" style="width: 358px" class="wp-caption aligncenter"><a href="../../../wp-content/uploads/2013/01/search-highlight-2.gif"><img class="size-full wp-image-845" title="Customized Search Highlight Feature" src="../../../wp-content/uploads/2013/01/search-highlight-2.gif" alt="Customized Search Highlight Feature" width="348" height="193" /></a><p class="wp-caption-text">Customized Search Highlight Feature</p></div>
|
||||
<p>Here we have used ellipses drawn on item background by modifying <strong>OnDrawItem</strong> and <strong>OnDrawItemBackground</strong> methods of <strong>BetterListView</strong>:</p>
|
||||
<p><strong>C#</strong></p>
|
||||
<p>[csharp gutter=”false” toolbar=”false”]<br />
|
||||
using System.Drawing;<br />
|
||||
using System.Drawing.Drawing2D;</p>
|
||||
<p>using BetterListView;</p>
|
||||
<p>internal sealed class CustomListView : BetterListView<br />
|
||||
{<br />
|
||||
protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)<br />
|
||||
{<br />
|
||||
// do not draw search highlight because we will draw our own<br />
|
||||
eventArgs.DrawSearchHighlight = false;</p>
|
||||
<p> base.OnDrawItem(eventArgs);<br />
|
||||
}</p>
|
||||
<p> protected override void OnDrawItemBackground(BetterListViewDrawItemBackgroundEventArgs eventArgs)<br />
|
||||
{<br />
|
||||
base.OnDrawItemBackground(eventArgs);</p>
|
||||
<p> // draw custom search highlight on item background<br />
|
||||
BetterListViewSearchHighlight searchHighlight = eventArgs.Item.SearchHighlight;</p>
|
||||
<p> if (searchHighlight.IsEmpty == false)<br />
|
||||
{<br />
|
||||
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality;</p>
|
||||
<p> Rectangle rectHighlight = eventArgs.ItemBounds.SubItemBounds[searchHighlight.ColumnIndex].BoundsSearchHighlight;</p>
|
||||
<p> Brush brushHighlight = new SolidBrush(Color.FromArgb(128, Color.MediumPurple));<br />
|
||||
Pen penHighlight = new Pen(Color.Purple, 1.0f);</p>
|
||||
<p> eventArgs.Graphics.FillEllipse(brushHighlight, rectHighlight);<br />
|
||||
eventArgs.Graphics.DrawEllipse(penHighlight, rectHighlight);</p>
|
||||
<p> brushHighlight.Dispose();<br />
|
||||
penHighlight.Dispose();<br />
|
||||
}<br />
|
||||
}<br />
|
||||
}<br />
|
||||
[/csharp]</p>
|
||||
<p><strong>Visual Basic</strong></p>
|
||||
<p>[vb gutter=”false” toolbar=”false”]<br />
|
||||
Imports System.Drawing<br />
|
||||
Imports System.Drawing.Drawing2D</p>
|
||||
<p>Imports BetterListView</p>
|
||||
<p>Friend NotInheritable Class CustomListView<br />
|
||||
Inherits BetterListView<br />
|
||||
Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)<br />
|
||||
‘ do not draw search highlight because we will draw our own<br />
|
||||
eventArgs.DrawSearchHighlight = False</p>
|
||||
<p> MyBase.OnDrawItem(eventArgs)<br />
|
||||
End Sub</p>
|
||||
<p> Protected Overrides Sub OnDrawItemBackground(eventArgs As BetterListViewDrawItemBackgroundEventArgs)<br />
|
||||
MyBase.OnDrawItemBackground(eventArgs)</p>
|
||||
<p> ‘ draw custom search highlight on item background<br />
|
||||
Dim searchHighlight As BetterListViewSearchHighlight = eventArgs.Item.SearchHighlight</p>
|
||||
<p> If searchHighlight.IsEmpty = False Then<br />
|
||||
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality</p>
|
||||
<p> Dim rectHighlight As Rectangle = eventArgs.ItemBounds.SubItemBounds(searchHighlight.ColumnIndex).BoundsSearchHighlight</p>
|
||||
<p> Dim brushHighlight As Brush = New SolidBrush(Color.FromArgb(128, Color.MediumPurple))<br />
|
||||
Dim penHighlight As New Pen(Color.Purple, 1F)</p>
|
||||
<p> eventArgs.Graphics.FillEllipse(brushHighlight, rectHighlight)<br />
|
||||
eventArgs.Graphics.DrawEllipse(penHighlight, rectHighlight)</p>
|
||||
<p> brushHighlight.Dispose()<br />
|
||||
penHighlight.Dispose()<br />
|
||||
End If<br />
|
||||
End Sub<br />
|
||||
End Class<br />
|
||||
[/vb]</p>
|
||||
]]></content:encoded>
|
||||
<wfw:commentRss>http://www.componentowl.com/blog/enabling-search-highlight-in-better-listview/feed/</wfw:commentRss>
|
||||
<slash:comments>1</slash:comments>
|
||||
</item>
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
<!--
|
||||
Performance optimized by W3 Total Cache. Learn more: https://www.w3-edge.com/products/
|
||||
|
||||
Content Delivery Network via Amazon Web Services: S3: www.componentowl.com
|
||||
|
||||
Served from: www.componentowl.com @ 2018-09-08 11:38:25 by W3 Total Cache
|
||||
-->
|
||||
Reference in New Issue
Block a user