Task List

Task Lists help keep track of what you have done or To Do lists, simply check off the completed tasks plus Save for later! You can implement basic Task List application with Open/Save support using XML, plus Add/Remove Items all based on the CheckedListBox with this tutorial!

Printer Friendly Download Tutorial (404KB) Download Source Code (13.9KB)

Step 1

Start Microsoft Visual Basic 2008 Express Edition, then select File then New Project... Choose Windows Forms Application from the New Project Window, enter a name for the Project and then click OK, see below:

Step 2

A Blank Form named Form1 should then appear, see below:

Step 3

With Form1 selected goto the Properties box and change the Name from Form1 to frmMain

Step 4

Then from the Common Controls tab on the Toolbox select the CheckedListBox component:

Step 5

Draw a CheckedListBox on the Form, make sure to position and size the CheckedListbox so it appears as below:

Step 6

Then from the Common Controls tab on the Toolbox select the Textbox component:

Step 7

Draw a Textbox on the Form, this should be just above the CheckedListBox, see below:

Step 8

Select or click on the Textbox if it is not already selected, then goto the Properties box and change the name to "txtList", then set the Anchor property to "Top, Left, Right", all without quotes, see below:

Step 9

Select or click on the CheckedListBox, then goto the Properties box and change the name to "lstMain", then set the Anchor property to "Top, Bottom, Left, Right", all without quotes, see below:

Step 10

Then from the Menus & Toolbars tab on the Toolbox select the MenuStrip Control, see Below:

Step 11

Either double-click on the MenuStrip Control entry in the Menu & Toolbars tab on the Toolbox or keep the MenuStrip Component Clicked and then move it over the Form then let go. Change the Name of the MenuStrip in the properties to mnuList The Form will then look as below:

Step 12

Click or select where the MenuStrip says "Type Here", an editable Textbox will appear type in "File" without the quotes in this Box, then in the Box below that type in "New", below that "Open...", then "Save..." and finally "Exit". The MenuStrip should look as below:

Step 13

Click or select next to "File" where the MenuStrip says "Type Here", and type in "Edit" without the quotes in this Box, then in the Box below that type in "Cut", below that "Copy", then "Paste", "Add", "Remove", "Check All" and finally "Uncheck All". The MenuStrip should look as below:

Step 14

Right Click on the Form or the entry of the Form in Solution Explorer and choose the "View Code" option then above the "Public Class frmMain" type the following:

    Imports System.Xml

Also while still in the Code View, below the "Public Class frmMain" part type the following:

    Private Const XML_VERSION As String = "1.0"
    Private Const XML_ENCODE As String = "utf-8"
    Private Const TAG_ROOT As String = "tasklist"
    Private Const TAG_TASK As String = "task"
    Private Const ATTR_VALUE As String = "value"
    Private Const VAL_CHECKED As String = "checked"
    Private Const VAL_UNCHECKED As String = "unchecked"

See Below:

Step 15

Return to the Design view by selecting the [Design] tab or Right Click on the "View Designer" option in Solution Explorer for frmMain.
Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "New" (NewToolStripMenuItem) and type the following in the NewToolStripMenuItem_Click() Sub:

Dim Response As MsgBoxResult
Response = MsgBox("Are you sure you want to start a New Task List?", _
                  MsgBoxStyle.Question + MsgBoxStyle.YesNo, _
                  "Task List")
If Response = MsgBoxResult.Yes Then
  txtList.Text = ""
  lstMain.Items.Clear()
  Me.Text = "Task List - Untitled"
End If

See Below:

Step 16

Click on the [Design] Tab to view the form again, then Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Open..." (OpenToolStripMenuItem) and type the following in the OpenToolStripMenuItem_Click() Sub:

Dim Open As New OpenFileDialog()
Dim xmlDoc As New XmlDocument ' XML Document
Dim strStatus, strValue As String ' Status Strings
Dim blnChecked As Boolean = False ' Checked Status
Open.Filter = "Task List Files (*.tsk)|*.tsk|All files (*.*)|*.*"
Open.CheckFileExists = True
If Open.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
  Try
    txtList.Text = "" ' Reset Item Text
    lstMain.Items.Clear() ' Reset Task List
    Open.OpenFile() ' Open Document
    xmlDoc.Load(Open.FileName) ' Load XML
    If xmlDoc.GetElementsByTagName(TAG_ROOT).Count > 0 Then ' Has correct Root
      Dim elements As XmlNodeList = xmlDoc.GetElementsByTagName(TAG_TASK)
      For Each node As XmlNode In elements ' Loop though Tasks
        If node.Name = TAG_TASK Then ' Read Task
          strStatus = node.Attributes.GetNamedItem(ATTR_VALUE).Value
          strValue = node.InnerText ' Task Text
          If LCase(strStatus) = VAL_CHECKED Then _
            blnChecked = True Else blnChecked = False
            lstMain.Items.Add(strValue, blnChecked) ' Add to List
          End If
      Next
    End If
    Me.Text = "Task List - " & Open.FileName
  Catch ex As Exception
    ' Do nothing on Exception
  End Try
  lstMain.Focus()
