ICreate.Controls.Bars Send comments on this topic.
Walkthrough - TaskBar Employee Details

Glossary Item Box

A TaskBar is useful for organising tasks performed on an item in context. You can see such behaviour in Windows explorer when selecting a file or directory. In this walkthrough the tasks performed relate to an employee. The tasks are grouped into three categories: tasks that apply to all employees; tasks specific to the current employee; and tasks related to the employee's skills. A TaskBar is used for each category. There is also an option to ensure only one TaskBar is expanded at any time. The image below shows the completed application.

 

To implement the application proceed as follows:

Create application and add SuperPanels.

  1. Create a new WinForm application. You can use either C# or Visual Basic.
  2. Rename From1 to MainForm, set its BackColor = SkyBlue, and Size = 600,600.
  3. Add a SuperPanel to the Form.
  4. Name the SuperPanel superPanelTaskBarContainer (SuperPanelTaskBarContainer for Visual Basic)
  5. Set the following superPanelTaskBarContainer properties to the specified value:
    1. Dock = Left. The Dock property is on the SuperPanel smart tag panel.
    2. Padding = 14, 14, 0, 14. The Padding property is on the SuperPanel smart tag panel.
    3. Size.Width = 245
    4. Text = "". The Text property is on the SuperPanel smart tag panel.
    5. TextAlignment = MiddleLeft
    6. Background.Color = Gray
    7. Edge = 3
    8. Rounding = 0
    9. BorderWidth = None
    10. ClientBackground.Color = Tan
    11. ClientBackground.Type = Solid
    12. Watermark = User. This is a predefined image on the Clip art page.
    13. WatermarkBounds = 108, 384, 161, 178
  6. Lock the watermark's position and size by setting the design-time property LockWatermark = true. All ICreate component images which can be moved and resized can be locked. When locked the image cannot be moved or resized, and controls on top of the image can be selected. If you wish to select a Control on top of an image but do not want to lock the image then hold down the control key. All images remain locked while the control key remains depressed. 
  7. Add two more SuperPanel controls to the Form.
  8. Name the one superPanelEmployeesTitle and the other superPanelSkillsTitle. (SuperPanelEmployeesTitle and SuperPanelSkillsTitle for Visual Basic).
  9. Set the following superPanelEmployeesTitle properties to the specified value:
    1. Font = Microsoft Sans Serif, Bold 12 point.
    2. Text = "Employees"
    3. Location = 255,15
    4. Size = 325,30
  10. Set the following superPanelSkillsTitle properties to the specified value:
    1. Font = Microsoft Sans Serif, Bold 12 point.
    2. Text = "Skills"
    3. Location = 255,305
    4. Size = 325,30
  11. Right click superPanelTaskBarContainer and select the Save style context menu option.
  12. Right click superPanelEmployeesHeading and select the Apply style superPanelTaskBarContainer context menu option.
  13. Right click superPanelSkillsHeading and select the Apply style superPanelTaskBarContainer context menu option.
  14. Add two ListBox controls to the Form.
  15. Name the one ListBox listBoxEmployees and the other listBoxSkills (ListBoxEmployees and ListBoxSkills for Visual Basic).
  16. Set the following listBoxEmployees properties to the specified value:
    1. Location = 255,50
    2. Size = 325,238
  17. Set the following listBoxSkills properties to the specified value:
    1. Location = 255,340
    2. Size = 325,212

