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.

You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:

C#

[csharp gutter=”false” toolbar=”false”]
public class FadedListView : BetterListView
{
///

private const int FadingSize = 64;

public CustomListView()
{
// this is required because we will draw outside item boundaries
OptimizedInvalidation = false;
}

protected override void DrawingRedrawCore(Graphics graphics)
{
base.DrawingRedrawCore(graphics);

// get boundaries of items (this excludes column headers and scroll bars)
Rectangle rectContent = BoundsContent;

// get size of the gradient
int fadingSize = Math.Min(
FadingSize,
rectContent.Height >> 1);

// get boundaries of the gradents
Rectangle rectFadingTop = new Rectangle(
rectContent.Left,
rectContent.Top,
rectContent.Width,
fadingSize);

Rectangle rectFadingBottom = new Rectangle(
rectContent.Left,
rectContent.Bottom – fadingSize,
rectContent.Width,
fadingSize);

// make boundaries larger to avoid rounding errors in gradient brushes
rectFadingTop.Inflate(1, 1);
rectFadingBottom.Inflate(1, 1);

Brush brushFadingTop = new LinearGradientBrush(rectFadingTop, BackColor, Color.Transparent, LinearGradientMode.Vertical);
Brush brushFadingBottom = new LinearGradientBrush(rectFadingBottom, Color.Transparent, SystemColors.Window, LinearGradientMode.Vertical);

// deflate the gradient boundaries back
rectFadingTop.Inflate(-1, -1);
rectFadingBottom.Inflate(-1, -1);

// draw the gradients
graphics.FillRectangle(brushFadingTop, rectFadingTop);
graphics.FillRectangle(brushFadingBottom, rectFadingBottom);

// cleanup
brushFadingTop.Dispose();
brushFadingBottom.Dispose();
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Public Class CustomListView
Inherits BetterListView
”’

Private Const FadingSize As Integer = 64

Public Sub New()
‘ this is required because we will draw outside item boundaries
OptimizedInvalidation = False
End Sub

Protected Overrides Sub DrawingRedrawCore(graphics As Graphics)
MyBase.DrawingRedrawCore(graphics)

‘ get boundaries of items (this excludes column headers and scroll bars)
Dim rectContent As Rectangle = BoundsContent

‘ get size of the gradient
Dim fadingSize__1 As Integer = Math.Min(FadingSize, rectContent.Height >> 1)

‘ get boundaries of the gradents
Dim rectFadingTop As New Rectangle(rectContent.Left, rectContent.Top, rectContent.Width, fadingSize__1)

Dim rectFadingBottom As New Rectangle(rectContent.Left, rectContent.Bottom – fadingSize__1, rectContent.Width, fadingSize__1)

‘ make boundaries larger to avoid rounding errors in gradient brushes
rectFadingTop.Inflate(1, 1)
rectFadingBottom.Inflate(1, 1)

Dim brushFadingTop As Brush = New LinearGradientBrush(rectFadingTop, BackColor, Color.Transparent, LinearGradientMode.Vertical)
Dim brushFadingBottom As Brush = New LinearGradientBrush(rectFadingBottom, Color.Transparent, SystemColors.Window, LinearGradientMode.Vertical)

‘ deflate the gradient boundaries back
rectFadingTop.Inflate(-1, -1)
rectFadingBottom.Inflate(-1, -1)

‘ draw the gradients
graphics.FillRectangle(brushFadingTop, rectFadingTop)
graphics.FillRectangle(brushFadingBottom, rectFadingBottom)

‘ cleanup
brushFadingTop.Dispose()
brushFadingBottom.Dispose()
End Sub
End Class
[/vb]

Hot Tracking

This post will show you how easy it is to make item hot tracking in Better ListView.

First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:

C#

[csharp gutter=”false” toolbar=”false”]
private Font fontHot = new Font(“Segoe UI”, 12.0f, FontStyle.Bold);
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Private fontHot As New Font(“Segoe UI”, 12F, FontStyle.Bold)
[/vb]

This is not necessary, but we will re-use the font and will not need to create and dispose Font instances during hot tracking.

Second, initialize a BetterListView instance:

C#

[csharp gutter=”false” toolbar=”false”]
var listView = new CustomListView();

// add some items in the list
listView.Items.AddRange(new string[] { “The Hobbit”, “The People’s Crisis”, “The Net” });

// set default font for the items
listView.FontItems = new Font(“Segoe UI”, 12.0f, FontStyle.Regular);

// add HitTestChanged event handler
listView.HitTestChanged += ListViewHitTestChanged;
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Dim listView = New CustomListView()

‘ add some items in the list
listView.Items.AddRange(New String() {“The Hobbit”, “The People’s Crisis”, “The Net”})

‘ set default font for the items
listView.FontItems = New Font(“Segoe UI”, 12F, FontStyle.Regular)

‘ add HitTestChanged event handler
listView.HitTestChanged += ListViewHitTestChanged
[/vb]

Finally, implement the HitTestChanged event handler:

C#

[csharp gutter=”false” toolbar=”false”]
private void ListViewHitTestChanged(object sender, BetterListViewHitTestChangedEventArgs eventArgs)
{
BetterListView listView = (sender as BetterListView);
BetterListViewItem itemCurrent = eventArgs.HitTestInfoCurrent.ItemDisplay;
BetterListViewItem itemNew = eventArgs.HitTestInfoNew.ItemDisplay;

if (!ReferenceEquals(itemCurrent, itemNew))
{
listView.BeginUpdate();

if (itemCurrent != null)
{
// reset colors and font to default
itemCurrent.BackColor = Color.Empty;
itemCurrent.ForeColor = Color.Empty;
itemCurrent.Font = null;
}

if (itemNew != null)
{
// set hot background color of an item newly hovered
itemNew.BackColor = Color.GreenYellow;
itemNew.ForeColor = Color.DarkRed;
itemNew.Font = this.fontHot;
}

listView.EndUpdate();
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Private Sub ListViewHitTestChanged(sender As Object, eventArgs As BetterListViewHitTestChangedEventArgs)
Dim listView As BetterListView = TryCast(sender, BetterListView)
Dim itemCurrent As BetterListViewItem = eventArgs.HitTestInfoCurrent.ItemDisplay
Dim itemNew As BetterListViewItem = eventArgs.HitTestInfoNew.ItemDisplay

If Not ReferenceEquals(itemCurrent, itemNew) Then
listView.BeginUpdate()

If itemCurrent IsNot Nothing Then
‘ reset colors and font to default
itemCurrent.BackColor = Color.Empty
itemCurrent.ForeColor = Color.Empty
itemCurrent.Font = Nothing
End If

If itemNew IsNot Nothing Then
‘ set hot background color of an item newly hovered
itemNew.BackColor = Color.GreenYellow
itemNew.ForeColor = Color.DarkRed
itemNew.Font = Me.fontHot
End If

listView.EndUpdate()
End If
End Sub
[/vb]

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.

Thats’ it!

Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.

Search Highlight Feature

To enable the highlight, simply add UpdateSearchHighlight option in the search settings:

C#

[csharp gutter=”false” toolbar=”false”]
listView.SearchSettings = new BetterListViewSearchSettings(
listView.SearchSettings.Mode,
listView.SearchSettings.Options | BetterListViewSearchOptions.UpdateSearchHighlight,
listView.SearchSettings.SubItemIndices);
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
ListView.SearchSettings = New BetterListViewSearchSettings(
listView.SearchSettings.Mode,
listView.SearchSettings.Options Or BetterListViewSearchOptions.UpdateSearchHighlight,
listView.SearchSettings.SubItemIndices)
[/vb]

Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.

Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:

Search Highlight Properties

The display can be adjusted even further with owner drawing:

Customized Search Highlight Feature

Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:

C#

[csharp gutter=”false” toolbar=”false”]
using System.Drawing;
using System.Drawing.Drawing2D;

using BetterListView;

internal sealed class CustomListView : BetterListView
{
protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)
{
// do not draw search highlight because we will draw our own
eventArgs.DrawSearchHighlight = false;

base.OnDrawItem(eventArgs);
}

protected override void OnDrawItemBackground(BetterListViewDrawItemBackgroundEventArgs eventArgs)
{
base.OnDrawItemBackground(eventArgs);

// draw custom search highlight on item background
BetterListViewSearchHighlight searchHighlight = eventArgs.Item.SearchHighlight;

if (searchHighlight.IsEmpty == false)
{
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality;

Rectangle rectHighlight = eventArgs.ItemBounds.SubItemBounds[searchHighlight.ColumnIndex].BoundsSearchHighlight;

Brush brushHighlight = new SolidBrush(Color.FromArgb(128, Color.MediumPurple));
Pen penHighlight = new Pen(Color.Purple, 1.0f);

eventArgs.Graphics.FillEllipse(brushHighlight, rectHighlight);
eventArgs.Graphics.DrawEllipse(penHighlight, rectHighlight);

brushHighlight.Dispose();
penHighlight.Dispose();
}
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Imports System.Drawing
Imports System.Drawing.Drawing2D

Imports BetterListView

Friend NotInheritable Class CustomListView
Inherits BetterListView
Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)
‘ do not draw search highlight because we will draw our own
eventArgs.DrawSearchHighlight = False

MyBase.OnDrawItem(eventArgs)
End Sub

Protected Overrides Sub OnDrawItemBackground(eventArgs As BetterListViewDrawItemBackgroundEventArgs)
MyBase.OnDrawItemBackground(eventArgs)

‘ draw custom search highlight on item background
Dim searchHighlight As BetterListViewSearchHighlight = eventArgs.Item.SearchHighlight

If searchHighlight.IsEmpty = False Then
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality

Dim rectHighlight As Rectangle = eventArgs.ItemBounds.SubItemBounds(searchHighlight.ColumnIndex).BoundsSearchHighlight

Dim brushHighlight As Brush = New SolidBrush(Color.FromArgb(128, Color.MediumPurple))
Dim penHighlight As New Pen(Color.Purple, 1F)

eventArgs.Graphics.FillEllipse(brushHighlight, rectHighlight)
eventArgs.Graphics.DrawEllipse(penHighlight, rectHighlight)

brushHighlight.Dispose()
penHighlight.Dispose()
End If
End Sub
End Class
[/vb]

Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.

The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:

C#

[csharp gutter=”false” toolbar=”false”]
betterListView.LabelEdit = true;

betterListView.BeforeLabelEdit += BetterListViewBeforeLabelEdit;
betterListView.AfterLabelEditCancel += BetterListViewAfterLabelEditCancel;

…

void BetterListViewBeforeLabelEdit(object sender, BetterListViewLabelEditCancelEventArgs eventArgs)
{
string labelOriginal = eventArgs.Label;

// keep only file name in the modified label
string labelNew = Path.GetFileNameWithoutExtension(labelOriginal);

eventArgs.Label = labelNew;
}

void BetterListViewAfterLabelEditCancel(object sender, BetterListViewLabelEditCancelEventArgs eventArgs)
{
string labelOriginal = eventArgs.Label;

// add extension when editing is complete
string labelNew = String.Concat(
labelOriginal,
Path.GetExtension(eventArgs.SubItem.Text));

eventArgs.Label = labelNew;
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
BetterListView.LabelEdit = True

AddHandler Me.betterListView.BeforeLabelEdit, AddressOf BetterListViewBeforeLabelEdit
AddHandler Me.betterListView.AfterLabelEditCancel, AddressOf BetterListViewAfterLabelEditCancel

…

Private Sub BetterListViewBeforeLabelEdit(sender As Object, eventArgs As BetterListViewLabelEditCancelEventArgs)
Dim labelOriginal As String = eventArgs.Label

‘ keep only file name in the modified label
Dim labelNew As String = Path.GetFileNameWithoutExtension(labelOriginal)

eventArgs.Label = labelNew
End Sub

Private Sub BetterListViewAfterLabelEditCancel(sender As Object, eventArgs As BetterListViewLabelEditCancelEventArgs)
Dim labelOriginal As String = eventArgs.Label

‘ add extension when editing is complete
Dim labelNew As String = [String].Concat(labelOriginal, Path.GetExtension(eventArgs.SubItem.Text))

eventArgs.Label = labelNew
End Sub
[/vb]

Naturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.

Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.

Customized item selection.

By default, Better ListView uses system theme for drawing selections.

To draw custom selection, you can use owner drawing capabilities of Better ListView:

C#

[csharp gutter=”false” toolbar=”false”]
class CustomListView : BetterListView
{
protected override void OnDrawItemBackground(BetterListViewDrawItemBackgroundEventArgs eventArgs)
{
base.OnDrawItemBackground(eventArgs);

if (eventArgs.Item.Selected)
{
Brush brushSelection = new SolidBrush(Color.FromArgb(128, Color.LightGreen));
eventArgs.Graphics.FillRectangle(brushSelection, eventArgs.ItemBounds.BoundsSelection);
brushSelection.Dispose();
}
}

protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)
{
eventArgs.DrawSelection = false;

base.OnDrawItem(eventArgs);

if (eventArgs.Item.Selected)
{
eventArgs.Graphics.DrawRectangle(Pens.DarkGreen, eventArgs.ItemBounds.BoundsSelection);
}
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Class CustomListView
Inherits BetterListView
Protected Overrides Sub OnDrawItemBackground(eventArgs As BetterListViewDrawItemBackgroundEventArgs)
MyBase.OnDrawItemBackground(eventArgs)

If eventArgs.Item.Selected Then
Dim brushSelection As Brush = New SolidBrush(Color.FromArgb(128, Color.LightGreen))
eventArgs.Graphics.FillRectangle(brushSelection, eventArgs.ItemBounds.BoundsSelection)
brushSelection.Dispose()
End If
End Sub

Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)
eventArgs.DrawSelection = False

MyBase.OnDrawItem(eventArgs)

If eventArgs.Item.Selected Then
eventArgs.Graphics.DrawRectangle(Pens.DarkGreen, eventArgs.ItemBounds.BoundsSelection)
End If
End Sub
End Class
[/vb]

In the above code, we have created class CustomListView that inherits from BetterListView. We override OnDrawItemBackground and OnDrawItem methods to customize item background and item foreground drawing, respectively.

The OnDrawItemBackground method contains only check for whether the item is selected. If so, we draw selection background (filled rectangle in selection area).

The OnDrawItem method contains two things:

1. Turn off  default selection.
2. Draw custom selection border if the item is selected.

Drawbacks of drawing custom selections like this include using non-system theme, which can look ugly on various color schemes. By default, Better ListView always use the system theme, so the color consistency is ensured. You can, however, still use classes like SystemColors or SystemBrushes to ensure good look.

Another drawback is that you handle only two states of selection, i.e. selected and unselected state. This is sufficient for Classic Windows theme but there are several more states used on Windows Aero Theme, like “hot”, “focused and hot” or “hot and pressed”.

To allow these states, considerable coding need to be done.

In case you need this level of customization, please contact us for Custom Coding support.

Hiding Column Headers

To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:

• None – column headers are hidden, but corresponding sub-items are still visible
• Nonclickable – column headers are visible, but not interactive
• Clickable – column headers interact with mouse (have hot and pressed state)
• Sortable – column headers are clickable and sort the corresponding column when clicked
• Unsortable – same as Sortable, but the column headers have unsorted state as well
• Hidden – column headers are hidden with corresponding sub-items

These styles can be set on individual column headers as well through BetterListViewColumnHeader.Style property. This property is of type BetterListViewColumnHeaderStyle, which has the same values as BetterListViewHeaderStyle, plus Default value, which means that column header style is inherited from the HeaderStyle property.

When a single column header have style None, that column header is not drawn (only its background is visible) and corresponding sub-items are visible.

When all column headers have style None,  the whole panel with column headers hides (as seen on the above animation) and the sub-items remain visible. This effect is the as when all column headers have style Default and HeaderStyle is set to None.

Better ListView already supports saving and loading its content using SaveContent and LoadContent methods. These methods support either XML or binary format.

I chose binary format for storing data in string  because it is more compact than XML. Binary representation (basically an array of bytes) can be converted to Base64 string. Loading the content from string work similarly, the steps are performed in opposite direction:

C#

[csharp gutter=”false” toolbar=”false”]
// SAVE
// create MemoryStream to hold binary data
MemoryStream stream = new MemoryStream();
// store Better ListView content in memory stream
this.listView.SaveContentBinary(stream);
// copy content of MemoryStream to byte array
byte[] contentBinary = new byte[stream.Length];
stream.Seek(0, SeekOrigin.Begin);
// convert byte array to Base64 string
stream.Read(contentBinary, 0, (int)stream.Length); // move to beginning of the stream
string contentStringBase64 = Convert.ToBase64String(contentBinary);
// close stream
stream.Close();
stream.Dispose();

// CLEAR
this.listView.Clear();

// LOAD
// create MemoryStream to hold binary data
stream = new MemoryStream();
// convert Base64 string to byte array
contentBinary = Convert.FromBase64String(contentStringBase64);
// write byte array to stream
stream.Write(contentBinary, 0, contentBinary.Length);
stream.Seek(0, SeekOrigin.Begin); // move to beginning of the stream
// load content of Better ListView from memory stream
this.listView.LoadContentBinary(stream);
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
‘ SAVE
‘ create MemoryStream to hold binary data
Dim stream As New MemoryStream()
‘ store Better ListView content in memory stream
Me.listView.SaveContentBinary(stream)
‘ copy content of MemoryStream to byte array
Dim contentBinary As Byte() = New Byte(stream.Length – 1) {}
stream.Seek(0, SeekOrigin.Begin)
‘ convert byte array to Base64 string
stream.Read(contentBinary, 0, CInt(stream.Length))
‘ move to beginning of the stream
Dim contentStringBase64 As String = Convert.ToBase64String(contentBinary)
‘ close stream
stream.Close()
stream.Dispose()

‘ CLEAR
Me.listView.Clear()

‘ LOAD
‘ create MemoryStream to hold binary data
stream = New MemoryStream()
‘ convert Base64 string to byte array
contentBinary = Convert.FromBase64String(contentStringBase64)
‘ write byte array to stream
stream.Write(contentBinary, 0, contentBinary.Length)
stream.Seek(0, SeekOrigin.Begin)
‘ move to beginning of the stream
‘ load content of Better ListView from memory stream
Me.listView.LoadContentBinary(stream)
[/vb]

Although saving and loading data this way is convenient, please consider the following drawback:

• Standard serialization mechanism of .NET is used for converting classes and structures to XML or binary representation – hence the serialized data may not be possible to deserialize on different version of Better ListView if any public members of the serialized class have been changed.
• The generated string is very long (few kilobytes for just two items).
• Lots of data are stored which are not related to content itself (e.g. item colors).
• The serialized representation is considered read-only – any changes can cause problems with deserialization; if you really want flexible way of storing ListView content, consider building a model or data layer that supports storing the data you need the way you need.

On the other hand, using this way may be convenient when you want to transfer or copy ListView content between controls on even across application domain (Better ListView itself uses this mechanism to allow Drag and Drop between two applications – this “tour de force” kind of Drag and Drop is not avaiable in regular .NET ListView).

Items with custom height

Items with variable heights were possible in recent versions of Better ListView as well, but this adjustment was limited to heights which are multiples of text line height.

We have introduced a BetterListViewItem.CustomHeight property, which is 0 by default.

Every item has some minimum size (defined by the font and image) but it can get arbitrarily larger. The following formula explains how item height is measured in Better ListView:

height = max(minimum height, image height, text height, custom height)

Setting minimum height for all items is possible through layout properties and the latter is defined by the item itself.

Custom Spacing between Items

This property has been recently available in other views, but Details view was exception since its selections needed to be treated in different way: They overlap by 1 pixel so that the double border is avoided in neighboring selections:

1 px overlap of items

We have resolved this to get proper behavior with custom spacings and now the spacing can be set the same way as in any other view:

Simply set LayoutItemsCurrent.ElementOuterPadding to have custom horizontal and vertical padding between items.

You can set this specifically for Details view by refering to property LayoutItemsDetails or LayoutItemsDetailsColumns (Details view with columns).

Making items invisible

The above image shows two groups of items. The first groups uses hiding of items with the Visible property, while the second group simply turns off drawing of ceratin items.

The first approach is useful when you need to hide item as if it is removed, but keep it actually within Items collection.

The second approach need to create new control inheriting from BetterListView, overrride the OnDrawItem method and set properties like BetterListViewDrawItemEventArgs.DrawImage to false or simply not call the base implementation of OnDrawItem.

The second (owner drawing) approach is useful when you need just to switch off display of item without changing the item layout.