Ok. Tym razem pobawimy się troszkę gradientami i przy okazji stworzymy kontrolkę dla akcelerometru która będzie wyglądała prawie tak
A dlatego prawie tak bo to już od Was właściwie jak będzie wyglądać
Klikamy w Solution Explorer PPM na kontrolki_avr ( dla jasności wykorzystuję poprzedni projekt żeby mieć kontrolki w jednej bibliotece )
Wybieramy Add --> New Item następnie szukamy template'u User Control i nadajemu mu nazwę
Akcelerometr (ważne żeby nazwa była taka sama)
Jak już otworzy się nam okienko do projektowania kontrolki, to zaglądamy do Properties i zmieniamy rozmiar w Size na 300;250 oraz BorderStyle na FixedSingle.
Następnie wciskamy F7 (aby ukazał nam się kod naszej kontrolki) i idziemy od razu do kontruktora gdzie włączymy podwójne buforowanie, który powinien wyglądać tak po naszych zmianach
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Skoro buforowanie mamy już z głowy, to wypadało by powołać do życia zmienne które będą nam potrzebne do przechowywania kilku parametrów takich jak:
- kolory poszczególnych elementów
- ich rozmiary
- wartości bieżące, minimalne i maksymalne.
w związku z tym ustawiamy się na początku klasy i klepiemy następujący kod
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
No dobrze skoro mamy już nasze zmienne które drą się w niebogłosy że są nie wykorzystane, to czas temu zaradzić, dlatego ustawiamy się pod konstruktorem
i nadpisujemy domyślną metodę OnPaint wpisując następujący kod
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Następnie żeby to wszystko wyglądało jakoś normalnie od razu uruchamiamy AntiAliasing
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
a także nie zapominany o deklaracji kilka zmiennych i metod które umożliwią nam obliczenia oraz malunki
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Ale cóż to pojawiły się nam błędy których nie powinno być. Powód występowania ich jest bardzo prozaiczny, po prostu zapomnieliśmy włączyć przestrzeń nazw dla drawing2D , więc czym prędzej pędzimy na początek pliku i dopisujemy w/w przestrzeń nazw.
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Skoro mamy już tak dużo to musimy się zastanowić jak podzielić nasza kontrolkę żeby uzyskać zamierzony efekt oraz żeby była w pełni skalowalna, ja uznałem że dobrymi wartościami w poziomie będą 80 % szerokości kontrolki dla lewego panelu oraz 20 % dla prawego.
Dodatkowo ponieważ będzie bardzo dużo obliczeń odnoszących się do punktu centralnego w lewym panelu postanowiłem od razu obliczyć jego środek żeby łatwiej mi się pisało kod.
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Po takich wstępnych obliczeniach czas zabrać się za lewy panel i u mnie wygląda to tak
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Generalnie nie ma tutaj nic skomplikowanego bo dodajemy lewy prostokąt do klasy path , następnie ustawiamy mieszanie kolorów dla tego obiektu, przekazujemy rozmiary naszej figury do klasy która odpowiada za utworzenie gradientu, dodajemy do tego wcześniej utworzone mieszanie kolorów następnie podajemy kolory który chcemy mieszać i rysujemy to co nam wyszło i na końcu czyścimy oraz porzucamy nasze klasy aby w przyszłości je wykorzystać do innych niecnych celów. Prawda że proste ?
No może nie do końca, za efekty w różnych formach wypełnienia generalnie odpowiada klasa Blend lub ColorBlend (której użyjemy trochę później), natomiast PathGradientBrush dokonuje pozostałych przekształceń.
Ponieważ gradienty jest lepiej przetestować na podstawie prostych przykładów zachęcam do małych eksperymentów z kodami które znajdziecie w
LinkuNo dobra skoro mamy już lewy panel to wypadałoby "pstryknąć" prawy, co niniejszym czynimy następującym kodem
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
W tajemnicy powiem że niecierpliwi mogą wcisnąć F5
, a tym co się nie chce obrazek poniżej.
Ok. mamy już dwa panel do prezentacji danych, więc wypada się zająć jakimś wyskalowaniem lewego panelu, więc utworzymy celownik bo w końcu ma to być kontrolka dla akcelerometru
Co uczynimy niniejszym kodem
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Generalnie i w tej części nie ma nic nadzwyczajnego, jednak zachęcam do prześledzenia obliczeń , bo dzięki nim właśnie tworzymy w pełni skalowalną kontrolkę.
Specjalnie zrobiłem je tak rozwlekłe żebyście mogli przyswoić sobie pewien tok rozumowania.
no dobra jak już mamy celownik to może warto byłoby stworzyć coś co będzie pokazywać nam bieżące wartości w osiach X oraz Y, tym czymś będzie .....
KROPKANie jest to zwykła kropka uważne oko zauważy że jest to kropka 3D. Efekt taki uzyskamy odpowiednim wycieniowaniem dwóch gradientów oraz późniejszym nałożeniu ich na siebie, co czynimy następującym kodem
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
No i w standardzie, ci co chcą to F5, a reszta obrazek
W tym momencie możemy uznać że lewy panel mamy już skończony więc trzeba się zająć prawym, co czynimy wklepując ten kod
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
w niniejszym kawałku kodu jak już wcześniej wspominałem możemy zaobserwować działanie klasy ColorBlend która się rózni tym od Blend że w niej podajemy jakie kolory mają po sobie następować i na jakich pozycjach natomiast przy Blend podajemy do jakiego wypełnienia mają dojść określone kolory i na jakich pozycjach.
W tym momencie wypadałby powiedzieć że to już koniec , ale niestety tak nie jest
, dlatego że mamy już szatę graficzną naszej kontrolki, ale nie mamy jeszcze możliwości przekazywania parametrów do niej.
Dlatego musimy jeszcze wklepać następujący kod który umożliwi nam zmianę poszczególnych parametrów. Dlatego opuszczamy naszą metodę OnPaint i pod nią umieszczamy kod:
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
Jak zapewne zwróciliście uwagę nie przypisałem własności do określonych kategorii jak to zrobiłem poprzednio, otóż powód jest prozaiczny, nie chciało mi się zresztą wszystkie własności i tak wpadną do kategorii Misc więc będą w jednym miejscu
No i standardowo zamieszczam cały kod
język csharp
Musisz się zalogować, aby zobaczyć kod źródłowy. Tylko zalogowani użytkownicy mogą widzieć kod.
A Projekt i biblioteka będą wieczorem