Alternating Rows

Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.

Simply add DrawItemBackground event handler and fill background on odd/even items:

[csharp gutter=”false” toolbar=”false”]
private void ListViewOnDrawItemBackground(object sender, BetterListViewDrawItemBackgroundEventArgs eventArgs)
{
if ((eventArgs.Item.Index & 1) == 1)
{
eventArgs.Graphics.FillRectangle(Brushes.AliceBlue, eventArgs.ItemBounds.BoundsOuter);
}
}
[/csharp]

Search Filtering with highlight

There are few ways of making searching in large list of items more convenient. For example, Better ListView provides Search Highlighting and Item Hiding 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.

The implementation is very simple and involves handling just two events: ItemSearch (raised whenever item is searched, e.g. using keyboard ) and KeyDown:

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

listView.Items.AddRange(new[] { “apple”, “pear”, “pineapple”, “orange”, “grapefruit”, “cherry”, “avocado” });

listView.ItemSearch += listView_ItemSearch;
listView.KeyDown += listView_KeyDown;
[/csharp]

The ItemSearch event handler finds matching items and sets their visibility accordingly. It also updates the highlighting:

[csharp gutter=”false” toolbar=”false”]
void listView_ItemSearch(object sender, BetterListViewItemSearchEventArgs eventArgs)
{
var listView = (BetterListView)sender;

listView.BeginUpdate();

// update item visibility according to search query string
foreach (var item in listView.Items)
{
bool match = item.Text.Contains(eventArgs.QueryString);

if (match)
{
item.Visible = true;

item.SearchHighlight = new BetterListViewSearchHighlight(
0,
item.Text.IndexOf(eventArgs.QueryString, StringComparison.Ordinal),
eventArgs.QueryString.Length);
}
else
{
item.Visible = false;
}
}

listView.EndUpdate();
}
[/csharp]

Finally, the KeyDown event handler resets the view when Escape key is pressed (all items are made visible and the highlight is removed):

[csharp gutter=”false” toolbar=”false”]
void listView_KeyDown(object sender, KeyEventArgs e)
{
var listView = (BetterListView)sender;

listView.BeginUpdate();

if (e.KeyCode == Keys.Escape)
{
// remove search highlight
//NOTE: we could use BetterListView.RemoveSearchHighlight() but this applies to visible items only and some items are hidden at the time
foreach (var item in listView.Items)
{
item.SearchHighlight = BetterListViewSearchHighlight.Empty;
}

// make all items visible
foreach (var item in listView.Items)
{
item.Visible = true;
}

// mark the key as handled
e.Handled = true;

// suppress KeyPress event to prevent ItemSearch from happening
e.SuppressKeyPress = true;
}

listView.EndUpdate();
}
[/csharp]

And that’s it!

Better ListView custom scroll bar size

Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:

• HScrollBarWidth
• VScrollBarHeight

Of course, you can set these custom sizes in design-time as well as in run-time.

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.

This features works in both Better ListView and Better ListView Express.

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]