[2008] ListView Options screen

[NickThissen]

Hi,

I thought I would create a very simple way to mimic a "Listview Options screen" like many programs offer.

What is a "Listview Options screen" I hear you ask? Well take a look for example at Mozilla Firefox's options screen:


Or even Visual Studio's options screen (albeit without icons):


They all feature a List where you can select 'subjects', and clicking on a subject will bring up the corresponding panel with options.
It is basically a TabControl with a listview instead of tabs.


I made a similar options screen using a very simple 'mechanism' which I'll try to explain in detail later.

Here's two images of my options screen (don't mind the random options and images):



As you can see it supports the listview both at the side and top (and even bottom and right-side if you wish).


So how does this work?

It is basically a normal Listview, and a few panels that get created during Run-time. You do NOT have to create each panel manually and bother with hiding/unhiding panels during design time to place controls on them: I came up with the idea to use a TabControl to do all this work for you!

If you open my project you can see that there the control holding all the options is actually just a normal TabControl.
What happens during Run-time is:
- For each TabPage, a new Panel is created and a Listview entry (with the TabPage's Text and Icon) is added.
- Then, each control on that particular TabPageis 'moved' from the TabPage to the new Panel.
- Then, the Panel, now including controls, is added to the form (or rather, the background panel).
- Finally, the actual TabControl (now empty) is hidden completely: the user never encounters it.

When selecting an entry in the Listview, the corresponding Panel is made Visible while all other panels become invisible. To make this easy, each ListviewItem contains the corresponding Panel in it's Tag property.

Here is a screenshot of the design-area:


So basically, you can use it like any other TabControlled options screen and it will get converted to a Listview options screen automatically!

If you want the Listview to be at the top, right or bottom, you simply need to select the PANEL that the listview is on (called "pnlListview") and Dock it where you want to.
(The reason for the listview being on a panel is simply so I can set the Padding of the panel so the listview is not touching the sides of the form)

The entire project is attached, and here is the main code:

Imports System.Collections.ObjectModel
Imports System.Runtime.InteropServices
 
Public Class Form1
 
    '// Function used to set Vista-theming on our listview
    <DllImport("uxtheme", CharSet:=CharSet.Unicode)> _
    Public Shared Function SetWindowTheme(ByVal hWnd As IntPtr, ByVal textSubAppName As String, ByVal textSubIdList As String) As Integer
    End Function
 
    '// A collection of controls that will be placed on a new panel
    Dim ctrlCollection As Collection(Of Control)
 
    '// A Collection of all our panels
    Dim _Panels As Collection(Of Panel)
    Public Property Panels() As Collection(Of Panel)
        Get
            If _Panels Is Nothing Then _Panels = New Collection(Of Panel)
            Return _Panels
        End Get
        Set(ByVal value As Collection(Of Panel))
            _Panels = value
        End Set
    End Property
 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
 
        '// Ensure vista-theming
        SetWindowTheme(lvw.Handle, "explorer", Nothing)
 
        '// Declare a panel for later use
        Dim pnl As Panel
 
        '// Set the ImageList of the listview to the tabcontrol ImageList (so they share images)
        lvw.LargeImageList = tabCtrl.ImageList
 
 
        '// For each TabPage, create a new Panel
        For Each tab As TabPage In tabCtrl.TabPages
 
            '// Create new panel
            pnl = New Panel
 
            '// Set some properties
            pnl.Dock = DockStyle.Fill
            pnl.Visible = True
 
            '// Add the panel to the 'background panel' controls collection so it becomes visible
            pnlBackground.Controls.Add(pnl)
 
            '// Add the panel to our Panels collection so we can keep track of it easily
            Me.Panels.Add(pnl)
 
            '// Create a new ListviewItem with the text and image from the current TabPage
            Dim lvi As New ListViewItem(tab.Text)
            lvi.Tag = pnl       'Important: The Tag property of the listviewitem contains the corresponding panel
            lvi.ImageIndex = tab.ImageIndex
            lvw.Items.Add(lvi)
 
            '// For each control, add it to a new panel
            '// 1. Add the controls to a Collection(Of Control)
            ctrlCollection = New Collection(Of Control)
            For Each ctrl As Control In tab.Controls
                ctrlCollection.Add(ctrl)
            Next
            '// 2. Add the controls in the _Controls collection to the panel
            For Each ctrl As Control In ctrlCollection
                pnl.Controls.Add(ctrl)
            Next
 
        Next
 
        '// Hide tabcontrol
        tabCtrl.Visible = False
 
    End Sub
 
    Private Sub lvw_ItemSelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ListViewItemSelectionChangedEventArgs) Handles lvw.ItemSelectionChanged
        '// Hide every panel first
        For Each _panel As Panel In Panels
            _panel.Visible = False
        Next
 
        '// Get the panel from the Tag property of the currently selected item and make it visible
        Dim pnl As Panel = CType(e.Item.Tag, Panel)
        pnl.Visible = True
    End Sub
 
 
End Class

As a bonus, it uses the 'uxtheme' dll to make the Listview appear in Vista-style (if you are running Vista).


Hope you enjoy it..!