User Passwort
 Passwort speichern Passwort vergessen?
 
 
 
 Alle Foren
 PDA-Dev :: Windows Mobile
 Windows Mobile - Allgemeines
 Button mit Farbverlauf (Gradient) und runden Ecken
Autor Vorheriges Thema Thema Nächstes Thema  

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt am: 14.07.2009 :  15:18:15 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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.

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
   

Filippo

PDA-Programmierer


25 Beiträge

Erstellt  am: 23.09.2009 :  20:25:03 Uhr  Profil anzeigen  Autor eine Email senden  Besuche Filippo's Homepage  Antwort mit Zitat
Hallo pda-dev,
ich habe versucht dein Beispiel nach zu vollziehen, leider klappt es nicht so ganz mit den runden Ecken bzw. die Ecken werden immer noch mit Gradienten gefüllt.
Kannst du mir den Beispiel richtig stellen?
Ich weis du schreibst man soll die Zeile
Zitat:
gr2.FillRectangle(New SolidBrush(EndColor), 0, 0, startOffsetValue, Height)
mit diese Zeile
Zitat:
gr2.FillRectangle(New SolidBrush(EndColor), 1, 1, startOffsetValue, Height - 2)
austauschen, ich blicke es aber nicht.
        ' 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)
' 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), 0, 0, startOffsetValue, Height)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 0, 0, startOffsetValue, Height)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(EndColor), 0, 0, Width, startOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 0, 0, Width, 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
If pressed Then
GradientFill.Fill(gr2, rc, endColorValue, startColorValue, fillDirectionValue)
Else
GradientFill.Fill(gr2, rc, 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, 0, endOffsetValue, Height)
Else
gr2.FillRectangle(New SolidBrush(EndColor), rc.X + rc.Width, 0, endOffsetValue, Height)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(StartColor), 0, rc.Y + rc.Height, Width, endOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 0, rc.Y + rc.Height, Width, 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
 
Vielen Dank schon Voraus
Ciao,
Filippo
Zum Anfang der Seite

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt  am: 28.09.2009 :  09:30:34 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
Zum Anfang der Seite

Filippo

PDA-Programmierer


25 Beiträge

Erstellt  am: 28.09.2009 :  12:08:48 Uhr  Profil anzeigen  Autor eine Email senden  Besuche Filippo's Homepage  Antwort mit Zitat
Hallo pda-dev,
Zitat:
sorry für die späte Antwort - ich war im Urlaub.

hast du dich dabei wenigstens gut erholt?
Zitat:
Wenn ich mal dazukomme poste ich auch den kompletten Code.

das wär ja super
Zum Anfang der Seite

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt  am: 28.09.2009 :  12:36:02 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
Zum Anfang der Seite

Filippo

PDA-Programmierer


25 Beiträge

Erstellt  am: 28.09.2009 :  20:32:34 Uhr  Profil anzeigen  Autor eine Email senden  Besuche Filippo's Homepage  Antwort mit Zitat
Hallo Frank,
also ich weis nicht wo der Fehler liegt, ich denke ich habe so gemacht wie du es beschrieben hast.
Schau dir bitte mein Code an, vielleicht findest du den Fehler.
Die Zeilen mit "FillRectangle" sind momentan nicht interessant da ich nicht mit "startOffsetValue" und "endOffsetValue" arbeite.
        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)
' 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), 0, 0, startOffsetValue, Height)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 0, 0, startOffsetValue, Height)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(EndColor), 0, 0, Width, startOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(StartColor), 0, 0, Width, 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, 0, endOffsetValue, Height)
Else
gr2.FillRectangle(New SolidBrush(EndColor), rc.X + rc.Width, 0, endOffsetValue, Height)
End If
Else
If pressed Then
gr2.FillRectangle(New SolidBrush(StartColor), 0, rc.Y + rc.Height, Width, endOffsetValue)
Else
gr2.FillRectangle(New SolidBrush(EndColor), 0, rc.Y + rc.Height, Width, 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
 
Zum Anfang der Seite

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt  am: 29.09.2009 :  11:20:39 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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
 

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
Zum Anfang der Seite

Filippo

PDA-Programmierer


25 Beiträge

Erstellt  am: 29.09.2009 :  19:01:13 Uhr  Profil anzeigen  Autor eine Email senden  Besuche Filippo's Homepage  Antwort mit Zitat
Super!
Danke, genau so habe ich es mir vorgestellt.
Weißt du was noch fehlt? Das man auch die möglichkeit hätte(Optional) die Buttons beim anklicken eingedrückt auszusehen zu lassen.
PS. ich möchte, wenn das Projekt fertig ist, den Code komplett hoch laden, weißt du wie ich das machen kann.
Ciao,
Filippo
Zum Anfang der Seite

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt  am: 30.09.2009 :  09:08:51 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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.

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
Zum Anfang der Seite

Filippo

PDA-Programmierer


25 Beiträge

Erstellt  am: 06.10.2009 :  20:59:44 Uhr  Profil anzeigen  Autor eine Email senden  Besuche Filippo's Homepage  Antwort mit Zitat
Hallo pda-dev,
Danke für deine Hilfe. Wie versprochen, stelle ich hier den kompletten Code mit ein Beispiel zu Verfügung.
http://rapidshare.com/files/289512298/ButtonMitFarbverlauf.zip.html
Ciao,
Filippo
Zum Anfang der Seite

AgentBignose

PDA-Programmierer


38 Beiträge

Erstellt  am: 25.11.2009 :  15:09:00 Uhr  Profil anzeigen  Autor eine Email senden  Besuche AgentBignose's Homepage  Antwort mit Zitat
Hey super sache das ganze!
leider ist die datei 10 mal runtergeladen.
kann Sie vieleicht jmd neuhochladen oder mir per mail schicken?
st.staudacher at gmx.de
ganz ganz vielen dank!!
Zum Anfang der Seite

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt  am: 25.11.2009 :  17:18:51 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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!

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
Zum Anfang der Seite

Filippo

PDA-Programmierer


25 Beiträge

Erstellt  am: 30.11.2009 :  12:10:26 Uhr  Profil anzeigen  Autor eine Email senden  Besuche Filippo's Homepage  Antwort mit Zitat
Noch besser wäre wenn du die Datei, die ich dir letzte Woche gesendet habe, hier posten würdest.
Zum Anfang der Seite

pda-dev

pda-dev

Forum Admin


554 Beiträge

Erstellt  am: 30.11.2009 :  12:55:05 Uhr  Profil anzeigen  Autor eine Email senden  Besuche pda-dev's Homepage  Sende pda-dev eine ICQ Message  Antwort mit Zitat
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!

Ein Computer wird nie das tun, was du willst - sondern das, was du programmierst!
Zum Anfang der Seite
  Vorheriges Thema Thema Nächstes Thema  
Springe nach:
 
  Bookmark & Share  
 
 
 
  Tags  
   
 

 



pda-dev.de

Quicklinks: Foren-Übersicht | Developer-News | Suche | Impressum

© just-works! Software

Zum Anfang der Seite

Snitz Forums 2000