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:
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..!