[TUT|VB]Een Control maken

[Crypteq]

Deze tutorial gaat over het maken van een control in Visual Basic. Ik heb deze tutorial extra niet in het "basis" Visual basic tutorial topic gezet omdat dit geen basis is.

Deze tutorial is gemaakt Door BC7 en mag niet op andere site's geplaatst worden zonder mijn toestemming!!!

Niveau: Gemiddeld/hoog

1. Vooraf: Wat is een control

2. Een control maken

3. Control in een DLL (nog niet klaar)

Wat is een control?

Een control is een object die je snel en makkelijk kan gebruiken zonder steeds de codes ervoor te schrijven.

Een control is bijvoorbeeld: Een button, een label, een checkbox enz.

Deze control kan je makkelijk op een form plaatsen en het bij bijvoorbeeld een muisklik een actie laten uitvoeren.

Maar als je nou bijvoorbeeld een soort control wilt, die je vaker wilt gebruiken maar geen zin hebt om steeds te programmeren, dan kan je een control maken die je steeds weer kan gebruiken.

Een control maken

Om een control te maken gebruiken we een usercontrol.

Ga naar Project > Add user control

Nu zul je een dialoog zien, geef je control een naam en klik op Add.

Ik ga een eigen trackbar maken.

Ik noem mijn control: CustomTrackbar.

Nu zul je een soort form zien zonder randen.

Ten eerste ga ik wat opties instellen:

- Backcolor: Transparent

