[2008] ListView Options screen

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:
http://i38.tinypic.com/a1pxqh.jpg

Or even Visual Studio's options screen (albeit without icons):
http://i33.tinypic.com/1564m6c.jpg

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):
http://i36.tinypic.com/2d41g3.jpg
http://i36.tinypic.com/riw611.jpg

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:
http://i37.tinypic.com/1zqczgl.jpg

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:

vb.net 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..!

Nice project, few small issues, i added this to a test project, and on whilst inside the test app, closing the options menu then reopening it the listview items are all added/created again, so you now have 6 items for instance when there should be only 3. So i added:

lvw.Clear()

To the form closing event, this solved that issue but now on opening the options menu the second time all the listview items on click show the tabs as been blank when they are not.

Heres some pics to explain a little better:

Options menu opened for the first time on app run:
http://img4.imageshack.us/img4/5195/snap8ho.jpg

after closing and re opening the options menu the items are gone:
http://img827.imageshack.us/img827/4947/snap9u.jpg

Hm, this is a very old project, I don't have time right now to see how it all worked again lol. If I have some time in the near future I'll try to make a new version, one that is not hacked together like this :p

If the items in the listview are still there after closing and re-opening the form it seems like you are using ShowDialog to show the form and not disposing it before showing it again. If that is indeed the case, try disposing the form and creating a new instance before you show it again.

Hey, yeah i am using the showdialog so ive now added the dispose code etc and its all working great, thanks! :)

Quote:

---

If I have some time in the near future I'll try to make a new version, one that is not hacked together like this

---

That'd be great, Ill keep an eye out in case you do.