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.

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.