Differenze tra le versioni di "Disegnare un Button contenente un'icona e un testo mediante la DrawingArea"
(14 versioni intermedie di 2 utenti non mostrate) | |||
Riga 1: | Riga 1: | ||
− | 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 | + | 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". |
+ | <BR>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 l'uso | + | 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: | Mostriamo un semplice esempio: | ||
Riga 11: | Riga 12: | ||
'''Public''' Sub Form_Open() | '''Public''' Sub Form_Open() | ||
− | With da = New DrawingArea(Me) As "DrawingArea1" | + | With da = New DrawingArea(Me) As "<FONT Color=#B22222>DrawingArea1</font>" |
.X = 200 | .X = 200 | ||
.Y = 200 | .Y = 200 | ||
Riga 28: | Riga 29: | ||
pc = Stock["32/monitor"] | pc = Stock["32/monitor"] | ||
testo = "Testo qualsiasi" | testo = "Testo qualsiasi" | ||
− | + | ||
− | + | <FONT Color=gray>' ''I valori del 3° e del 4° argomento del Metodo "Style.PaintButton()" devono essere uguali alle dimensioni della "DrawingArea" ove il "Button" sarà disegnato:''</font> | |
− | + | <FONT Color=#B22222>Style.PaintButton</font>(0, 0, da.W, da.H, bo, 0, False) | |
− | . | + | |
− | . | + | With <FONT Color=#B22222>Paint</font> |
+ | .DrawPicture(pc, (.W - pc.W) / 2, 10) | ||
+ | .DrawText(testo, (.W - .Font.TextWidth(testo)) / 2, 50) | ||
End With | End With | ||
+ | |||
+ | bo = Not bo | ||
'''End''' | '''End''' | ||
− | + | '''Public''' Sub <FONT Color=#B22222>DrawingArea1_MouseDown()</font> | |
− | '''Public''' Sub DrawingArea1_MouseDown() | ||
− | + | Me.Text = "Tasto premuto" | |
− | + | ||
− | |||
− | |||
da.Refresh | da.Refresh | ||
'''End''' | '''End''' | ||
− | '''Public''' Sub DrawingArea1_MouseUp() | + | '''Public''' Sub <FONT Color=#B22222>DrawingArea1_MouseUp()</font> |
− | + | Me.Text = "Tasto rilasciato" | |
− | |||
da.Refresh | da.Refresh | ||
Riga 58: | Riga 59: | ||
− | =Uso del Metodo ''.PaintButton( )'' della Classe ''Style''= | + | ==Uso del Metodo ''.PaintButton( )'' della Classe ''Style'' e di un'apposita Classe per creare alcuni tasti sul ''Form''== |
− | + | Questo esempio <SUP>[ [[#Note|Nota 1]] ]</sup>, è 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 | Inherits UserControl | ||
Riga 134: | Riga 135: | ||
If $sText Then | If $sText Then | ||
Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H / 2) - (hImage.H - (Desktop.Scale))) | 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 | Else | ||
Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H - hImage.H) / 2) | Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H - hImage.H) / 2) | ||
Endif | Endif | ||
Else | Else | ||
− | + | Paint.DrawRichText(Html($sText), 0, 0, Me.W, Me.H, Align.Center) | |
Endif | Endif | ||
Riga 188: | Riga 189: | ||
'''End''' | '''End''' | ||
− | Tale codice genera nella casella degli oggetti dell'IDE un nuovo ''widget'', chiamato ''SquareButton''. | + | 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: | 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= | =Note= | ||
− | [1 | + | [1] Il codice è stato scritto dal membro [http://www.gambas-it.org/smf/index.php?action=profile;u=1249 Gianluigi] del forum www.gambas-it.org . |
− | |||
− |
Versione attuale delle 22:12, 6 gen 2022
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 .