UFButton-Klasse

Zur Anzeige der Buttons verwende ich ein eigenes UserControl, welches auf die Bedürfnisse des Programms zugeschnitten ist. Was mir wichtig war:

• abgerundete Ecken
• durch Zusammensetzen von einzelnen Buttons eine Button-Gruppe erzeugen. Dazu müssen pro Seite ein voller Rand, ein halber Rand und gar kein Rand konfigurierbar sein.
• Grafik zentriert auf dem Button
• ein oder zwei Texte auf dem Button, die auch dynamisch geändert werden können und automatisch zentriert werden
• Möglichkeit der Nutzung des Buttons als Verlaufsbalken
• einfache Größenänderung des Buttons
• Hintergrundfarbe für inaktiv, gedrückt und gesperrt einzeln einstellbar
• Linienstärke in zwei Stufen umschaltbar für die normale Oberfläche und eine filigranere mit mehr Buttons
• Wiederholfunktion, die bei Festhalten des Buttons nach einstellbarem Timeout mit einstellbarer Wiederholrate eine Funktion ausführt

Funktionsweise der Darstellung

Das Malen des Buttons innerhalb der Klasse funktioniert folgendermaßen: Das eigentliche Bild zur Anzeige setzt sich aus verschiedenen Teilen zusammen. Dieses Zusammensetzen geschieht während der Laufzeit, wenn der Button das erste Mal angezeigt werden soll. In der Klasse enthaltene Einzelgrafiken für die Ecken und Linien für die Seitenteile werden auf einem Image zusammen plaziert. Das angegebene Symbol wird zentriert auf den Button gemalt. Für die Darstellung des inaktiven, des gedrückten und des gesperrten (disabled) Buttons wird jeweils ein Image-Objekt vorberechnet, wobei dann je nach Zustand entsprechend das richtige angezeigt wird. Die Einzelgrafiken für die abgerundeten Ecken sind notwendig, weil im Compact Framework kein Malen von abgerundeten Rechtecken oder Kreisteilen unterstützt wird.

Konfiguration eines Buttons

Zur Konfiguration eines Buttons werden folgende Properties verwendet:

• Borderstyle: Der Button kann mit 6-Pixel-breitem oder 4-Pixel-breitem Rand gezeichnet werden.
• Caption und Caption2 sind die zwei optional anzuzeigenden Texte.
• Connection wird zur Auswahl der mit dem Button assoziierten TCPConnection verwendet.
• Image ist das beidseitig zentrierte optionale Symbol.
• ProgressBarMode und ProgressBarPosition können benutzt werden, wenn ein Verlaufsbalken gezeichnet werden soll.
• RepeatInterval und RepeatIntervalFirst werden zur Konfiguration der Wiederholfunktion verwendet.
• SendString ist der String, der beim Betätigen des Buttons über die verbundene TCPConnection geschickt wird.
• EdgeBitmask gibt an, welche Ecken des Buttons nicht abgerundet sein sollen. Die Bitmaske gibt dies für links-oben, rechts-oben, links-unten, rechts-unten an. Sollen beispielsweise die beiden oberen Ecken abgerundet werden, die unteren beiden dagegen wirklich eckig erscheinen, entspricht das der Bitmaske 0011, oder als Dezimalzahl 3.
• NoLineBitmaskTLRB gibt an, welche Seiten des Buttons ohne Linie gezeichnet werden sollen. Dis Bitmaske gibt dies für Top=oben, Left=links, Right=rechts, Bottom=unten an. Soll beispielsweise unten keine Linie gezeichnet werden, muss die Bitmaske 0001 verwendet werden, welches dem Dezimalwert 1 entspricht.
• ThinLineBitmaskTLRB gibt an, welche Seiten des Buttons schmäler gezeichnet werden sollen. Durch Aneinandersetzen von zwei Buttons mit halber Linienstärke ergibt sich dann z.B. ein zusammengesetzter Up/Down-Schalter. Die Bitmaske wird wiederum in der Reihenfolge Top=oben, Left=links, Right=rechts, Bottom=unten gezählt. Soll unten eine schmale Linie gezeichnet werden, muss die Bitmaske 0001 entsprechend dezimal 1 verwendet werden.

Beispiel einer Oberfläche mit zusammengesetzten Buttons

	EdgeBitmask = 3 NoLineBitmaskTLRB = 1 ThinLineBitmaskTLRB = 0
	EdgeBitmask = 5 NoLineBitmaskTLRB = 2 ThinLineBitmaskTLRB = 0
	EdgeBitmask = 10 NoLineBitmaskTLRB = 4 ThinLineBitmaskTLRB = 0
	EdgeBitmask = 12 NoLineBitmaskTLRB = 8 ThinLineBitmaskTLRB = 0
	EdgeBitmask = 15 NoLineBitmaskTLRB = 0 ThinLineBitmaskTLRB = 0
	EdgeBitmask = 3 NoLineBitmaskTLRB = 0 ThinLineBitmaskTLRB = 1
	EdgeBitmask = 12 NoLineBitmaskTLRB = 0 ThinLineBitmaskTLRB = 8

Die Oberfläche sieht zusammengesetzt folgendermaßen aus (durch Skalierung auf 50% entstanden hier unschöne Pixel, eigentlich ist alles doppelt so groß, da eine 640er Auflösung auf dem Pocket PC verwendet wird):