Add the TaskBar controls

  1. Add three TaskBar controls to the superPanelTaskBarContainer.
  2. Name the first taskBarCommonEmployeeTasks, the second taskBarEmployeeSpecificTasks and the third taskBarSkillTasks (TaskBarCommonEmployeeTasks, TaskBarEmployeeSpecificTasks and TaskBarSkillTasks for Visual Basic).
  3. Add four TaskBarItem components to taskBarCommonEmployeeTasks. You can add a TaskBarItem by clicking the Add item option on the smart tag panel or by using the items editor. Open the items editor by selecting the Items ... smart tag panel option or via the Items property in the property grid.
  4. Name the first TaskBarItem taskBarItemAddEmployee (TaskBarItemAddEmployee for Visual Basic). Set the Text = "Add employee" and Image = add employee.png.
  5. Name the second TaskBarItem taskBarItemModifyEmployee (TaskBarItemModifyEmployee for Visual Basic). Set the Text = "Modify employee" and Image = modify employee.png.
  6. Name the third TaskBarItem taskBarItemRemoveEmployee (TaskBarItemRemoveEmployee for Visual Basic). Set the Text = "Remove employee" and Image = remove employee.png.
  7. Name the fourth TaskBarItem taskBarItemMoveDepartment  (TaskBarItemMoveDepartment for Visual Basic). Set the Text = "Move department" and Image = move department.png.
  8. Add three TaskBarItem components to the taskBarEmployeeSpecificTasks TaskBar.
  9. Name the first TaskBarItem taskBarItemExtendContract (TaskBarItemExtendContract for Visual Basic). Set the Text = "Extend contract" and Image = extend contract.png.
  10. Name the second TaskBarItem taskBarItemPaySchedule  (TaskBarItemPaySchedule for Visual Basic). Set the Text = "Pay schedule" and Image = Pay schedule.png.
  11. Name the third TaskBarItem taskBarItemGrade (TaskBarItemGrade for Visual Basic). Set the Text = "Grade" and Image = grade.png.
  12. Add two TaskBarItem components to the taskBarSkillTasks TaskBar.
  13. Name the first TaskBarItem taskBarItemAddSkill (TaskBarItemAddSkill for Visual Basic). Set the Text = "Add skill" and Image = add skill.png.
  14. Name the second TaskBarItem taskBarItemRemoveSkill  (TaskBarItemRemoveSkill for Visual Basic). Set the Text = "Remove Skill" and Image = remove skill.png.
  15. Set the following taskBarCommonEmployeeTasks properties to the specified value:
    1. Dock = Top
    2. Padding = 10,5,10,0
    3. Style = Windows
    4. Text = "Employees"
    5. TitleImage = employees title.png
    6. Watermark = employees title.png
    7. WatermarkBounds = 130,50,100,85
    8. Animate = true
    9. BackColor = PeachPuff
    10. HotTrackBackColor = 255,255,192
    11. HotTrackTitleBackColor = 255,128,128
    12. TitleBackColor = Peru
  16. Set the following taskBarEmployeeSpecificTasks properties to the specified value:
    1. Dock = Top
    2. Padding = 10,5,10,0
    3. Text = "Employee tasks"
    4. TitleImage = employee tasks title.png
    5. Watermark = employee tasks title.png
    6. WatermarkBounds = 150,45,70,70
  17. Set the following taskBarSkillTasks properties to the specified value:
    1. Dock = Top
    2. Padding = 10,5,10,0
    3. Text = "Skills"
    4. TitleImage = skills title.png
    5. Watermark = skills title.png
    6. WatermarkBounds = 165,50,45,45
  18. Right click taskBarCommonEmployeeTasks and select the Save style context menu option.
  19. Right click taskBarEmployeeSpecificTasks and select the Apply style taskBarCommonEmployeeTasks context menu option.
  20. Right click taskBarSkillTasks and select the Apply style taskBarCommonEmployeeTasks context menu option.

