vb@rchiv
VB Classic
VB.NET
ADO.NET
VBA
C#
TOP-Angebot: 17 bzw. 24 Entwickler-Vollversionen zum unschlagbaren Preis!  
 vb@rchiv Quick-Search: Suche startenErweiterte Suche starten   RSS-Feeds  | Impressum  | Datenschutz  | vb@rchiv CD Vol.6  | Shop Copyright ©2000-2020
 
zurück
Rubrik: Controls · Sonstiges   |   VB-Versionen: VB4, VB5, VB609.08.02
Runde Flat-Hover-Buttons im Eigenbau

Ein Beispiel das zeigt, wie sich moderne runde Schaltflächen inkl. Hover-Effekt im Eigenbau erstellen lassen.

Autor:   Dieter OtterBewertung:     [ Jetzt bewerten ]Views:  25.203 
www.tools4vb.deSystem:  Win9x, WinNT, Win2k, WinXP, Vista, Win7, Win8, Win10 Beispielprojekt auf CD 

Der CommandButton ist ein häufig benötigtes Control. Viele Einstellmöglichkeiten bietet uns der Standard-Button aber nicht gerade: weder Flatlook, noch Hovereffekt - geschweige denn runde Buttons.

Wie man einen solchen Button aber dennoch erstellen kann, zeigt Ihnen nachfolgender Tipp.

Anstelle des Standard-Buttons nehmen wir eine TextBox mit folgenden Eigenschaften:

  • BoderStyle = 0 (kein Rahmen)
  • Appearence = 0 (2D)
  • MousePointer = 1 (Pfeil)
  • BackColor = Hellgrau (&HE0E0E0)
  • ForeColor = Schwarz

Wird die Maus über die TextBox bewegt, soll der Hintergrund dunkelgrau werden und die Schriftfarbe selbst weiß. Beim Klicken auf den "Button" wird die gesamte TextBox dann noch ein klein wenig verrückt (nach unten und nach rechts), so dass das Niederdrücken der Schaltfläche auch optisch sichtbar wird. Beim Loslassen der Maus wird der Button dann wieder an der usprünglichen Position dargestellt.

Einzig was störend wirkt ist der Textcursor, der autom. erscheint, sobald die Schaltfläche den Fokus bekommt. Das lässt sich aber abstellen, indem wir zusätzlich eine PictureBox auf die Form setzen und den Fokus dann auf die PictureBox "umleiten". Die PictureBox selbst wird im Form_Load Event außerhalb des sichtbaren Formulars geschoben.

Soviel zur Theorie, jetzt zur Praxis.

Erstellen Sie ein neues Projekt und plazieren auf die Form eine TextBox namens MyButton. Setzen Sie Index = 0, um ein Steuerelementfeld für MyButton zu erstellen. Markieren Sie die TextBox (MyButton(0)) und drücken Strg+C. Kopieren Sie über Strg+V jetzt soviele TextBoxen auf die Form, wie Sie Schaltflächen benötigen. Ziehen Sie jetzt noch ein PictureBox-Control auf die Form (Picture1).

Alles andere wird jetzt per Code erledigt.

Option Explicit
' zunächst die benötigten API-Deklarationen
Private Declare Function CreateRoundRectRgn Lib "gdi32" ( _
  ByVal X1 As Long, _
  ByVal Y1 As Long, _
  ByVal X2 As Long, _
  ByVal Y2 As Long, _
  ByVal X3 As Long, _
  ByVal Y3 As Long) As Long
 
Private Declare Function SetWindowRgn Lib "user32" ( _
  ByVal hWnd As Long, _
  ByVal hRgn As Long, _
  ByVal bRedraw As Boolean) As Long
 
Private Declare Function SetCapture Lib "user32" ( _
  ByVal hWnd As Long) As Long
 
Private Declare Function ReleaseCapture Lib "user32" () As Long
 
' Schaltflächen-Farben
Private Const lBackcolor_Normal As Long = &HE0E0E0
Private Const lBackColor_Hover As Long = &H808080
Private Const lForeColor_Normal As Long = &H0
Private Const lForeColor_Hover As Long = &HFFFFFF
Private Sub Form_Load()
  Dim i As Integer
  Dim X As Integer
  Dim Y As Integer
  Dim n As Long
 
  ' alle "Buttons" durchlaufen
  For i = 0 To MyButton.UBound
    With MyButton(i)
      ' Hintergrundfarbe der Form anpassen
      .BackColor = Me.BackColor
 
      ' Kein Border!
      .BorderStyle = 0
      .Appearance = 0
      .Height = 255
 
      ' Text mittig
      .Alignment = 2
 
      ' Hinter-/Vordergrundfarbe
      .BackColor = lBackcolor_Normal
      .ForeColor = lForeColor_Normal
 
      ' Originalposition
      .Tag = .Top
 
      ' Normaler Mauszeiger (kein I)
      .MousePointer = 1
 
      ' Ecken abrunden
      X = .Width / Screen.TwipsPerPixelX
      Y = .Height / Screen.TwipsPerPixelY
      n = 10
      SetWindowRgn .hWnd, _
        CreateRoundRectRgn(0, 0, X, Y, n, n), True
    End With
  Next i
 
  ' zusätzliche PictureBox außerhalb der Form
  ' verschieben
  With Picture1
    .Move -100, -100, 15, 15
  End With
