Eine zeitgemäße Benutzeroberfläche kommt kaum mehr ohne grafische Spielereien wie runde Ecken oder Farbverläufe aus. Das iPhone macht es vor - das Bedienen einer Anwendung soll schließlich Spass machen.
Unter Windows Mobile sind solche Effekte allerdings nur schwer zu realisieren. Denn die Standard-Controls des .NET Compact Frameworks reichen leider bei weitem nicht aus, um ansprechende GUIs zu gestalten. Aber es gibt Hilfe von Seiten der MSDN: auf dieser Seite wird beschrieben, wie sich ein Button mit Farbverlauf (Gradient Fill) erstellen lässt.
Gute Resultate erzielt man u.a., wenn man den Farbverlauf von RGB(238, 238, 238) nach RGB(128, 128, 128) laufen lässt (dazu muss man die StartColor und EndColor-Eigenschaften des oben beschriebenen Buttons entsprechend setzen).
Auch die StartOffSet und EndOffSet-Eigenschaften sind sehr hilfreich. Beispielsweise kann man einen schwarzen Button erstellen, der nur auf den obersten 10 Pixeln leicht nach Weiss oder Hellgrau ausläuft. Und schon hat man einen Button im aktuellen HTC-Style
Soweit so gut, doch wie wäre es, wenn dieser Button nun auch noch runde Ecken hätte?
Das ist einfacher zu realisieren, als man denkt.
Die Idee ist, den Rahmen manuell zu zeichnen, und in jeder Ecke des Buttons einen Pixel einzurücken, wodurch der Effekt einer Rundung entsteht.
Natürlich kann man die Rundung der Ecken noch verstärken, indem man noch mehr Pixel einrückt.
Etwas gilt es aber noch zu beachten: damit die Füllung des Buttons nicht über unsere abgerundeten Ecken "hinaussteht", darf nicht das komplette ClientRectangle des Buttons mit der Hintergrundfarbe bzw. dem Gradienten gefüllt werden. Daher müssen die entsprechenden Anweisungen in der Funktion DrawImage noch korrigiert werden. Wir lassen an jeder Seite des Buttons einen 1 Pixel breiten Rand.
Der komplette Code für die Funktion DrawButton sieht dann aus wie folgt:

' Draws the button on the specified Grapics
' in the specified state.
'
' Parameters:
'  gr - The Graphics object on which to draw the button.
'  pressed - If true, the button is drawn in the depressed state.
Overloads Sub DrawButton(ByVal gr As Graphics, ByVal pressed As Boolean)
' Get a Graphics object from the background image.
Dim gr2 As Graphics = Graphics.FromImage(DoubleBufferImage)
'Background color:
If (Not Me.Parent Is Nothing) Then
Dim bgColor As System.Drawing.Color
bgColor = CType(Me.Parent, Control).BackColor
gr2.FillRectangle(New SolidBrush(bgColor), 0, 0, Width, Height)
End If
' Fill solid up until where the gradient fill starts.
If startOffsetValue > 0 Then
If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
If pressed Then
gr2.FillRectangle(New SolidBrush(EndColor), 1, 1, startOffsetValue, Height - 2)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 1, 1, startOffsetValue, Height - 2)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(EndColor), 1, 1, Width - 2, startOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 1, 1, Width - 2, startOffsetValue)
End If
End If
End If
' Draw the gradient fill.
Dim rc As Rectangle = Me.ClientRectangle
If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
rc.X = startOffsetValue
rc.Width = rc.Width - startOffsetValue - endOffsetValue
Else
rc.Y = startOffsetValue
rc.Height = rc.Height - startOffsetValue - endOffsetValue
End If
'Rectangle für GradientFill kleiner machen
Dim rc1 As Rectangle = Me.ClientRectangle
rc1.X = rc1.X + 1
rc1.Y = rc1.Y + 1
rc1.Width = rc1.Width - 2
rc1.Height = rc1.Height - 2
If pressed Then
GradientFill.Fill(gr2, rc1, endColorValue, startColorValue, fillDirectionValue)
Else
GradientFill.Fill(gr2, rc1, startColorValue, endColorValue, fillDirectionValue)
End If
' Fill solid from the end of the gradient fill
' to the edge of the button.
If endOffsetValue > 0 Then
If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
If pressed Then
gr2.FillRectangle(New SolidBrush(StartColor), rc.X + rc.Width, 1, endOffsetValue, Height - 2)
Else
gr2.FillRectangle(New SolidBrush(EndColor), rc.X + rc.Width, 1, endOffsetValue, Height - 2)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(StartColor), 1, rc.Y + rc.Height, Width - 2, endOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(EndColor), 1, rc.Y + rc.Height, Width - 2, endOffsetValue)
End If
End If
End If
' Draw the text.
Dim sf As New StringFormat()
sf.Alignment = StringAlignment.Center
sf.LineAlignment = StringAlignment.Center
gr2.DrawString(Me.Text, Me.Font, New SolidBrush(Me.ForeColor), Me.ClientRectangle, sf)
' Draw the border.
' Need to shrink the width and height by 1 otherwise
' there will be no border on the right or bottom.
rc = Me.ClientRectangle
rc.Width -= 1
rc.Height -= 1
Dim pen As New Pen(SystemColors.WindowFrame)
'gr2.DrawRectangle(pen, rc)
goDrawRectangle(gr2, rc, pen)
' Draw from the background image onto the screen.
gr.DrawImage(DoubleBufferImage, 0, 0)
gr2.Dispose()
End Sub
Private Sub goDrawRectangle(ByVal gr2 As Graphics, ByVal rc As Rectangle, ByVal Pen As Pen)
Dim intHeight As Integer = rc.Height + 1
Dim intWidth As Integer = rc.Width + 1
'linker rand
gr2.DrawLine(Pen, 0, 2, 0, intHeight - 3)
'oben
gr2.DrawLine(Pen, 2, 0, intWidth - 3, 0)
'unten
gr2.DrawLine(Pen, 2, intHeight - 1, intWidth - 3, intHeight - 1)
'rechts
gr2.DrawLine(Pen, intWidth - 1, 2, intWidth - 1, intHeight - 3)
'ecke oben links
gr2.DrawLine(Pen, 0, 2, 2, 0)
'ecke oben rechts
gr2.DrawLine(Pen, intWidth - 3, 0, intWidth - 1, 2)
'ecke unten links
gr2.DrawLine(Pen, 0, intHeight - 3, 2, intHeight - 1)
'ecke unten rechts
gr2.DrawLine(Pen, intWidth - 3, intHeight - 1, intWidth - 1, intHeight - 3)
End Sub