Implement the Employee and Skill types

  1. Implement an Employee class as shown below:
    Visual Basic
     
    Public Class Employee
     
    Public Property FirstName() As String
    Get
    Return _firstName
    End Get
    Set(ByVal value As String)
    _firstName = value
    End Set
    End Property
    Private _firstName As String
     
    Public Property LastName() As String
    Get
    Return _lastName
    End Get
    Set(ByVal value As String)
    _lastName = value
    End Set
    End Property
    Private _lastName As String
     
    Public Property Department() As String
    Get
    Return _department
    End Get
    Set(ByVal value As String)
    _department = value
    End Set
    End Property
    Private _department As String
     
    Public Property Grade() As String
    Get
    Return _grade
    End Get
    Set(ByVal value As String)
    _grade = value
    End Set
    End Property
    Private _grade As String
     
    Public Property Salaried() As Boolean
    Get
    Return _salaried
    End Get
    Set(ByVal value As Boolean)
    _salaried = value
    End Set
    End Property
    Private _salaried As Boolean
     
    Public Property Temporary() As Boolean
    Get
    Return _temporary
    End Get
    Set(ByVal value As Boolean)
    _temporary = value
    End Set
    End Property
    Private _temporary As Boolean
     
    Public Property Skills() As Skill()
    Get
    Return _skills
    End Get
    Set(ByVal value As Skill())
    _skills = value
    End Set
    End Property
    Private _skills As Skill()
     
    Public Sub New(ByVal firstName As String, ByVal lastName As String, ByVal department As String, _
    ByVal grade As String, ByVal salaried As Boolean, ByVal temporary As Boolean, _
    ByVal skills As Skill())
     
    _firstName = firstName
    _lastName = lastName
    _department = department
    _grade = grade
    _salaried = salaried
    _temporary = temporary
    _skills = skills
    End Sub
     
    Public Overloads Overrides Function ToString() As String
    Return firstName + " " + lastName
    End Function
     
    End Class
    C#
     
    public class Employee
    {
    public string FirstName
    {
    get { return firstName; }
    set { firstName = value; }
    }
    private string firstName;
     
    public string LastName
    {
    get { return lastName; }
    set { lastName = value; }
    }
    private string lastName;
     
    public string Department
    {
    get { return department; }
    set { department = value; }
    }
    private string department;
     
    public string Grade
    {
    get { return grade; }
    set { grade = value; }
    }
    private string grade;
     
    public bool Salaried
    {
    get { return salaried; }
    set { salaried = value; }
    }
    private bool salaried;
     
    public bool Temporary
    {
    get { return temporary; }
    set { temporary = value; }
    }
    private bool temporary;
     
    public Skill[] Skills
    {
    get { return skills; }
    set { skills = value; }
    }
    private Skill[] skills;
     
    public Employee(string _firstName, string _lastName, string _department, 
    string _grade, bool _salaried, bool _temporary, Skill[] _skills)
    {
    firstName = _firstName;
    lastName = _lastName;
    department = _department;
    grade = _grade;
    salaried = _salaried;
    temporary = _temporary;
    skills = _skills;
    }
     
    public override string ToString()
    {
    return firstName + " " + lastName;
    }
    }
  2. Implement the Skills class as shown below:
    Visual Basic
     
    Public Class Skill
     
    Public Property Name() As String
    Get
    Return _name
    End Get
    Set(ByVal value As String)
    _name = value
    End Set
    End Property
    Private _name As String
     
    Public Sub New(ByVal name As String)
    _name = Name
    End Sub
     
    Public Overloads Overrides Function ToString() As String
    Return _name
    End Function
     
    End Class
    C#
     
            
    public class Skill
    {
    public string Name
    {
    get { return name; }
    set { name = value; }
    }
    private string name;
     
    public Skill(string _name)
    {
    name = _name;
    }
     
    public override string ToString()
    {
    return name;
    }
    }