End If

See Below:

Step 17

Click on the [Design] Tab to view the form again, then Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Save..." (SaveToolStripMenuItem) and type the following in the SaveToolStripMenuItem_Click() Sub

Dim Save As New SaveFileDialog()
Dim i As Integer
Dim strValue As String
Dim xmlDoc As New XmlDocument ' XML Document
Dim xmlDec As XmlDeclaration = xmlDoc.CreateXmlDeclaration(XML_VERSION, XML_ENCODE, Nothing)
Save.Filter = "Task List Files (*.tsk)|*.tsk|All files (*.*)|*.*"
Save.CheckPathExists = True
If Save.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
  Try
    Dim rootNode As XmlElement = xmlDoc.CreateElement(TAG_ROOT) ' Root Note
    xmlDoc.InsertBefore(xmlDec, xmlDoc.DocumentElement) ' Document Declaration
    xmlDoc.AppendChild(rootNode) ' Append Declaration to Root
    For i = 0 To lstMain.Items.Count - 1
      Dim taskNode = xmlDoc.CreateElement(TAG_TASK) ' Create Task Entry
      If lstMain.GetItemChecked(i) Then _ 
      strValue = VAL_CHECKED Else strValue = VAL_UNCHECKED
      taskNode.SetAttribute(ATTR_VALUE, strValue) ' Set Checked Value
      Dim taskText As XmlText = xmlDoc.CreateTextNode(CStr(lstMain.Items(i)))
      taskNode.AppendChild(taskText) ' Add Task Text
      xmlDoc.DocumentElement.AppendChild(taskNode) ' Append Node
    Next
    xmlDoc.Save(Save.FileName) ' Save Document
    Me.Text = "Task List - " & Save.FileName
  Catch ex As Exception
    ' Do nothing on Exception
  End Try
  lstMain.Focus()
End If

See Below:

Step 18

Click on the [Design] Tab to view the form again, then Click on "File" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Exit" (ExitToolStripMenuItem) and type the following in the ExitToolStripMenuItem_Click() Sub

Dim Response As MsgBoxResult
Response = MsgBox("Are you sure you want to Exit Task List?", _
                  MsgBoxStyle.Question + MsgBoxStyle.YesNo, _
                  "Task List")
If Response = MsgBoxResult.Yes Then
   End
End If

See Below:

Step 19

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Cut" (CutToolStripMenuItem) and type the following in the CutToolStripMenuItem_Click() Sub

If lstMain.SelectedIndex > -1 Then ' Make sure something is Selected
  Clipboard.SetData(System.Windows.Forms.DataFormats.Serializable, _
                    lstMain.Items.Item(lstMain.SelectedIndex)) ' Copy
  lstMain.Items.RemoveAt(lstMain.SelectedIndex) ' Remove Item
End If
lstMain.Focus()

See Below:

Step 20

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Copy" (CopyToolStripMenuItem) and type the following in the CopyToolStripMenuItem_Click() Sub

If lstMain.SelectedIndex > -1 Then ' Make sure something is Selected
  Clipboard.SetData(System.Windows.Forms.DataFormats.Serializable, _
                    lstMain.Items.Item(lstMain.SelectedIndex)) ' Copy
End If
lstMain.Focus()

See Below:

Step 21

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Paste" (PasteToolStripMenuItem) and type the following in the PasteToolStripMenuItem_Click() Sub

If Not Clipboard.GetData(System.Windows.Forms.DataFormats.Serializable) Is Nothing Then
  If lstMain.SelectedIndex > -1 Then ' Paste after Selected Item
    lstMain.Items.Insert(lstMain.SelectedIndex, _
                         Clipboard.GetData(System.Windows.Forms.DataFormats.Serializable))
  Else ' Or Paste at List End if no Selection
    lstMain.Items.Add(Clipboard.GetData(System.Windows.Forms.DataFormats.Serializable))
  End If
End If
lstMain.Focus()

See Below:

Step 22

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Add" (AddToolStripMenuItem) and type the following in the AddToolStripMenuItem_Click() Sub

