wxListView

Introduction

The wxListView (wxWidgets: wxListView Class Reference) control displays data in the form of a list. This class derives from wxListCtrl and provides a simpler interface for it. It should be used in preference to wxListCtrl when possible.

Single Column List Example

We will start by showing a simple example of a wxListView control that has a single column. The example is a simple modification of the MinimalApp2 example we presented in the minimal application tutorial. The full source for this example is available from our GitHub repository: wxWidgetsTutorials/TreeAndListControls/WxListView1.

The source code is shown below. The only changes made are the addition of the wxListView control to the frame and the insertion of 3 items in the list.

 File: TreeAndListControls/WxListView1/src/WxListView1Frame.cpp
#include "WxListView1Frame.h"
#include <wx/panel.h>
#include <wx/listctrl.h>
#include <wx/sizer.h>

WxListView1Frame::WxListView1Frame(const wxString& title)
    : wxFrame(NULL, wxID_ANY, title)
{
    // Create a top-level panel to hold all the contents of the frame
    wxPanel* panel = new wxPanel(this, wxID_ANY);

    // Create a wxListView control with one column.
    // The default style is wxLC_REPORT so columns need
    // to be added explicitly.
    wxListView* listView = new wxListView(panel, wxID_ANY, 
        wxDefaultPosition, wxSize(250, 200));
    listView->AppendColumn("Column 1");

    // Add three items to the list
    listView->InsertItem(0, "Item 1");
    listView->InsertItem(1, "Item 2");
    listView->InsertItem(2, "Item 3");

    // Set up the sizer for the panel
    wxBoxSizer* panelSizer = new wxBoxSizer(wxHORIZONTAL);
    panelSizer->Add(listView, 1, wxEXPAND);
    panel->SetSizer(panelSizer);

    // Set up the sizer for the frame and resize the frame
    // according to its contents
    wxBoxSizer* topSizer = new wxBoxSizer(wxHORIZONTAL);
    topSizer->Add(panel, 1, wxEXPAND);
    SetSizerAndFit(topSizer);
}

The application is shown in Figure 1 below.

Figure 1: The WxListView1 Application

The rest of the files don't have any significant changes but are shown here for completeness.

 File: TreeAndListControls/WxListView1/src/WxListView1Frame.h
#ifndef _TUTORIALS_WXWIDGETS_WXLISTVIEW1FRAME_H_
#define _TUTORIALS_WXWIDGETS_WXLISTVIEW1FRAME_H_

#include <wx/frame.h>

class WxListView1Frame : public wxFrame
{
public:
    WxListView1Frame(const wxString& title);
};

#endif
 File: TreeAndListControls/WxListView1/src/WxListView1App.h
#ifndef _TUTORIALS_WXWIDGETS_WXLISTVIEW1APP_H_
#define _TUTORIALS_WXWIDGETS_WXLISTVIEW1APP_H_

#include <wx/app.h>

class WxListView1App : public wxApp
{
public:
    virtual bool OnInit();
};
 File: TreeAndListControls/WxListView1/src/WxListView1App.cpp
#include "WxListView1App.h"
#include "WxListView1Frame.h"

wxIMPLEMENT_APP(WxListView1App);

bool WxListView1App::OnInit()
{
    WxListView1Frame* frame = new WxListView1Frame("WxListView1");
    frame->Show(true);
    return true;
}

Example of List with Two Columns

The next example is a simple modification of the previous example. We add a second column to the list. The full source for this example is available from our GitHub repository: wxWidgetsTutorials/TreeAndListControls/WxListView2.

The updated code is shown below. The wxListView::InsertItem method only allows to specify the contents of the first column. The SetItem method is used to set the contents of the other columns.

 File: TreeAndListControls/WxListView2/src/WxListView2Frame.cpp
#include "WxListView2Frame.h"
#include <wx/panel.h>
#include <wx/listctrl.h>
#include <wx/sizer.h>

WxListView2Frame::WxListView2Frame(const wxString& title)
    : wxFrame(NULL, wxID_ANY, title)
{
    // Create a top-level panel to hold all the contents of the frame
    wxPanel* panel = new wxPanel(this, wxID_ANY);

    // Create a wxListView control with one column.
    // The default style is wxLC_REPORT so columns need
    // to be added explicitly.
    wxListView* listView = new wxListView(panel, wxID_ANY,
        wxDefaultPosition, wxSize(250, 200));
    listView->AppendColumn("Column 1");
    listView->AppendColumn("Column 2");

    // Add three items to the list
    listView->InsertItem(0, "Item 1");
    listView->SetItem(0, 1, "Amber");
    listView->InsertItem(1, "Item 2");
    listView->SetItem(1, 1, "Blue");
    listView->InsertItem(2, "Item 3");
    listView->SetItem(2, 1, "Cyan");

    // Set up the sizer for the panel
    wxBoxSizer* panelSizer = new wxBoxSizer(wxHORIZONTAL);
    panelSizer->Add(listView, 1, wxEXPAND);
    panel->SetSizer(panelSizer);

    // Set up the sizer for the frame and resize the frame
    // according to its contents
    wxBoxSizer* topSizer = new wxBoxSizer(wxHORIZONTAL);
    topSizer->Add(panel, 1, wxEXPAND);
    SetSizerAndFit(topSizer);
}

The application is shown in Figure 2 below.

Figure 2: The WxListView2 Application

The rest of the files don't have any significant changes but are shown here for completeness.

 File: TreeAndListControls/WxListView2/src/WxListView2Frame.h
#ifndef _TUTORIALS_WXWIDGETS_WXLISTVIEW2FRAME_H_
#define _TUTORIALS_WXWIDGETS_WXLISTVIEW2FRAME_H_

#include <wx/frame.h>

class WxListView2Frame : public wxFrame
{
public:
    WxListView2Frame(const wxString& title);
};

#endif
 File: TreeAndListControls/WxListView2/src/WxListView2App.h
#ifndef _TUTORIALS_WXWIDGETS_WXLISTVIEW2APP_H_
#define _TUTORIALS_WXWIDGETS_WXLISTVIEW2APP_H_

#include <wx/app.h>

class WxListView2App : public wxApp
{
public:
    virtual bool OnInit();
};

#endif
 File: TreeAndListControls/WxListView2/src/WxListView2App.cpp
#include "WxListView2App.h"
#include "WxListView2Frame.h"

wxIMPLEMENT_APP(WxListView2App);

bool WxListView2App::OnInit()
{
    WxListView2Frame* frame = new WxListView2Frame("WxListView2");
    frame->Show(true);
    return true;
}