The optimisation of the iPhone and the iPad for touch has contributed to it’s success.
One example of this kind of optimisation is “drop down combos”. Rather than sticking with the traditional touch UI of a big combo with a fat scrollbar (that would mess up web pages), they do something completely different. As shown above a neat “roller” control is shown which makes combos a pleasure to use.
On the iPad the experience is more like a traditional combo, but it is not the same.
In the creation of Windows 7 Tablet user interfaces I am sure our users would prefer this kind of experience.
In Winforms it turns out that it’s possible to improve the touch experience markedly using the “OwnerDrawVariable” style on comboboxes.
As you can see, when the combo box looks relatively normal, not taking up much screen real estate….
Yet when it’s clicked, the control becomes bigger, so the normal flick scrolling features of Windows 7 tablet can work better.
The following code sample is a class called TouchCombo that can be used to cause combos to take on the new style. Here’s the code for the sample form:
Public Class Form1 End Sub Private moTouchCombo As New TouchCombo
Private Sub mPopulate(ByVal combo As ComboBox)
combo.Items.Add("Alpha")
combo.Items.Add("Beta")
combo.Items.Add("Gamma")
combo.Items.Add("Delta")
combo.Items.Add("Epsilon")
combo.SelectedIndex = 0
Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
mPopulate(ComboBox1)
mPopulate(ComboBox2)
moTouchCombo.Connect(ComboBox2)
End Sub
End Class
Here’s the code for the TouchCombo class:
Public Class TouchCombo Public Sub Connect(ByVal combo As ComboBox) Private Sub mDrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Dim loCombo As ComboBox = sender Using loBrush = New System.Drawing.SolidBrush(e.ForeColor) ' Draw the normal Background ' If it's not dropped down, make it look normal e.DrawFocusRectangle() End Using End Sub Private Sub mDropDownClosed(ByVal sender As Object, ByVal e As System.EventArgs) Private Sub mDisposed(ByVal sender As Object, ByVal e As System.EventArgs)
combo.DrawMode = DrawMode.OwnerDrawVariable
combo.DropDownHeight = 200
combo.DropDownWidth = combo.Width * 1.5
AddHandler combo.MeasureItem, AddressOf mMeasureItem
AddHandler combo.DrawItem, AddressOf mDrawItem
AddHandler combo.DropDown, AddressOf mDropDown
AddHandler combo.DropDownClosed, AddressOf mDropDownClosed
AddHandler combo.Disposed, AddressOf mDisposed
End Sub
e.DrawBackground()
If Not loCombo.DroppedDown OrElse e.State = DrawItemState.ComboBoxEdit OrElse e.State = DrawItemState.Default Then
e.Graphics.DrawString(loCombo.Items(e.Index), loCombo.Font, loBrush, e.Bounds.X, e.Bounds.Y)
Else
' Otherwise draw it big
Using loFont As New System.Drawing.Font("Arial", 15, FontStyle.Bold)
e.Graphics.DrawString(loCombo.Items(e.Index), loFont, loBrush, e.Bounds.X, e.Bounds.Y)
End Using
End If
Private Sub mMeasureItem(ByVal sender As Object, ByVal e As System.Windows.Forms.MeasureItemEventArgs)
e.ItemHeight = 35
End Sub
Private Sub mDropDown(ByVal sender As Object, ByVal e As System.EventArgs)
Dim loCombo As ComboBox = sender
loCombo.ItemHeight = 35
End Sub
Dim loCombo As ComboBox = sender
loCombo.ItemHeight = 15
End Sub
Dim loCombo As ComboBox = sender
RemoveHandler loCombo.MeasureItem, AddressOf mMeasureItem
RemoveHandler loCombo.DrawItem, AddressOf mDrawItem
RemoveHandler loCombo.DropDown, AddressOf mDropDown
RemoveHandler loCombo.DropDownClosed, AddressOf mDropDownClosed
RemoveHandler loCombo.Disposed, AddressOf mDisposed
End Sub
End Class
Download the project.
