Jarosław Kuchta Podstawy Programowania Obiektowego ćwiczenie 10 Podstawy grafiki w WPF
Wprowadzenie W tym ćwiczeniu rozpoczniemy tworzenie gry Wall Demolition. Jest to odmiana gry Blockout. W grze występuje konstrukcja przypominająca mur złożony z kartonów przypominających cegły oraz poruszająca się piłka. Gracz odbija piłkę za pomocą paletki w stronę muru. Piłka uderzając o mur wybija cegły. Jedno uderzenie powoduje przesunięcie cegły o 1/5 jej szerokości. Kilka uderzeń spowoduje wysunięcie cegły z muru i zawalenie się całej konstrukcji muru powyżej wybitej cegły, co powoduje koniec gry. Gracz zdobywa tyle punktów, ile cegieł udało mu się zwalić. Oczywiście w trakcie tego ćwiczenia nie stworzymy całej gry. Zadanie będziemy kontynuować na następnych ćwiczeniach. Zadanie 1. Tworzenie rozwiązania, okno edycji Do rozwiązania użyjemy środowiska WPF. Aby stworzyć rozwiązanie wydaj polecenie Nowy projekt i wybierz szablon WPF Application. W rozwiązaniu pojawi ci się projekt zawierający cztery elementy: 2
Element Properties zawiera właściwości projektu. Nie będziemy jego otwierać. Element References zawiera odwołania do bibliotek i innych projektów. Na razie również nie będziemy jego otwierać. Element App.xaml zawiera główne ustawienia aplikacji. Zazwyczaj nie ma potrzeby jego otwierać. Element MainWindow.xaml jest interesującym nas głównym oknem aplikacji. Biały trójkąt z lewej strony tego elementu pokazuje, że ma on elementy podrzędne. Kliknij ten trójkąt, a rozwinie ci się gałąź pokazująca te elementy. Jak widać główne okno składa się z dwóch plików: pliku MainWindow.xaml definiującego stronę wizualną okna, pliku MainWindow.xaml.cs zawierającego kod sterujący okna. Taki układ nazywa się programowaniem code behind. Strona wizualna jest definiowana w tym przypadku w standardzie XAML. Programista ma możliwość skorzystania z licznych narzędzi ułatwiających graficzne zaprojektowanie strony. Ma też możliwość edycji kodu XAML ręcznie, za pomocą edytora tekstowego. Jeśli spojrzymy na plik MainWindow.xaml w edytorze, to zobaczymy okno edycji podzielone na dwie części. 3
W części górnej okna pokazana jest strona w postaci wizualnej takiej, jak będzie prezentowana dla użytkownika. W części dolnej ta sama strona w postaci tekstowej takiej, jak jest zapisana w pliku XAML. Przyjrzyjmy się środkowemu paskowi oddzielającemu dwie części okna. Pociągając pasek w górę i w dół zmieniamy podział okna tak, że możemy się skupić na edycji wizualnej albo na edycji tekstowej. Kliknięcie na jedną z dwóch zakładek (Design lub XAML) na pasku powoduje przejście do części projektowania wizualnego lub tekstowego. Zresztą wystarczy tylko kliknąć na wybraną część okna, aby zmienić sposób projektowania. Kliknięcie na przycisk [ ] pomiędzy zakładkami powoduje zamianę dwóch części okna miejscami. 4
Spójrzmy jeszcze na grupę trzech przycisków z prawej strony paska podziału. Przycisk lewy [ ] i środkowy [ ] powodują zmianę podziału okna na pionowy i poziomy. Przycisk prawy [ ] (lub dolny [ ]w układzie pionowym) powoduje schowanie dolnej (lub prawej) części okna i umożliwia edycję na całym obszarze okna pozostałej części. 5
Jeśli chcemy pomniejszyć lub powiększyć obraz strony wyświetlany w części edycji wizualnej, to wystarczy pociągnąć w dół lub w górę suwak powiększenia wyświetlany z boku. Część edycji tekstowej też można skalować przez kombo wyświetlane na dole tej części. Utworzenie rozwiązania, zapoznanie się z konfiguracją okna edycji i uruchomienie pustej aplikacji jest wystarczające do zaliczenia tego zadania. 6
Zadanie 2. Projektowanie wizualne, właściwości kontrolek Projektowanie wizualne polega na przeciąganiu kontrolek z toolboxa (pudełka z narzędziami) na powierzchnię projektowanego okna i manipulowaniu nimi (przeciąganiu, powiększaniu i pomniejszaniu). Toolbox jest panelem wyświetlanym z reguły z lewej strony Visual Studio. Korzystnie jest wyświetlać go na zakładkę z Solution Expolorerem. W toolboxie wyświetlana jest lista dostępnych kontrolek. Znajdują się wśród nich: TextBox kontrolka do wprowadzania i edycji tekstu, TextBlock kontrolka do wyświetlania tekstu bez edycji, Button przycisk umożliwiający wydanie polecenia, CheckBox kratka wyboru, Label tekst do oznaczania innych kontrolek. Przeciągnięcie kontrolki z listy na obszar edycji powoduje jej wyświetlenie na formularzu w postaci wizualnej i jednocześnie w postaci tekstowej w pliku XAML. Dla naszej gry będziemy potrzebowali kontrolki o nazwie Canvas (płótno). Przeciągnij tę kontrolkę na formularz. Jest ona wyświetlana jako prostokąt w części wizualnej, a w części tekstowej jako znacznik <Canvas />. W znaczniku <Canvas /> wyświetlane są właściwości kontrolki. Są one następujące: Height="100" szerokość kontrolki liczona w pikselach HorizontalAlignment="Left" wyrównanie poziome kontrolki przy zmianie rozmiaru elementu nadrzędnego (w tym wypadku odległość od lewej strony formularza pozostaje bez zmian) 7
Margin="64,79,0,0" marginesy liczone w pikselach kolejno od strony lewej, górnej, prawej i dolnej (w tym wypadku od strony prawej i dolnej jest nieistotne, bo wyrównanie poziome jest do strony lewej, a pionowe jest do strony górnej) Name="canvas1" nazwa kontrolki VerticalAlignment="Top" wyrównanie pionowe kontrolki przy zmianie rozmiaru elementu nadrzędnego (w tym wypadku odległość od górnej strony formularza pozostaje bez zmian) Width="200" szerokość kontrolki liczona w pikselach Uchwyć za brzeg tej kontrolki i pociągnij w do brzegu formularza. Zobacz, jak w postaci tekstowej zmieniają się niektóre właściwości kontrolki. Jeśli nie widzisz wszystkich właściwości w oknie tekstowym, to możesz je podzielić (przez edycję tekstu) na kilka linii. Domyślnie właściwości są wyświetlane w kolejności alfabetycznej, ale możesz przenieść np. nazwę kontrolki na pierwszą pozycję. 8
Właściwości kontrolki możesz też zmienić w panelu właściwości (Properties). W tym celu otwórz menu kontekstowe kontrolki (klikając ją prawym klawiszem myszy) i wybierz opcję Properties. Otworzy się panel właściwości (najczęściej z prawej strony Visual Studio. Panel Properties oferuje trzy widoki właściwości: widok z podziałem na kategorie, widok listy alfabetycznej, widok wg źródła właściwości. Widoki te są przełączane przez trzy przyciski tuż pod zakładką Properties. W tym ćwiczeniu będziesz używać tylko dwóch pierwszych widoków. 9
para znaczników kontrolki para znaczników właściwości para znaczników obiektu Wybierz właściwość Background (tło). Kliknij przycisk rozwijający z prawej strony i ustaw tło gradientowe w odcieniu błękitnym. Zobacz, jak w oknie tekstowym została wpisana właściwość tła. Zauważ, że znak / na końcu znacznika <Canvas /> został usunięty a dodany został znacznik zamykający </Canvas>. Właściwość tła została dodana pomiędzy znacznikiem otwierającym <Canvas > a znacznikiem zamykającym </Canvas>. Zauważ, że niektóre właściwości są reprezentowane przez atrybuty, a inne przez elementy. atrybuty - właściwości elementy - właściwości Zadanie 3. Wyrównywanie kontrolki Uruchom program i zmieniaj rozmiar okna. Zauważ, że rozmiar kontrolki Canvas pozostaje stały. Możesz sprawić, że jej rozmiar będzie się zmieniał wraz ze zmianą rozmiaru okna. W tym celu przejdź do edycji tekstu XAML i: zmień właściwości HorizontalAlignment i VerticalAlignment na Stretch, usuń właściwości Height i Width, zmień właściwość Margin na 12 (równy ze wszystkich stron). Zauważ, że znak > kończący znacznik otwierający musi pozostać. Również cała pozostała część deklaracji pozostaje bez zmian. Teraz uruchom program i zauważ, że rozmiar płótna się zmienia wraz ze zmianą wielkości okna. 10
Zauważ też w panelu właściwości że usunięte z pliku XAML właściwości Height i Width mają teraz wartość auto. Jest to wartość domyślna, która jest przypisywana wówczas, gdy brak jest definicji właściwości w pliku XAML. To że jest to wartość domyślna jest pokazywane w postaci szarego prostokąta po lewej stronie wartości. Zauważ, że przy właściwości Background jest wyświetlany ciemny romb. Zamiast usuwać ręcznie właściwość z okna edycji tekstowej możesz po prostu kliknąć romb, rozwinąć menu kontekstowe i wybrać opcję Reset. Zadanie 4. Rysowanie kształtów na płótnie Przeciągnij elipsę z toolboxa na płótno. Jeśli chcesz, aby to było koło, to musisz się upewnić, że właściwości szerokości (Width) i wysokości (Height) są równe. 11
Teraz ustal właściwości wypełnienia (Fill) i rysowania (Stroke) tak, aby koło zaczęło przypominać piłkę. Wskazówki: Użyj wypełnienia gradientowego jasnego w środku i ciemnego na zewnątrz. Użyj jednego z predefiniowanych kolorów wybieranych z listy. Zmieńmy nazwę obiektu ellipse1 na piłka. Przyda się to nam do zrozumienia operacji w kodzie. Można to zrobić przez edycję kodu XAML Zmieńmy też nazwę obiektu canvas1 na płótno. Zadanie 5. Programowanie code behind Nie zawsze przedstawiony w poprzednim zadaniu sposób rysowania ma zastosowanie. Jeśli chcemy narysować mur składający się z wielu cegieł, to zamiast precyzyjnie umieszczać jedną cegłę nad drugą lepiej jest utworzyć pojedynczą cegłę i napisać powielającą ją wielokrotnie. Najpierw więc utwórzmy kształt cegły na płótnie korzystając z doświadczeń poprzedniego zadania. Będzie to kształt prostokątny (Rectangle), umieszczony na dole płótna. Narysujmy to w pobliżu lewej krawędzi płótna, ale nie zbyt blisko, bo powinniśmy pamiętać, że cegły będą się wysuwać. Kształt ten nazwiemy cegła0, bo będzie służył jako podstawa dla całego muru. 12
Teraz przejdźmy do edycji kodu okna. W edytorze klikniemy zakładkę MainWindow.xaml.cs i zobaczymy szkielet kodu klasy okna. Klasa MainWindow jest oznaczona słowem kluczowym partial. Oznacza to, że jest zdefiniowana częściowo w kodzie, a częściowo w pliku XAML. W kodzie można się odwoływać do elementów zdefiniowanych w XAML i vice versa. 13
Procedura publiczna o nazwie takiej samej jak nazwa klasy (MainWindow) jest konstruktorem klasy. Jest ona wywoływana zawsze przy utworzeniu nowej instancji klasy. Na razie zostawimy ją w spokoju. Utwórzmy w kodzie procedurę, która powieli zdefiniowaną w XAML-u cegłę. Umieśćmy ją za konstruktorem (za nawiasem klamrowym zamykającym konstruktor, ale przed nawiasem klamrowym zamykającym klasę). Nazwijmy ją np. BudujMur. Pamiętajmy, że w C# procedura jest to funkcja typu void. Pierwszym działaniem, które zrobimy, to będzie ustawienie cegły podstawowej (cegła0) dokładnie na dole płótna. Pamiętajmy o tym, że rozmiar płótna może się zmienić, a cegła jest zawsze rysowana w pozycji określonej przez właściwości Left i Top względem lewego i górnego brzegu płótna. Sprawdź, czy tak jest rzeczywiście. Uruchom program i zmieniaj rozmiar okna. Tak więc trzeba ustalić położenie górnego brzegu cegły podstawowej w zależności od wysokości płótna i tej cegły. Normalnie można by napisać: Problem jednak polega na tym, że klasa Rectangle nie ma zdefiniowanej właściwości Top! W XAML-u deklarowaliśmy właściwości Top i Left przez klasę Canvas. W kodzie możemy to zrobić przez metody statyczne SetTop i SetLeft tej klasy, gdzie pierwszym parametrem tych metod jest referencja do dowolnego elementu WPF. Zatem piszemy: Jednak po uruchomieniu programu nie widzimy żadnej różnicy. Sprawdź! Dzieje się tak dlatego, że procedura BudujMur nie jest przypisana do żadnego zdarzenia. Utwórzmy na płótnie przycisk (Button), którego naciśnięcie myszą spowoduje wywołanie procedury. Aby to zrobić, przeciągnij z toolboxa kontrolkę o nazwie Button na płótno i umieść ją w pobliżu górnego lewego rogu płótna. Nazwijmy przycisk NewGameButton, ponieważ jego zadaniem będzie tworzenie nowej gry. Ustalmy właściwość Content tej kontrolki na Nowa gra. Właściwość Content reprezentuje napis wyświetlany wewnątrz przycisku. 14
Teraz utworzymy procedurę obsługi zdarzenia Click dodanego przycisku. Przejdź do panelu właściwości i otwórz zakładkę zdarzeń (Events). Wybierz zdarzenie Click. Kliknij dwukrotnie na puste pole wartości obok nazwy zdarzenia. Zostanie utworzona procedura NewGameButton_Click a jej referencja zostanie przypisana do przycisku. Ty tego przypisania nawet nie zauważysz, bo Visual Studio przełączy się od razu na edycję kodu. Zauważysz jednak szkielet procedury w kodzie. 15
Wpisz wywołanie procedury BudujMur do metody NewGameButton_Click. Uruchom program i zobacz, jak reaguje on na naciśnięcie przycisku Nowa gra. Zauważ, że cegła jest przemieszczana do górnej krawędzi płótna, zamiast do dolnej. Dzieje się tak dlatego, że wysokość i szerokość płótna jest w naszym programie dopasowywana do wysokości i szerokości okna. Dlatego właściwości Height i Width są ustawione na wartość domyślną NaN (Not-A-Number). Jak się wczytamy w dokumentację WPF, to zorientujemy się, że oprócz właściwości Width i Height reprezentujących szerokość i wysokość zaprojektowaną przez programistę, elementy WPF mają też właściwości ActualWidth i ActualHeight, reprezentujące aktualną szerokość i wysokość określoną przez inne elementy. Dlatego w kodzie procedury BudujMur zmienimy dla obiektu płótno odwołanie do właściwości Height na odwołanie do właściwości ActualHeight. Zobacz, jak teraz program reaguje na naciśnięcie przycisku Nowa gra. Dosuwa cegłę podstawową do dołu płótna? Jeśli tak, to możemy kontynuować budowanie muru. Ale to już zadanie na kolejne ćwiczenie 16