Update 30.11.2009: Mittlerweile steht der Button mit Farbverlauf komplett mit Sourcecode als Projekt in VB.NET zum Download zur Verfügung. Vielen Dank für diesen Beitrag an Filippo.

Ahh, sorry Leute, mein Fehler. Mein Mailprogramm hatte die Mail blockiert, da das ZIP-Archiv eine Exe-Datei enthielt. Danke Filippo für den Hinweis!
Hier der Button mit Farbverlauf als VB.NET Projekt: Download
Vielen Dank an Filippo für den Quellcode!

An Filippo:
Perfekt wäre es, wenn du mir die Datei zusenden könntest (an admin@pda-dev.de), dann lade ich sie direkt hier ins Forum hoch!

Für den "Gedrückt-Effekt" müsste man den ganzen Inhalt des Buttons um einen Pixel nach rechts und unten versetzt zeichnen, wenn die Variable pressed true ist. Ich habe es nicht getestet, aber möglicherweise reicht es aus, einfach die Zeile am Ende

 
' Draw from the background image onto the screen.
gr.DrawImage(DoubleBufferImage, 0, 0)
 

zu ersetzen durch

 
' Draw from the background image onto the screen.
if (pressed) then
gr.DrawImage(DoubleBufferImage, 1, 1)
else
gr.DrawImage(DoubleBufferImage, 0, 0)
end if
 

Vermutlich muss man dann noch die Breite des Buttons anpassen (sprich, um 2 Pixel erweitern), damit der rechte Rand nicht abgeschnitten wird.
Hochladen geht hier direkt im Forum leider nicht, du kannst die Datei(en) aber gerne bei einem anderen Dienst (z.B. Dateien versenden mit filesio) hochladen und hier verlinken.

