Witam was wszystkich. Dzisiaj pokażę wam jak zrobić swoją własną kontrolkę do toolboxa. Będzie to bardzo prosta kontrolka. Będzie to takie małe wprowadzenie po którym pokażę inne przykłady. Zrobimy sobie taki label który będzie mógł posiadać przezroczyste tło. Jak to teraz wygląda:
Jak tego dokonamy? Otóż wybierzemy sobie obiekt który może posiadać przezroczyste tło, ja wybrałem „Panel” następnie na tym panelu nadrukujemy nasz tekst. Brzmi prosto ale postaramy się o pewne udogodnienia dzięki którym nasz Panel zamieni się bardzo podobny Label :). Otwieramy dwa razy Visual Studio, w jednym oknie będziemy testować naszą kontrolkę a w drugim ją tworzyć. W pierwszym oknie uruchamiamy normalny projekt.
Dobra, teraz będziemy pracowali na naszej kontrolce. Jak pisałem wcześniej wykorzystamy do tego Panel. Aby włączyć do naszej biblioteki „Panel” wykorzystamy metodę „Inherits” którą wpisuje się po nazwie klasy. Aby móc korzystać z paneli i innych dziedziczonych elementów musimy zaimportować najpierw bibliotekę w której nasze dziedziczone elementy się znajdują. W naszym przypadku „Imports System.Windows.Forms”.
Jak widzicie nic mi się tutaj nie udało. Aby to naprawić musimy dodać referencje. Klikamy prawym przyciskiem myszy na nasz projekt i wybieramy „Add Reference…”
Po wybraniu tej opcji pokażę się lista elementów które możemy wykorzystać w naszym programie, te które już są załączone mają pododawane fajeczki, nasz element takowej nie ma więc trzeba mu ją dać.:
Klikamy „OK” i zrobione, nasze elementy są gotowe do wykorzystania:
Zmieniły kolor na właściwy to znaczy bez podkreślników. Nasz twór wykorzystuje wszystkie elementy panelu które możemy zablokować albo narzucić użytkownikowi. Zaczynamy od stworzenia konstruktora.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Imports System.Windows.forms Imports System.Drawing Public Class Class1 Inherits Panel 'stała przechowująca nasz kolor Private _kolor As Color = Color.Transparent Public Sub New() 'dzięki tej opcji będziemy mogli ustawić przezroczystość tła naszego panelu SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'narzucamy kolor tła naszego Panelu Me.BackColor = _kolor End Sub End Class |
Jak widać powyżej zaimportowałem jeszcze jedną bibliotekę dzięki której mogłem zainicjować zmienną „Color”. Należy teraz utworzyć nasz plik .dll aby to zrobić wciskamy przycisk „F7” lub w zakładce Build-> Build Solution
Po wykonaniu tej czynności nasz plik .dll powinien utworzyć się w katalogu naszego projektu. Dokładna lokalizacja będzie wypisana w informacji jaką dostaniemy o udanym Buildzie
I w folderze:
Mamy już gotowy plik .dll musimy go teraz dodać do naszego toolboxa, przechodzimy do naszego zwykłego projektu i otwieramy toolbox (ja dodałem sobie nową zakładkę o nazwie „Moja kontrolki” można to zrobić w prosty sposób przyciskając „add Tab”) klikamy prawym przyciskiem myszy w zakładce do której chcemy dodać nowy element i wybieramy „Choose Items…”:
W pierwszej zakładce klikamy przycisk „Browse…” i znajdujemy nasz plik .dll w wyżej wspomnianym katalogu.
Klikamy „Otwórz” , jeśli wszystko poszło pomyślnie nasz element pojawi się na liście z fajeczką i po wciśnięciu „Ok” powinien pojawić się w toolboxie.
Dobra mamy kontrolkę, wrzućmy to na ruszt zobaczymy co się stanie.
Otrzymaliśmy zwykły Panel ale z ustawieniami które zawarliśmy w naszej instrukcji. Zastanawiacie się pewnie po co ta cała heca z otwieraniem dwóch projektów otóż w jednym będziemy tworzyć naszą kontrolkę a w drugim będziemy ją testować, wszystko co zaktualizujemy w jednym projekcie automatycznie zaktualizuje się w drugim. Możecie zrobić sobie test, zmieńcie sobie kolor z transparent na black i zbudujcie projekt (F7) następnie przeciągnijcie swoją kontrolkę na formę a zauważycie, że kolor będzie inny niż poprzednio. Dobra teorie mamy za sobą. Każdy element jeśli ustawimy mu kolor na transparent będzie przezroczysty tylko dla obiektu który jest dla niego typu „Parent”. jak to wygląda w praktyce:
Musimy więc dodać do naszego panelu kwadrat w którym umieścimy nasz tekst, wielkość naszego panelu i jego położenie będziemy mogli określać dowolnie tak jak wielkość wpisanego w niego kwadratu. Musimy najpierw utworzyć metodę która utworzy nam ten kwadra, wygląda ona tak:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Imports System.Windows.forms Imports System.Drawing Public Class Class1 Inherits Panel 'stała przechowująca nasz kolor Private _kolor As Color = Color.Transparent 'określamy nasz obiekt Dim rect As New Rectangle(0, 0, 50, 50) Public Sub New() 'dzięki tej opcji będziemy mogli ustawić przezroczystość tła naszego panelu SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'narzucamy kolor tła naszego Panelu Me.BackColor = _kolor End Sub Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) e.Graphics.DrawRectangle(Pens.Black, rect) End Sub End Class |
Na naszej formie będzie to wyglądać tak:
Teraz musimy mieć możliwość ustawienia położenia naszego kwadratu. Jego wielkością nie będziemy się przejmować ponieważ będzie ona automatycznie dopasowywać się do tekstu w zależności od naszych wyborów, zaraz pokażę wam o co chodzi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
Imports System.Windows.forms Imports System.Drawing Public Class Class1 Inherits Panel 'stała przechowująca nasz kolor Private _kolor As Color = Color.Transparent 'określamy nasz obiekt Dim rect As New Rectangle 'Zmienne dotyczące naszego kwadratu Dim rect_location As Point 'konstruktor Public Sub New() 'dzięki tej opcji będziemy mogli ustawić przezroczystość tła naszego panelu SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'narzucamy kolor tła naszego Panelu Me.BackColor = _kolor 'określamy wstępne wartości rect_location = New Point(0, 0) End Sub Public Overloads Property Lokalizacja_kwadratu() As Point Get Return rect_location End Get Set(value As Point) rect_location = value Refresh() End Set End Property Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) rect.Size = Me.Size rect.Location = rect_location e.Graphics.DrawRectangle(Pens.Black, rect) End Sub End Class |
dzięki tej metodzie będziemy mogli we właściwościach naszego obiektu dowolnie sterować położeniem naszego kwadratu:
Dodajemy teraz tekst:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
Imports System.Windows.forms Imports System.Drawing Public Class Class1 Inherits Panel 'stała przechowująca nasz kolor Private _kolor As Color = Color.Transparent 'określamy nasz obiekt Dim rect As New Rectangle 'Zmienne dotyczące naszego kwadratu Dim rect_location As Point 'zmienne dotycząte tekstu Dim _text As String Dim _Font As Font Dim _text_color As Color 'konstruktor Public Sub New() 'dzięki tej opcji będziemy mogli ustawić przezroczystość tła naszego panelu SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'narzucamy kolor tła naszego Panelu Me.BackColor = _kolor 'określamy wstępne wartości rect_location = New Point(0, 0) _text = "tekst1" _Font = Me.Font _text_color = Color.Black End Sub Public Overloads Property Lokalizacja_kwadratu() As Point Get Return rect_location End Get Set(value As Point) rect_location = value Refresh() End Set End Property Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) rect.Size = Me.Size rect.Location = rect_location e.Graphics.DrawString(_text, _Font, New SolidBrush(_text_color), rect) e.Graphics.DrawRectangle(Pens.Black, rect) End Sub End Class |
Efekt tego działania nie jest jeszcze powalający ale poczekajcie jeszcze chwilę. Wygląda to tak:
Teraz damy możliwość wpisania własnego tekstu przez użytkownika i kilku innych opcji :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
Imports System.Windows.Forms Imports System.Drawing Public Class Class1 Inherits Panel 'stała przechowująca nasz kolor Private _kolor As Color = Color.Transparent 'określamy nasz obiekt Dim rect As New Rectangle 'Zmienne dotyczące naszego kwadratu Dim rect_location As Point 'zmienne dotycząte tekstu Dim _text As String Dim _Font As Font Dim _text_color As Color Dim rect_widoczna_ramka As Boolean 'konstruktor Public Sub New() 'dzięki tej opcji będziemy mogli ustawić przezroczystość tła naszego panelu SetStyle(ControlStyles.SupportsTransparentBackColor, True) 'narzucamy kolor tła naszego Panelu Me.BackColor = _kolor 'określamy wstępne wartości rect_location = New Point(0, 0) _text = "tekst1" _Font = Me.Font _text_color = Color.Black rect_widoczna_ramka = True End Sub Public Overloads Property a_Lokalizacja_kwadratu() As Point Get Return rect_location End Get Set(value As Point) rect_location = value Refresh() End Set End Property Public Overloads Property a_Czcionka_tekstu() As Font Get Return _Font End Get Set(value As Font) _Font = value Refresh() End Set End Property Public Overloads Property a_Tekst() As String Get Return _text End Get Set(value As String) _text = value Refresh() End Set End Property Public Overloads Property a_Kolor_tekstu() As Color Get Return _text_color End Get Set(value As Color) _text_color = value Refresh() End Set End Property Public Overloads Property a_Czy_ramka_ma_byc_widoczna() As Boolean Get Return rect_widoczna_ramka End Get Set(value As Boolean) rect_widoczna_ramka = value Refresh() End Set End Property Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs) rect.Size = Me.Size rect.Location = rect_location e.Graphics.DrawString(_text, _Font, New SolidBrush(_text_color), rect) If rect_widoczna_ramka = True Then e.Graphics.DrawRectangle(Pens.Black, rect) Else e.Graphics.DrawRectangle(Pens.Transparent, rect) End If End Sub End Class |
Do każdej metody dodałem „a_” aby wyświetlały się jako pierwsze. Teraz przejdziemy do utworzenia naszego tekstu.
1. Dodajemy naszą kontrolkę i mniej więcej wyśrodkowujemy tekst:
2. Dodajemy/przenosimy kolejną na tą pierwszą, zmieniamy jej szerokość i ustawiamy ją mniej więcej po środku tej pierwszej:
3. Zmieniamy kolor ramek na transparent i proszę:
Wszystko pięknie wygląda. Dzięki temu, że sami zrobiliśmy tą kontrolkę z łatwością przyjdzie nam jej obsługa. Aby zmienić nazwę kontrolki w toolboxie należy zmienić nazwę klasy z class1 na jakąś nam odpowiadającą. Pełen projekt do pobrania tutaj: Toolbox_control
Jeśli nie udał wam się jakiś krok z początku artykułu lub chcecie zobaczyć jak ja robiłem tą kontrolkę to zapraszam do oglądania filmu poniżej:
1 ping
[…] « Tworzenie własnego elementu do ToolBoxa (tworzenie plików .dll) […]