Disegnare un Button contenente un'icona e un testo mediante la DrawingArea

Molte volte si ha la necessità di posizionare immagine e testo al centro - o in altre posizioni - in un Button. Non è possibile, però, ottenere questo effetto con le risorse della Classe Button. Gambas consente tale possibilità, che mostriamo di seguito, utilizzando come base una DrawingArea e il Metodo ".PaintButton()" della Classe "Style".
Ovviamente gli Eventi disponibili, da usare per il "Button" disegnato nell'apposita "DrawingArea", sono quelli previsti per tale medesima "DrawingArea".

Uso del Metodo ".PaintButton()" della Classe "Style" e della Classe "Paint"

Questa modalità prevede all'interno dell'Evento "_Draw()" della "DrawingArea" (ove sarà disegnato il "Button") l'uso del Metodo ".PaintButton()" della Classe "Style" per disegnare il "Button", nonché la Classe "Paint" per scrivere dentro il "Button" o farvi apparire una immagine.

Mostriamo un semplice esempio:

Private da As DrawingArea
Private bo As Boolean


Public Sub Form_Open()
 
 With da = New DrawingArea(Me) As "DrawingArea1"
   .X = 200
   .Y = 200
   .W = 100
   .H = 80
 End With
  
End


Public Sub DrawingArea1_Draw()
 
 Dim pc As Picture
 Dim testo As String
 
 pc = Stock["32/monitor"]
 testo = "Testo qualsiasi"

' I valori del 3° e del 4° argomento del Metodo "Style.PaintButton()" devono essere uguali alle dimensioni della "DrawingArea" ove il "Button" sarà disegnato:
 Style.PaintButton(0, 0, da.W, da.H, bo, 0, False)

 With Paint
   .DrawPicture(pc, (.W - pc.W) / 2, 10)
   .DrawText(testo, (.W - .Font.TextWidth(testo)) / 2, 50)
 End With
 
 bo = Not bo
 
End


Public Sub DrawingArea1_MouseDown()
  
 Me.Text = "Tasto premuto"
   
 da.Refresh
  
End


Public Sub DrawingArea1_MouseUp()
   
 Me.Text = "Tasto rilasciato"
 
 da.Refresh
  
End

Uso del Metodo ".PaintButton()" della Classe Style e di un'apposita Classe per creare alcuni tasti sul Form

Questo esempio ^{[ nota 1 ]}, è analogo a quello precedente, ma viene utilizzata anche un'apposita Classe specifica, chiamata SquareButton.class, per creare alcuni tasti sul Form e che sarà la seguente:

Export

Inherits UserControl

Public Const _Properties As String = "*,Text,Picture"
Public Const _DefaultEvent As String = "Click"
Public Const _DefaultSize As String = "8,8"
Public Const _Similar As String = "Button"

Event Click

Property Picture As Picture
Property Text As String

Private $hPicture As Picture
Private $sText As String
Private $hDA As DrawingArea
Private $bState As Boolean
 
 
Public Sub _new()
 
  $hDA = New DrawingArea(Me) As "da"  
  Me.Proxy = $hDA  
 
End


Private Function Picture_Read() As Picture
 
  Return $hPicture
  
End


Private Sub Picture_Write(Value As Picture)
 
  $hPicture = Value
 
End


Private Function Text_Read() As String
 
  Return $sText
 
End


Private Sub Text_Write(Value As String)
 
  $sText = Value
 
End


Public Sub da_Draw()
 
  Dim hImage As New Image
  Dim iFlag As Integer = Style.StateOf(Me)
 
  If Me.W > Me.H Then
    Me.H = Me.W
  Else
    Me.W = Me.H
  Endif
  
  Style.PaintButton(0, 0, $hDA.W, $hDA.H, $bState, iFlag, False)
   
  If $hPicture Then
    hImage = $hPicture.Image.Stretch(Me.W / 2, Me.H / 2)
    If $sText Then      
      Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H / 2) - (hImage.H - (Desktop.Scale)))
      Paint.DrawRichText(Html($sText), 0, 0, Me.W, Me.H + (Me.H / 2), Align.Center)
    Else      
      Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H - hImage.H) / 2)
    Endif  
  Else
    Paint.DrawRichText(Html($sText), 0, 0, Me.W, Me.H, Align.Center)
  Endif
  
End


Public Sub da_MouseDown()
   
  $bState = True
  $hDA.Refresh    
  Raise Click

End


Public Sub da_MouseUp()
   
  $bState = False
  $hDA.Refresh
  
End


Public Sub da_Enter()
 
  $hDA.Refresh
  
End
 
 
Public Sub da_Leave()
 
  $hDA.Refresh
  
End


Public Sub da_GotFocus()
 
  $hDA.Refresh
  
End


Public Sub da_LostFocus()
 
  $hDA.Refresh
   
End

Tale codice genera nella casella degli oggetti dell'IDE un nuovo widget, chiamato SquareButton.

 Nota: Se non appare il nuovo componente provare ad agire sul menu Progetto > Compila tutto

Il codice presente nella Classe principale FMain.class sarà, invece, il seguente:

 Public Sub Form_Open()
 
   Dim hSpring As Spring
   Dim hPan As HBox
   Dim hButton As SquareButton
   
   Me.Arrangement = Arrange.Vertical
   Me.Margin = True
   hSpring = New Spring(Me)
   hPan = New HBox(Me)
   hPan.H = 64
   hPan.Spacing = True  
   hSpring = New Spring(hPan)
   hButton = New SquareButton(hPan) As "Button1"
   With hButton
     .Font = Font["Arial,12,Bold"]
     .Foreground = Color.Green
     .Text = "Print"
     .Picture = Picture["icon:/64/printer"]
   End With
   hButton = New SquareButton(hPan) As "Button2"
   With hButton
     .Font = Font["Arial,12,Bold"]
     .Foreground = Color.DarkMagenta
     .Text = "Testo   Tre   Righe"
   End With
 
 End

 
Public Sub Button1_Click()
 
   Print "Hai premuto il pulsante Print"
 
 End
 
 
Public Sub Button2_Click()
 
   Print "Hai premuto il pulsante con il Testo Tre righe"
 
 End

Avviando il programma la finestra dovrebbe mostrare due pulsanti SquareButton, provare ad agire su di essi per mostrare le scritte in console.

Note

[1] Il codice è stato scritto dal membro Gianluigi del forum www.gambas-it.org .