If Trim(txtList.Text) <> "" Then ' Check for an item
  If lstMain.SelectedIndex > -1 Then ' Insert before Selected Item
    lstMain.Items.Insert(lstMain.SelectedIndex, txtList.Text)
  Else ' Or Add at List End
    lstMain.Items.Add(txtList.Text)
  End If
End If
lstMain.Focus()

See Below:

Step 23

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Remove" (RemoveToolStripMenuItem) and type the following in the RemoveToolStripMenuItem_Click() Sub

If lstMain.SelectedIndex > -1 Then
  lstMain.Items.RemoveAt(lstMain.SelectedIndex) ' Remove
End If
lstMain.Focus()

See Below:

Step 24

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Check All" (CheckAllToolStripMenuItem) and type the following in the CheckAllToolStripMenuItem_Click() Sub

If lstMain.Items.Count > 0 Then
  For i As Integer = 0 To lstMain.Items.Count - 1
    lstMain.SetItemChecked(i, True) ' Check to True
  Next
End If
lstMain.Focus()

See Below:

Edit Menu Check All Menu Item Click Event

Step 25

Click on the [Design] Tab to view the form again, then Click on "Edit" on the MenuStrip to show the MenuStrip then Double Click on the Menu Item Labeled "Uncheck All" (UncheckAllToolStripMenuItem) and type the following in the UncheckAllToolStripMenuItem_Click() Sub

If lstMain.Items.Count > 0 Then
  For i As Integer = 0 To lstMain.Items.Count - 1
    lstMain.SetItemChecked(i, False) ' Check to False
  Next
End If
lstMain.Focus()

See Below:

Edit Menu Uncheck All Menu Item Click Event

Step 26

Click on the [Design] Tab to view the form again, then Double Click on the Form (frmMain) and type the following in the frmMain_Load() Sub

txtList.Text = ""
lstMain.Items.Clear()
Me.Text = "Task List - Untitled"

See Below:

Step 26

Steps 26-31 are optional and just add Keyboard Shortcuts to the MenuItems, you don't have to do these if you don't want to!
Return to the Design view of the Form by selecting the [Design] tab for the Form, or double click on the Form's name in Solution Explorer.
Click on "File" on the Menu Strip to select the Menu Strip and show the File Menu then mouse over the "Type Here" box.
Click on the Drop Down arrow inside the "Type Here" box to show the following options: MenuItem, ComboBox, Separator and TextBox, see below:

File Menu with Type Here options displayed at bottom of menu

Step 27

Click on the "Separator" option to place a Menu Separator in this menu, then click on it an move it so it goes above the "Exit" option in the file menu, do this by clicking on the separator (the horizontal line which has appeared) then whilst keeping clicked move it up, it should appear as below:

File Menu with Divider above Exit MenuItem

Step 28

With the "File" Menu still being displayed click on "New" then in the Properties box look for the "Shortcut Key" option and click on the Drop Down arrow where "None" appears. Check the "Ctrl" Checkbox in "Modifiers" and then in the "Key" dropdown list select "N", see below:

Step 29

Set the rest of the "File" MenuItem "Shortcut Key" Properties except the "Exit" Menu Item, "Open" should be set to "Ctrl" and "O", "Save" to "Ctrl" and "S", the File Menu should appear as below:

Step 30

Click on or select the "Edit" Menu and set the "Shortcut Keys" Properties, "Cut" should be set to "Ctrl" and "X", "Copy" to "Ctrl" and "C", "Paste" to "Ctrl" and "V", "Add" should be just "Ins" in the Keys drop-down list and "Remove" should be just "Del", "Check All" should be "Ctrl" and "A", and the "Uncheck All" should be "Ctrl", "Shift" and "A", The Edit Menu should appear as below:

Step 31

With the Edit Menu still selected mouse over the the "Type Here" box, click on the drop down arrow and choose the "Separator" option, then click on this separator (the horizontal line which has appeared) then whilst keeping clicked move it up until it is above "Add", then create another Seperator and move this one above "Check All", the completed Edit Menu should appear as below:

Edit Menu with Shortcut Keys and Separators

Step 32

Save the Project as you have now finished the application, then click on Start:

When you do the following will appear:

Step 33

You can type into the TextBox some tasks then go to Edit then Add to add this to the list, or if you added the Shortcuts, press "Insert" on the Keyboard, add a couple if you want, you can then Save this to Open later, see below:

Step 34

Click File then Exit or click on the Close button on the top right of Task List to end the application.

This program uses XML to Save the the Task list including the items checked and the order they appear, try adding a few more features yourself such as moving items within the list, or use it as a basis for more complex XML-based applications!