Creating a Working User Interface

As an example, consider our flashlight from earlier chapters. It is now a data-logging device that we can use to track the activities of the security staff at our installation. As well as providing light as requested, the flashlight will also allow security personnel to log their location at any given time. The locations available are "on break," "at the warehouse," "at reception," or "walking around the plant."

 ListBox listBox = new ListBox(); Text teaBreakText = new Text(largeFont, "on break"); teaBreakText.TextAlignment = TextAlignment.Center; teaBreakText.Width = win.Width; ListBoxItem teaBreakItem = new ListBoxItem(); teaBreakItem.Child = teaBreakText; listBox.Items.Add(teaBreakItem); Text WarehouseText = new Text(largeFont, "at the warehouse"); WarehouseText.TextAlignment = TextAlignment.Center; WarehouseText.Width = win.Width; ListBoxItem warehouseItem = new ListBoxItem(); warehouseItem.Child = WarehouseText; listBox.Items.Add(warehouseItem); // add Reception and Plant items in the same way listBox.SelectedIndex = 0;                      // select the first item panel.Children.Add(listBox);                    // add to the display Buttons.Focus(listBox);                         // set the button focus 

This code creates a ListBox and adds a ListBoxItem for each of the items that the code can select. The code then adds ListBox to the display panel (in this case a StackPanel), selects the first item on the list, and finally makes the Listbox instance the focus of the buttons. This would result in the display of a list of the items, and the user would be able to move from one item to another using the buttons.

Unfortunately, we have a problem in that the user would not actually be able to tell which of the items they have selected because the ListBox display element does not provide a behavior that highlights the selected item. There is a good reason for this. For the purpose of our application, we have used text items as the child items of the ListItems. However, the child item could be any display type, including images or even complete StackPanels. This means that it is impossible for the ListItem class to provide a behavior that will work in all situations.

Fortunately, it is very easy to provide the selection highlighting by attaching to the event a method that the code fires when the selected item changes.

 listBox.SelectionChanged +=    delegate(Object sender, SelectionChangedEventArgs e) {    int prevIndex = e.PreviousSelectedIndex;    if (prevIndex != -1)    {       ((Text)listBox.Items[prevIndex].Child).ForeColor = Colors.Black;    }    ((Text)listBox.Items[e.SelectedIndex].Child).ForeColor = Colors.Red; }; 

The preceding code creates a delegate that runs when the selection-changed event fires. It changes the color of the selected item to red and the color of the previously selected item to black. Note that because the Child property of a ListBoxItem is a reference to an interface element, we have to cast it to the Text type so that we can set the foreground color property of the text item.

We now have a means by which users of our system can move to a selected item in a ListBox. However, we do not have a means by which to select the item. The ListBox does not provide this behavior. However, it is very easy to create a class that does.

 public class ListBoxWithSelect : ListBox {    protected override void OnButtonDown(ButtonEventArgs e)    {       if (e.Button == Button.Select)       {          Debug.Print("Select Pressed");       }       else       {          base.OnButtonDown(e);       }    } } 

The class ListBoxWithSelect is an extension of the ListBox class. It can do everything that a ListBox can do, and so we can use it in our programs exactly as we would a ListBox. However, we have overridden the behavior of the OnButtonDown method. This is the method called when the display element has the input focus and the user presses a button. If the button is the Select button, we want to handle this specially; otherwise, we want the original behavior. The new OnButtonDown method checks which button has been pressed and prints the message if it is the Select button. Otherwise, it calls the OnButtonDown method in the base class, which means that the display element continues to work as before.