End Sub

Wir realisieren den Hover-Effekt... (siehe auch Workshop "Hyperlinks - Marke Eigenbau")

Private Sub MyButton_MouseDown(Index As Integer, _
  Button As Integer, Shift As Integer, _
  X As Single, Y As Single)
 
  ' Button verschieben
  With MyButton(Index)
    .Move .Left + 15, .Top + 15
  End With
End Sub
 
Private Sub MyButton_MouseUp(Index As Integer, _
  Button As Integer, Shift As Integer, _
  X As Single, Y As Single)
 
  ' Originalposition wiederherstellen
  With MyButton(Index)
    .Move .Left - 15, .Top - 15
  End With
End Sub
 
Private Sub MyButton_MouseMove(Index As Integer, _
  Button As Integer, Shift As Integer, _
  X As Single, Y As Single)
 
  ' Hover-Effekt realisieren
  With MyButton(Index)
    If X >= 0 And Y >= 0 And X <= .Width And Y <= .Height Then
      ' Maus befindet sich über der "Schaltfläche"
      SetCapture .hWnd
      If Button And .Tag = .Top Then
        .Move .Left + 15, .Top + 15
      End If
 
      .ForeColor = lForeColor_Hover
      .BackColor = lBackColor_Hover
    Else
      ' Maus außerhalb
      ReleaseCapture
      If Button And .Top <> .Tag Then
        .Move .Left - 15, .Top - 15
      End If
 
      .ForeColor = lForeColor_Normal
      .BackColor = lBackcolor_Normal
    End If
  End With
End Sub
Private Sub MyButton_GotFocus(Index As Integer)
  ' Bekommt die TextBox (ähmm... unsere Schaltfläche)
  ' den Fokus, wird dieser an die nicht sichtbare PictureBox
  ' umgeleitet, da sonst der I-Cursor zu sehen ist
  Picture1.SetFocus
End Sub

Eine Eigenart gibt es jetzt noch zu beachten. Durch das Umleiten der Mausereignisse an die jeweilige "Schaltfläche" (SetCapture) wird das Click-Event doppelt ausgelöst. Dieses Problem kann jedoch umgegangen werden, indem man nicht das Click-Event verwendet, sondern das MouseUp-Event.

Private Sub MyButton_MouseUp(Index As Integer, _
  Button As Integer, Shift As Integer, _
  X As Single, Y As Single)
 
  With MyButton(Index)
    ' Originalposition wiederherstellen
    .Move .Left - 15, .Top - 15
 
    ' Originalfarben
    .BackColor = lBackcolor_Normal
    .ForeColor = lForeColor_Normal
  End With
 
  ' Klick-Event
  MsgBox "Klick auf " + MyButton(Index).Text    
End Sub

Dieser Tipp wurde bereits 25.203 mal aufgerufen.

Voriger Tipp   |   Zufälliger Tipp   |   Nächster Tipp

Über diesen Tipp im Forum diskutieren
Haben Sie Fragen oder Anregungen zu diesem Tipp, können Sie gerne mit anderen darüber in unserem Forum diskutieren.

Neue Diskussion eröffnen

nach obenzurück


Anzeige

Kauftipp Unser Dauerbrenner!Diesen und auch alle anderen Tipps & Tricks finden Sie auch auf unserer aktuellen vb@rchiv  Vol.6
(einschl. Beispielprojekt!)

Ein absolutes Muss - Geballtes Wissen aus mehr als 8 Jahren vb@rchiv!
- nahezu alle Tipps & Tricks und Workshops mit Beispielprojekten
- Symbol-Galerie mit mehr als 3.200 Icons im modernen Look
Weitere Infos - 4 Entwickler-Vollversionen (u.a. sevFTP für .NET), Online-Update-Funktion u.v.m.
 
   

Druckansicht Druckansicht Copyright ©2000-2020 vb@rchiv Dieter Otter
Alle Rechte vorbehalten.
Microsoft, Windows und Visual Basic sind entweder eingetragene Marken oder Marken der Microsoft Corporation in den USA und/oder anderen Ländern. Weitere auf dieser Homepage aufgeführten Produkt- und Firmennamen können geschützte Marken ihrer jeweiligen Inhaber sein.

Diese Seiten wurden optimiert für eine Bildschirmauflösung von mind. 1280x1024 Pixel