Okay, man muss noch die Hintergrundfarbe des Buttons an die Hintergrundfarbe des Parent-Controls anpassen. Das habe ich wohl vergessen zu erwähnen
Hier kommt der komplette Code:

 
' Draws the button on the specified Grapics
' in the specified state.
'
' Parameters:
'  gr - The Graphics object on which to draw the button.
'  pressed - If true, the button is drawn in the depressed state.
Overloads Sub DrawButton(ByVal gr As Graphics, ByVal pressed As Boolean)
' Get a Graphics object from the background image.
Dim gr2 As Graphics = Graphics.FromImage(DoubleBufferImage)
'Background color:
If (Not Me.Parent Is Nothing) Then
Dim bgColor As System.Drawing.Color
bgColor = CType(Me.Parent, Control).BackColor
gr2.FillRectangle(New SolidBrush(bgColor), 0, 0, Width, Height)
End If
' Fill solid up until where the gradient fill starts.
If startOffsetValue > 0 Then
If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
If pressed Then
gr2.FillRectangle(New SolidBrush(EndColor), 1, 1, startOffsetValue, Height - 2)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 1, 1, startOffsetValue, Height - 2)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(EndColor), 1, 1, Width - 2, startOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 1, 1, Width - 2, startOffsetValue)
End If
End If
End If
' Draw the gradient fill.
Dim rc As Rectangle = Me.ClientRectangle
If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
rc.X = startOffsetValue
rc.Width = rc.Width - startOffsetValue - endOffsetValue
Else
rc.Y = startOffsetValue
rc.Height = rc.Height - startOffsetValue - endOffsetValue
End If
'Rectangle für GradientFill kleiner machen
Dim rc1 As Rectangle = Me.ClientRectangle
rc1.X = rc1.X + 1
rc1.Y = rc1.Y + 1
rc1.Width = rc1.Width - 2
rc1.Height = rc1.Height - 2
If pressed Then
GradientFill.Fill(gr2, rc1, endColorValue, startColorValue, fillDirectionValue)
Else
GradientFill.Fill(gr2, rc1, startColorValue, endColorValue, fillDirectionValue)
End If
' Fill solid from the end of the gradient fill
' to the edge of the button.
If endOffsetValue > 0 Then
If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
If pressed Then
gr2.FillRectangle(New SolidBrush(StartColor), rc.X + rc.Width, 1, endOffsetValue, Height - 2)
Else
gr2.FillRectangle(New SolidBrush(EndColor), rc.X + rc.Width, 1, endOffsetValue, Height - 2)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(StartColor), 1, rc.Y + rc.Height, Width - 2, endOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(EndColor), 1, rc.Y + rc.Height, Width - 2, endOffsetValue)
End If
End If
End If
' Draw the text.
Dim sf As New StringFormat()
sf.Alignment = StringAlignment.Center
sf.LineAlignment = StringAlignment.Center
gr2.DrawString(Me.Text, Me.Font, New SolidBrush(Me.ForeColor), Me.ClientRectangle, sf)
' Draw the border.
' Need to shrink the width and height by 1 otherwise
' there will be no border on the right or bottom.
rc = Me.ClientRectangle
rc.Width -= 1
rc.Height -= 1
Dim pen As New Pen(SystemColors.WindowFrame)
'gr2.DrawRectangle(pen, rc)
goDrawRectangle(gr2, rc, pen)
' Draw from the background image onto the screen.
gr.DrawImage(DoubleBufferImage, 0, 0)
gr2.Dispose()
End Sub
Private Sub goDrawRectangle(ByVal gr2 As Graphics, ByVal rc As Rectangle, ByVal Pen As Pen)
Dim intHeight As Integer = rc.Height + 1
Dim intWidth As Integer = rc.Width + 1
'linker rand
gr2.DrawLine(Pen, 0, 2, 0, intHeight - 3)
'oben
gr2.DrawLine(Pen, 2, 0, intWidth - 3, 0)
'unten
gr2.DrawLine(Pen, 2, intHeight - 1, intWidth - 3, intHeight - 1)
'rechts
gr2.DrawLine(Pen, intWidth - 1, 2, intWidth - 1, intHeight - 3)
'ecke oben links
gr2.DrawLine(Pen, 0, 2, 2, 0)
'ecke oben rechts
gr2.DrawLine(Pen, intWidth - 3, 0, intWidth - 1, 2)
'ecke unten links
gr2.DrawLine(Pen, 0, intHeight - 3, 2, intHeight - 1)
'ecke unten rechts
gr2.DrawLine(Pen, intWidth - 3, intHeight - 1, intWidth - 1, intHeight - 3)
End Sub
 

Zitat:

---

Original erstellt von: Filippo


hast du dich dabei wenigstens gut erholt?

---

Ja schon, aber seitdem ich wieder hier bin, ist es auch wieder vorbei mit der Erholung
In deinem Code fehlt genau die von dir angesprochene Ersetzung. Die Idee ist es, den Inhalt des Buttons (Rectangle mit fester Farbe "StartColor", Gradient-Rectangle, Rectangle mit fester Farbe "EndColor") zwei Pixel schmaler und niedriger zu zeichnen, als der Button breit ist. Somit bleib der Rand mit den runden Ecken noch sichtbar.
Dazu musst du das Rectangle bei

 
gr2.FillRectangle(New SolidBrush(EndColor), 0, 0, startOffsetValue, Height)
 

nicht an Position 0,0 (linkes oberes Eck) beginnen lassen, sondern bei 1,1 (oben und links ein Pixel Einrückung). Also wird aus dieser Zeile:

 
gr2.FillRectangle(New SolidBrush(EndColor), 1, 1, startOffsetValue, Height)
 

Den gleichen Gedanken musst du für alle anderen Zeilen anwenden, in denen ein Rectangle bzw. der Gradient gezeichnet wird.
Gruß,
Frank

Hey,
sorry für die späte Antwort - ich war im Urlaub.
Hast du ein Gerät mit VGA-Auflösung (also 480x640)? Dann muss die "Einrückung" des Gradienten evtl. 2 Pixel breit sein, also

 
gr2.FillRectangle(New SolidBrush(EndColor), 2, 2, startOffsetValue, Height - 4)
 

Beachte auch, dass die angegebene Codezeile nur ein Beispiel war. Insgesamt gilt: das mit dem Gradienten zu füllende Rechteck muss zwei (oder vier) Pixel kleiner sein als das äußere Rechteck, das den Rahmen darstellt.
Wenn ich mal dazukomme poste ich auch den kompletten Code.
Gruß,
Frank