Add the Single group open CheckBox

  1.  Add a CheckBox to the superPanelTaskBarContainer SuperPanel.
  2. Name the CheckBox checkBoxSingleGroupOpen (CheckBoxSingleGroupOpen for Visual Basic).
  3. Set the following properties of checkBoxSingleGroupOpen to the specified value:
    1. Text = "Single open group"
    2. Location = 25, 530
  4. Implement the checkBoxSingleGroupOpen CheckChanged event handler as follows:
    Visual Basic
     
    Private Sub CheckBoxSingleGroupOpen_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles CheckBoxSingleGroupOpen.CheckedChanged
     
    If CheckBoxSingleGroupOpen.Checked Then
    TaskBarCommonEmployeeTasks.Expand()
    CollapseTaskBar(TaskBarEmployeeSpecificTasks)
    CollapseTaskBar(TaskBarSkillTasks)
    End If
    End Sub
     
    Private Sub CollapseTaskBar(ByVal taskBar As TaskBar)
    taskBar.Animate = False
    taskBar.Collapse()
    taskBar.Animate = True
    End Sub
    C#
     
    private void checkBoxSingleGroupOpen_CheckedChanged(object sender, EventArgs e)
    {
    if (checkBoxSingleGroupOpen.Checked) 
    { 
    taskBarCommonEmployeeTasks.Expand(); 
    CollapseTaskBar(taskBarEmployeeSpecificTasks); 
    CollapseTaskBar(taskBarSkillTasks); 
    }
    }
     
    private void CollapseTaskBar(TaskBar taskBar) 
    { 
    taskBar.Animate = false; 
    taskBar.Collapse(); 
    taskBar.Animate = true; 
    }
  5. The checkBoxSingleGroupOpen CheckBox controls if one or many TaskBars can be expanded at any time. For all three TaskBars, implement the BarExpanding event handler as shown below. This code ensures only one TaskBar is expanded at any time.
    Visual Basic
     
    Private Sub TaskBars_BarExpanding(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles TaskBarSkillTasks.BarExpanding, _
    TaskBarEmployeeSpecificTasks.BarExpanding, _
    TaskBarCommonEmployeeTasks.BarExpanding
     
    If CheckBoxSingleGroupOpen.Checked Then
     
    If Not (sender Is TaskBarCommonEmployeeTasks) Then
    CollapseTaskBar(TaskBarCommonEmployeeTasks)
    End If
    If Not (sender Is TaskBarEmployeeSpecificTasks) Then
    CollapseTaskBar(TaskBarEmployeeSpecificTasks)
    End If
    If Not (sender Is TaskBarSkillTasks) Then
    CollapseTaskBar(TaskBarSkillTasks)
    End If
     
    End If
    End Sub
    C#
     
    private void taskBars_BarExpanding(object sender, EventArgs e)
    {
    if (checkBoxSingleGroupOpen.Checked) 
    { 
    if (sender != taskBarCommonEmployeeTasks)
    CollapseTaskBar(taskBarCommonEmployeeTasks); 
    if (sender != taskBarEmployeeSpecificTasks)
    CollapseTaskBar(taskBarEmployeeSpecificTasks); 
    if (sender != taskBarSkillTasks)
    CollapseTaskBar(taskBarSkillTasks); 
    }
    }

Implement event handlers

  1. When the user selects an employee their skills are listed in the skills ListBox. Certain TaskBarItems are disabled or hidden depending on the properties of the select Employee instance. This functionality is implemented in the listBoxEmployee and listBoxSkills SelectedIndexChanged event handlers. Implement these event handlers as shown below:
    Visual Basic
     
    Private Sub ListBoxEmployees_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles ListBoxEmployees.SelectedIndexChanged
    SetEmployeeTaskBarItemsState()
    End Sub
     
    Private Sub ListBoxSkills_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles ListBoxSkills.SelectedIndexChanged
    SetSkillTaskBarItemsState()
    End Sub
     
    Private Sub SetEmployeeTaskBarItemsState()
     
    Dim selectedEmployeeIndex As Integer = ListBoxEmployees.SelectedIndex
     
    If selectedEmployeeIndex = -1 Then
    TaskBarItemModifyEmployee.Enabled = False
    TaskBarItemRemoveEmployee.Enabled = False
    TaskBarItemMoveDepartment.Enabled = False
    TaskBarItemExtendContract.Visible = False
    TaskBarItemPaySchedule.Visible = False
    Else
    Dim selectedEmployee As Employee = CType(ListBoxEmployees.SelectedItem, Employee)
    TaskBarEmployeeSpecificTasks.Text = "Tasks for " + selectedEmployee.ToString
    ShowSkills(selectedEmployee)
    TaskBarItemModifyEmployee.Enabled = True
    TaskBarItemRemoveEmployee.Enabled = True
    TaskBarItemMoveDepartment.Enabled = True
    TaskBarItemExtendContract.Visible = selectedEmployee.Temporary
    TaskBarItemPaySchedule.Visible = Not selectedEmployee.Salaried
    End If
     
    End Sub
     
    Private Sub SetSkillTaskBarItemsState()
    TaskBarItemRemoveSkill.Enabled = Not (ListBoxSkills.SelectedIndex = -1)
    End Sub
     
    Private Sub ShowSkills(ByVal employee As Employee)
     
    ListBoxSkills.Items.Clear()
    For Each skill As Skill In employee.Skills
    ListBoxSkills.Items.Add(skill)
    Next
    SetSkillTaskBarItemsState()
     
    End Sub
    C#
     
    private void listBoxEmployees_SelectedIndexChanged(object sender, EventArgs e)
    {
    SetEmployeeTaskBarItemsState();
    }
     
    private void listBoxSkills_SelectedIndexChanged(object sender, EventArgs e)
    {
    SetSkillTaskBarItemsState();
    }
     
    private void SetEmployeeTaskBarItemsState()
    {
    int selectedEmployeeIndex = listBoxEmployees.SelectedIndex; 
     
    if (selectedEmployeeIndex == -1) 
    { 
    taskBarItemModifyEmployee.Enabled = false; 
    taskBarItemRemoveEmployee.Enabled = false; 
    taskBarItemMoveDepartment.Enabled = false; 
    taskBarItemExtendContract.Visible = false; 
    taskBarItemPaySchedule.Visible = false; 
    } 
    else 
    { 
    Employee selectedEmployee = (Employee)listBoxEmployees.SelectedItem;
     
    taskBarEmployeeSpecificTasks.Text = "Tasks for " + selectedEmployee.ToString(); 
    ShowSkills(selectedEmployee);
    taskBarItemModifyEmployee.Enabled = true; 
    taskBarItemRemoveEmployee.Enabled = true; 
    taskBarItemMoveDepartment.Enabled = true; 
    taskBarItemExtendContract.Visible = selectedEmployee.Temporary; 
    taskBarItemPaySchedule.Visible = !selectedEmployee.Salaried; 
    } 
    }
     
    private void SetSkillTaskBarItemsState() 
    { 
    taskBarItemRemoveSkill.Enabled = listBoxSkills.SelectedIndex != -1; 
    }
     
    private void ShowSkills(Employee employee) 
    { 
    listBoxSkills.Items.Clear(); 
    foreach (Skill skill in employee.Skills)
    listBoxSkills.Items.Add(skill); 
    SetSkillTaskBarItemsState(); 
    }
  2. Add some test data in the MainForm constructor as shown below:
    Visual Basic
     
    Public Sub New()
     
    InitializeComponent()
     
    Dim employee1 As Employee = New Employee("Joe", "Public", "Sales", "MAN-B", True, False, _
    New Skill() {New Skill("Communication"), New Skill("Marketing"), New Skill("Product knowledge")})
    Dim employee2 As Employee = New Employee("Peter", "Smith", "Accounting", "MAN-A", False, False, _
    New Skill() {New Skill("Accounting"), New Skill("Auditing")})
    Dim employee3 As Employee = New Employee("Sally", "Jones", "HR", "BANDB-B", False, True, _
    New Skill() {})
    Dim employee4 As Employee = New Employee("Jack", "Stalk", "Engineering", "ENG-C", True, True, _
    New Skill() {New Skill("C#"), New Skill("SQL")})
     
    ListBoxEmployees.Items.Add(employee1)
    ListBoxEmployees.Items.Add(employee2)
    ListBoxEmployees.Items.Add(employee3)
    ListBoxEmployees.Items.Add(employee4)
     
    SetEmployeeTaskBarItemsState()
    SetSkillTaskBarItemsState()
     
    End Sub
    C#
     
    public MainForm()
    {
    InitializeComponent();
     
    Employee employee1 = new Employee("Joe", "Public", "Sales", "MAN-B", true, false, 
    new Skill[] { new Skill("Communication"), new Skill("Marketing"), new Skill("Product knowledge") }); 
    Employee employee2 = new Employee("Peter", "Smith", "Accounting", "MAN-A", false, false, 
    new Skill[] { new Skill("Accounting"), new Skill("Auditing") }); 
    Employee employee3 = new Employee("Sally", "Jones", "HR", "BANDB-B", false, true, 
    new Skill[] { }); 
    Employee employee4 = new Employee("Jack", "Stalk", "Engineering", "ENG-C", true, true, 
    new Skill[] { new Skill("C#"), new Skill("SQL") });
     
    listBoxEmployees.Items.Add(employee1); 
    listBoxEmployees.Items.Add(employee2); 
    listBoxEmployees.Items.Add(employee3); 
    listBoxEmployees.Items.Add(employee4); 
     
    SetEmployeeTaskBarItemsState(); 
    SetSkillTaskBarItemsState();
    }
  3. The walkthrough is complete and the application can be executed.