Results 1 to 4 of 4

Thread: [2008] ListView Options screen

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    [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:


    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:
    1. Imports System.Collections.ObjectModel
    2. Imports System.Runtime.InteropServices
    3.  
    4. Public Class Form1
    5.  
    6.     '// Function used to set Vista-theming on our listview
    7.     <DllImport("uxtheme", CharSet:=CharSet.Unicode)> _
    8.     Public Shared Function SetWindowTheme(ByVal hWnd As IntPtr, ByVal textSubAppName As String, ByVal textSubIdList As String) As Integer
    9.     End Function
    10.  
    11.     '// A collection of controls that will be placed on a new panel
    12.     Dim ctrlCollection As Collection(Of Control)
    13.  
    14.     '// A Collection of all our panels
    15.     Dim _Panels As Collection(Of Panel)
    16.     Public Property Panels() As Collection(Of Panel)
    17.         Get
    18.             If _Panels Is Nothing Then _Panels = New Collection(Of Panel)
    19.             Return _Panels
    20.         End Get
    21.         Set(ByVal value As Collection(Of Panel))
    22.             _Panels = value
    23.         End Set
    24.     End Property
    25.  
    26.     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    27.  
    28.         '// Ensure vista-theming
    29.         SetWindowTheme(lvw.Handle, "explorer", Nothing)
    30.  
    31.         '// Declare a panel for later use
    32.         Dim pnl As Panel
    33.  
    34.         '// Set the ImageList of the listview to the tabcontrol ImageList (so they share images)
    35.         lvw.LargeImageList = tabCtrl.ImageList
    36.  
    37.  
    38.         '// For each TabPage, create a new Panel
    39.         For Each tab As TabPage In tabCtrl.TabPages
    40.  
    41.             '// Create new panel
    42.             pnl = New Panel
    43.  
    44.             '// Set some properties
    45.             pnl.Dock = DockStyle.Fill
    46.             pnl.Visible = True
    47.  
    48.             '// Add the panel to the 'background panel' controls collection so it becomes visible
    49.             pnlBackground.Controls.Add(pnl)
    50.  
    51.             '// Add the panel to our Panels collection so we can keep track of it easily
    52.             Me.Panels.Add(pnl)
    53.  
    54.             '// Create a new ListviewItem with the text and image from the current TabPage
    55.             Dim lvi As New ListViewItem(tab.Text)
    56.             lvi.Tag = pnl       'Important: The Tag property of the listviewitem contains the corresponding panel
    57.             lvi.ImageIndex = tab.ImageIndex
    58.             lvw.Items.Add(lvi)
    59.  
    60.             '// For each control, add it to a new panel
    61.             '// 1. Add the controls to a Collection(Of Control)
    62.             ctrlCollection = New Collection(Of Control)
    63.             For Each ctrl As Control In tab.Controls
    64.                 ctrlCollection.Add(ctrl)
    65.             Next
    66.             '// 2. Add the controls in the _Controls collection to the panel
    67.             For Each ctrl As Control In ctrlCollection
    68.                 pnl.Controls.Add(ctrl)
    69.             Next
    70.  
    71.         Next
    72.  
    73.         '// Hide tabcontrol
    74.         tabCtrl.Visible = False
    75.  
    76.     End Sub
    77.  
    78.     Private Sub lvw_ItemSelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ListViewItemSelectionChangedEventArgs) Handles lvw.ItemSelectionChanged
    79.         '// Hide every panel first
    80.         For Each _panel As Panel In Panels
    81.             _panel.Visible = False
    82.         Next
    83.  
    84.         '// Get the panel from the Tag property of the currently selected item and make it visible
    85.         Dim pnl As Panel = CType(e.Item.Tag, Panel)
    86.         pnl.Visible = True
    87.     End Sub
    88.  
    89.  
    90. 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..!
    Attached Files Attached Files

  2. #2
    Addicted Member
    Join Date
    Feb 2010
    Posts
    197

    Re: [2008] ListView Options screen

    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:


    after closing and re opening the options menu the items are gone:

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: [2008] ListView Options screen

    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

    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.

  4. #4
    Addicted Member
    Join Date
    Feb 2010
    Posts
    197

    Re: [2008] ListView Options screen

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

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width