- Background image: Trackbar_Background (Ik kies deze afbeelding: , je kan zelf er ook een kiezen

- Size: 150; 15

Als je het goed gedaan heb zie je dit nu:

Nu voeg ik een afbeelding toe die het proces aangeeft.

Voeg een picturebox toe aan je usercontrol en selecteer een image (afbeelding) (dus niet een backgroundimage!!!)

Ik gebruik de volgende afbeelding: trackbar_normal:

Zet de opties van de picturebox als volgt

- Name: Bar

- Size: 7; 3

- SizeMode: StretchImage

- Location: 0; 5

Als je het goed hebt gedaan zie je het volgende:

Nu zijn we klaar met het design van de onze trackbar. Nu komt het moeilijkste gedeelte: het scripten.

Rechtermuisknop op je usercontrol > View code

De volgende code zul je nu zien:

Public Class CustomTrackbar

End Class

Zet onder Public Class CustomTrackbar het volgende: Inherits UserControl

We willen natuurlijk dat we de waarden makkelijk kunnen oproepen en snel weer kunnen gebruiken daarom maken we 3 waardes aan.

Value, maximal value en BmouseDown:

Public Tvalue As Integer = 0
Public Maxvalue As Integer = 100
Dim BmouseDown As Boolean

Zet dit onder: Inherits UserControl

Even uitleggen...:

Public betekent dat het vanuit waar dan ook aangeroepen kan worden.

Tvalue is de naam die ik die waarde geef, ik geef het de standaardwaarde 0

Hetzelfde geld voor Maxvalue maar dan met de standaardwaarde 100

BmouseDown heb je later nodig in het script. (word later uitgelegd)

Heb je het goed gedaan dan heb je nu de volgende code:

Public Class CustomTrackbar
Inherits UserControl
Public Tvalue As Integer = 0
Public Maxvalue As Integer = 100
Dim BmouseDown As Boolean
End Class

Omdat we niet simpelweg kunnen zeggen dat de trackbar de waarde 100 moet hebben, en dat dat dan klopt, moeten we toch wiskunde erbij gebruiken om de lengte van de picturebox te berekenen.

En je moet het met de muis ook moeten kunnen verslepen.

Dus de volgende functies willen we graag voor onze trackbar:

- Value invoeren

- Value opvragen

- Maximale waarde invoeren

- Maximale waarde opvragen

- Met de muis de waarde veranderen

Eerst gaan we de functie maken voor de waarde in te voeren.

Dus we moeten eerst een sub maken.

Omdat we voor het berekenen van de lengte van de picturebox (de proces balk) de value en de maximale value nodig hebben doen we het volgende:

Public Sub SetValue(ByVal Value As Integer)

End Sub

Uitleg:

Public sub is een sub die je overal kan aanroepen. Ik heb deze sub de naam: SetValue gegeven.

Byval is een waarde die bij het aanroepen van deze sub vereist is.

Dus de waarde: Value moet vermeld worden bij het aanroepen van de deze sub.

Nu moeten we berekenen hoe we de lengte van de picturebox moet zijn aan de hand van de ingevoerde waarden.

Dus als bijvoorbeeld value 50 is ingevoerd dat niet de balk helemaal vol is.

Ik gebruik de volgende berekening:

Dim berekening As Double = Value / Maxvalue
Bar.Size = New Size(Me.Width * berekening, Bar.Size.Height)

Uitleg:

Ik deel de value die bij deze sub ingevoerd moet worden, door de maximum waarde. Dat zet ik in een double die ik de naam berekening heb gegeven.

Daarna zeg ik dat Bar.size (de picturebox) een nieuwe grootte moet krijgen. En dat berekenen we op de volgende manier:

We vermenigvuldigen de lengte van de control met de double berekening (die we net berekend hebben)

Dus even om te kijken of het klopt:

Stel:

De maximum waarde = 100

De lengte van de control (trackbar) = 150

De ingevoerde value = 50

Berekening = 50 / 100 = 0,5

150 * berekening (0,5) = 75

50 is de helft van 100 > 75 is een de helft van 150 Dus de berekening klopt.

Nu we de functie voor het invoeren af hebben, maken we de functie voor het opvragen van de value

Nu moet precies het tegenovergestelde gedaan worden dan bij het invoeren.

Omdat we nu een waarde moeten opvragen maken we geen sub maar een function

Een function die geeft een waarde terug en dat is wat er gedaan moet worden.

We maken eerst de function:

Public Function getvalue()

End Function

Nu moeten we berekenen hoe we aan de hand van de lengte van de picturebox de waarde kunnen achterhalen.

Dat doe ik met de volgende code:

Dim berekening As Double = Me.Width / Bar.Size.Width
Dim value As Integer = Maxvalue / berekening

Uitleg:

Berekening = de breedte delen door de picturebox's breedte

Value = maximale value delen door de berekening

Om de code ook een waarde terug te laten geven zetten we: Return value erachter.

De complete code is dan:

Public Function getvalue()
	Dim berekening As Double = Me.Width / Bar.Size.Width
	Dim value As Integer = Maxvalue / berekening
	Return value
End Function

Nu we met de code voor het achterhalen van de value klaar zijn maken we nu de code voor het instellen en achterhalen van de maximale value.

Dit vereist maar heel weinig code.

We maken eerst een public sub voor het instellen van de maximale waarde.

En zetten daarin: Maxvalue = MaximumValue

Public Sub MaximValue(ByVal MaximumValue As Integer)
	Maxvalue = MaximumValue
End Sub

En voor het achterhalen van de maximale value, natuurlijk een function:

Public Function GetMaxval()
	Return Maxvalue
End Function

Omdat de waarde Maxvalue al bestaat waar de maximale value in staat hoeven we het alleen maar terug te keren.

Nu het instellen en achterhalen van de maximale value hebben gehad, gaan we met een lastiger deel aan de slag: Het veranderen van de waarde met de muis.

Wat moeten we weten/rekening mee houden voor het verslepen van de trackbar:

- De waarde kan alleen veranderd worden als de linkermuisknop van de muis ingedrukt is

- De waarde kan niet meer veranderd worden als de linkermuisknop van de muis niet ingedrukt is.

- De waarde moet veranderen als de linkermuisknop van de muis is ingedrukt en al de cursor van de plaats verschuift.

- Als er geklikt word in de trackbar moet de waarde veranderen.

Ten eerste moeten we controleren of de muis ingedrukt is of niet, Daarvoor hebben we in het begin de boolean BmouseDown gemaakt.

Die gaan we nu gebruiken.

We gaan controleren of de muis is ingedrukt, en als de muis is ingedrukt dan zetten we BmouseDown op true. Dat doen we met:

Private Sub Mouse_Down(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseDown

End sub

Omdat de linkermuisknop is ingedrukt moeten we BmouseDown op true zetten. Ook moet de trackbar value naar de plaats gaan waar ik heb geklikt.

Dat alles is samen:

Private Sub Mouse_Down(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseDown
	BmouseDown = True
	Dim pos As Integer = Convert.ToInt32(e.X)
	Bar.Size = New size(pos, Bar.Size.Height)
End Sub

Uitleg:

BmouseDown word op true gezet zodat we weten dat weten dat de muis is ingedrukt

We maken de waarde pos aan, en we zetten de waarde e.x (dat is de plaats waar je met de muis klikt) om naar een integer.

Dan maken we de trackbar zo breed tot aan geklikt is.

Nu moeten we maken dat de als de linkermuisknop niet meer is ingeklikt is dat BmouseDown weer false word.

Dat kan snel gedaan worden met de volgende code:

Private Sub Mouse_Up(ByVal sender As Object, ByVal e As MouseEventArgs) Handles MyBase.MouseUp
	BmouseDown = False
End Sub

Als de muis beweegt als de linkermuisknop is ingedrukt dan moet de trackbar value ook veranderen.

We kunnen kijken of de muis beweegt met de volgende code:

Private Sub Mouse_Move(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseMove

End Sub

Nu moeten we de volgende dingen erin zetten:

Als de BmouseDown true is:

- De trackbar verschuift

- Kijk of de value niet lager is dan 0 en hoger dan het maximaal.

Dat alles is de volgende code:

Private Sub Mouse_Move(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseMove
	If BmouseDown = True Then
	On Error Resume Next
	Dim pos As Integer = Convert.ToInt32(e.X)
	Bar.Size = New Point(pos, Bar.Size.Height)
	If getvalue() > Maxvalue Then
	SetValue(Maxvalue)
	ElseIf getvalue() < 0 Then
	SetValue(0)
	End If
	End If
End Sub

Uitleg:

Als BmouseDown true is:

On Error Resume Next die zorgt ervoor dat als er toch een error zou ontstaan dat het programma niet vastloopt maar het negeert.

Pos is de muispositie naar een integer

En dan word de picturebox verbreed naar de muis.

Daarna word gecontroleerd of de waarde van de value niet groter of kleiner is dan is toegestaan. Daarvan maken we slim gebruik van de getvalue functie die we eerder gemaakt hebben.

Om nu je eigen gemaakt trackbar te gebruiken moet je het volgende doen:

Build > Build <projectnaam>

Wacht totdat je applicatie opgebouwd is. Je zult nu in de toolbox je eigen control zien:

Je kan je eigen control gewoon naar het form slepen en gebruiken.

Je kan in je script gewoon de functies aanroepen van de trackbar die je zelf gemaakt hebt:

CustomTrackbar1.SetValue(100)
CustomTrackbar1.getvalue()
CustomTrackbar1.MaximValue(100)
CustomTrackbar1.GetMaxval()

Maar misschien is het ook wel leuk om in de properties de standaard waarden in te kunnen vullen, zoals bij de tekst van een button.

Om dat te doen moeten we terug naar de code van de trackbar.

Dan moeten we een public property maken. Ik noem deze property value.

Dit is de hele code om vanuit de properties window een value in te stellen:

Public Property Value() As Integer
	Get
	Return Tvalue
	End Get

	Set(ByVal Value As Integer)
	Tvalue = Value
	SetValue(Value)
	End Set
End Property

Uitleg:

Eerst maken we een public property met de naam value. die we declareren als een integer.

Get

Return Tvalue

End Get

Dit stukje code dat zorgt ervoor dat in het properties window ook de value verandert al je iets intypt.

Set(ByVal Value As Integer)

Tvalue = Value

SetValue(Value)

End Set

Dit stukje code zorgt ervoor dat de value verandert naar wat er in de properties window is ingetypt.

Dit herhalen we ook voor de maximale value:

Public Property MaximumValue() As Integer
	Get
	Return Maxvalue
	End Get

	Set(ByVal MaximumValue As Integer)
	Maxvalue = MaximumValue
	SetValue(MaximumValue)
	End Set
End Property

Nu is je Trackbar helemaal klaar!

Wat het mooie is dat je het in de properties window kan instellen is dat het ook meteen aanpast:

Hier nog een keer de volledige code van deze control:

Public Class CustomTrackbar
Inherits UserControl
Public Tvalue As Integer = 0
Public Maxvalue As Integer = 100
Dim BmouseDown As Boolean

Public Sub SetValue(ByVal Value As Integer)
	Dim berekening As Double = Value / Maxvalue
	Bar.Size = New Size(Me.Width * berekening, Bar.Size.Height)
End Sub
Public Function getvalue()
	Dim berekening As Double = Me.Width / Bar.Size.Width
	Dim value As Integer = Maxvalue / berekening
	Return value
End Function
Public Sub MaximValue(ByVal MaximumValue As Integer)
	Maxvalue = MaximumValue
End Sub
Public Function GetMaxval()
	Return Maxvalue
End Function
Private Sub Mouse_Down(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseDown
	BmouseDown = True
	Dim pos As Integer = Convert.ToInt32(e.X)
	Bar.Size = New Size(pos, Bar.Size.Height)
End Sub
Private Sub Mouse_Up(ByVal sender As Object, ByVal e As MouseEventArgs) Handles MyBase.MouseUp
	BmouseDown = False
End Sub
Private Sub Mouse_Move(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseMove
	If BmouseDown = True Then
	On Error Resume Next
	Dim pos As Integer = Convert.ToInt32(e.X)
	Bar.Size = New Point(pos, Bar.Size.Height)
	If getvalue() > Maxvalue Then
	SetValue(Maxvalue)
	ElseIf getvalue() < 0 Then
	SetValue(0)
	End If
	End If
End Sub
Public Property Value() As Integer
	Get
	Return Tvalue
	End Get

	Set(ByVal Value As Integer)
	Tvalue = Value
	SetValue(Value)
	End Set
End Property
Public Property MaximumValue() As Integer
	Get
	Return Maxvalue
	End Get

	Set(ByVal MaximumValue As Integer)
	Maxvalue = MaximumValue
	SetValue(MaximumValue)
	End Set
End Property
End Class

Dit was de tutorial over hoe je je eigen Control kan maken.

Ik hoop dat je ervan geleerd hebt.

Het project kan ook gedownload worden: Download

Let op! Bij het openen kan form1 een error aangeven, negeer het en ga naar: Build > build <projectnaam>

De error kan komen omdat er bepaalde delen niet geladen konden worden. En nadat het "gerebuild" is dan zijn alle delen weer aanwezig.

Veel Suc6 met programmeren,

BC7

Bewerkt: 1 december 2009 door BC7

[Yeatric]

Nice tut.

[Crypteq]

Nice tut.

Dankje

Verder geen reacties?

Bewerkt: 1 december 2009 door BC7

[hoidatwastimmi]

Nice tut.

Dankje

Verder geen reacties?

nice ik ga het eens proberen op andere pc