Archiwista [cz. 4 – Główny wygląd aplikacji]

Kolejnym krokiem będzie stworzenie głównego szablonu aplikacji, który posłuży później do łatwego dodawania nowych funkcjonalności. Pierwszą rzeczą, którą zrobię będzie podzielenie okna na 2 części za pomocą Grid pozwoli mi to uzyskać 2 kolumny dzięki czemu wydziele przestrzeń na menu oraz część główną, w której będą wyświetlane strony aplikacji.

Menu

Posiadając miejsce wydzielone na menu, podzielę je jeszcze na dwie części. Tym razem nie będę tworzył kolumn, a wiersze, które pozwolą mi na rozdzielenie górnych oraz dolnych ikon. Posiadając taki podział pozostaje tylko użyć StackPanel aby wyświetlić przyciski.

Wracając do głównej tabeli podzielonej na dwie kolumny. W miejscu przeznaczonym dla zawartości aplikacji umieszczę obiekt ContentPresenter, który pozwala na wyświetlenie utworzonych wcześniej widoków. Poprzez przypisanie prezenterowi contentu np. User Control zostanie on wyświetlony w miejscu prezentera.

MVVM

Posiadając już zaprojektowany prawie cały interfejs, muszę się zastanowić jak przedstawić poszczególne strony aplikacji za pomocą kodu. Użyję do tego wzorca projektowego Model-View-ViewModel, który doskonale sprawdza się w Windows Presentation Foundation, pozwalając na używanie bardzo mocnego mechanizmu bindowania informacji do naszego widoku w xaml. Aby aplikacja mogła zmieniać strony z informacjami, będę potrzebował ViewModel, który będzie posiadał wszelkie potrzebne informacje do wyświetlenia aplikacji w każdym stanie. W tym celu stworzę typ wyliczeniowy, o nazwie Pages – będzie on zawierał wszystkie strony aplikacji. Dzięki temu klasa opisująca widok strony będzie posiadała tylko jedną zmienną typu Pages mówiącą, jaka strona powinna być teraz wyświetlana.

Binding

Posiadając ViewModel i zmienną, która mówi jaka strona powinna wyświetlona możemy ją przypisać do ContentPresentera za pomocą mechanizmu bindingu jest to bardzo prosta i szybka operacja. Niestety prezenter nie rozpoznaje typu wyliczeniowego Pages i nie wie co ma wyświetlić. W tym celu wykorzystam ValueConverter, konwerter pozwala na zamianę jednego typu danych na inny. W tym celu stworzę ApplicationPageValueConverter, który zamieni zmienną typu Pages na odpowiadający mu obiekt UserControl. W ten oto sposób poprzez zmianę jednej zmiennej, mamy możliwość przechodzenia pomiędzy zakładkami aplikacji.

Teraz pozostało stworzenie stron aplikacji, pierwszą zrobię stronę główną, czyli stronę prezentującą wszystkie projekty oraz możliwość dodania nowego projektu. Podczas tworzenia tej strony podzielę ją na dwie kolumny jak w przypadku całej aplikacji. Tym razem w lewej kolumnie znajdzie się lista projektów, a w prawej formularz umożliwiający dodanie nowego projektu. Dodatkowo formularz zostanie wyposażony w mechanizm walidacji, który pozwoli na sprawdzenie, czy użytkownik podał wymagane informacje już na poziomie interfejsu użytkownika, aby dodać nowy projekt. Efekt można zobaczyć na zdjęciu.

Projekt GUI
Projekt GUI
Główny wygląd aplikacji

Jest to wstępny wygląd ekranu głównego. Z pewnością zmieni się jeszcze nie jeden raz. Kolejnymi rzeczami do zrobienia są pozostałe widoki aplikacji: Settings, Report, Info. Po stworzeniu widoków będę mógł przejść do implementacji logiki aplikacji.

Cały kod aplikacji można zobaczyć na moim koncie github /kkolodziejczak/Archivist

Leave a Reply

Translate »