GUI projektu

W zeszłym tygodniu planowałem posunąć prace z projektem konkursowym mocno do przodu jednak tak się nie stało, nad czym bardzo ubolewam. Na początku zdawało się, że nie będzie z tym problemu, jednak są dni lepsze i grosze. No ale … nie ma co ubolewać tylko wziąć się ostro do pracy. Z powodu braku czasu na kodowanie postanowiłem wziąć się za GUI czyli Graphical User Interface

GUI jak to ugryźć

guiJeden programista powie, że GUI jest niepotrzebne, inny z kolei, że mało istotne, dla kolejnego bardzo istotne. Zatem punkt widzenia zależy od punktu siedzenia. Dla mnie osobiście GUI projektu jest dość istotne, żeby nadać kształt całej aplikacji. Niektóre rzeczy są dostosowywane do wyglądu aplikacji, oczywiście zachowując przy tym pełną funkcjonalność.

Jedyne co od początku wiedziałem to to, że chce mieć boczny panel, w którym zawrę całe menu. Postanowiłem skorzystać z WPFowego TabControla. I tu pojawił się problem ponieważ chciałem, żeby cały boczny pasek był ciemny. Nie tylko jego poszczególne nagłówki ale całość tak jak w panelu administracyjnym wordpressa. O proszę (dla tych co nie wiedzą):

wp_admin

Przekopałem się krecik przez kilka stron i nie znalazłem satysfakcjonującego mnie rozwiązania 🙁 a to pech. Trzeba wykombinować coś innego. Postanowiłem stworzyć Grida składającego się z  dwóch kolumn, z czego jedna to będzie menu, a druga treść poszczególnych modułów. Kod stylu nie wygląda zbyt ładnie:

Masakra co nie? Do refaktoryzacji przejdziemy później. Teraz najważniejsze było aby działało to tak jak powinno. Początkowo wyglądało to następująco; miałem panel a w nim obrazek (ikonka danego menu) oraz tekst. Pod panel podpięte zostało zdarzenie wciśnięcia lewego przycisku myszy. Czy jest (było) to optymalne rozwiązanie? No nie za bardzo. Mnóstwo niepotrzebnego kodu w tzw. back endzie. Dodatkowo kod ten nie był  ślicznie napisany.

BackEnd

Moduły przeładowywały się do ContentPresentera z dodaną animacją. Wybór menu wyglądał następująco:

Patrząc na powyższy kod można zadać sobie pytanie “Dlaczego on nie użył switcha ?? !! No dlaczego ?”. Sam nie wiem :p Jakoś w tamtym momencie mi to nie przeszkadzało i tak mi pasowało. Dodatkowo kod wyglądał znacznie gorzej :p

why

Ok zostawmy póki co estetykę :p Idźmy dalej. Co to za metoda animateContent. Jak sama nazwa wskazuje jest ona po to aby wykonać animację przejścia. Po co powielać kod jak można go zapisać ładniej w jednej metodzie.

Natomiast zmienna _fade to tak naprawdę klasa FadeAnimation zainicjowana w autofacu, która to klasa wykonuje całą operację animacji. Kod (jeszcze) dostępny na GitHub.

Po co tyle tego kodu?

Kurcze dobre pytanie. Przez jakiś czas przypatrywałem się temu kodowi i nie podobało mi się to co widziałem. Mnóstwo zbędnych metod oraz niepotrzebna klasa. Dalej upierałem się przy ciemnym tle i w końcu po dłuższych poszukiwaniach znalazłem jak ostylizować mój TabControl. Później jednak zmieniłem zdanie i pozostałem przy białym tle :p (no cóż faceci też są zmienni hehe). Sporo kodu może zatem wylecieć (jeszcze tam go można spotkać) przez co kod staje się bardziej przejrzysty.  Da się? Da się, tylko trzeba wiedzieć czego się chce. Ja w przypadku tego projektu miałem problem, jednak wykrystalizowałem już sobie jak chcę żeby aplikacja wyglądała.

Zmiany, zmiany, zmiany

Modyfikacje rozpocząłem od wyrzucenia w zasadzie prawie całego kodu XAML i w miejsce Grida wstawiłem TabControl. Skoro chcę mieć i treść i ikonę (Po co mi ta ikona? Tego dowiecie się wkrótce) to samo <TabItem Header=”Menu”></TabItem> nie wystarczy. Jak tu wstawić obrazek? No nie da się. Trzeba zatem osobno zdefiniować nagłówek (header) i treść (content):

No i super o to mi chodziło. Obrazek póki co jest zakomentowany, bo jeszcze nie mam ikonek. Nie trzeba tutaj dodatkowej metody MouseLeftButtonUp czy innych kwiatków, wystarczy przełączać się miedzy nagłówkami i gotowe. Natomiast jeśli chodzi o treść to będzie tu również ContentPresenter, tak samo jak w poprzednim rozwiązaniu. Możecie spytać dlaczego, ano dlatego, że aplikacja będzie podzielona na moduły (stąd osobny folder Modules). Wspomniany przeze mnie komponent będzie dużo łatwiej implementować, a dodatkowo będzie większy porządek w kodzie.

Aktualny wygląd GUI

Interfejs aktualnie wygląda jak na obrazku poniżej. Ma wyróżniać się prostotą, ale również funkcjonalnością. Zacząłem ostatnio robić okno ustawień a w nim pojawiła się zakładka integracja. Cóż to takiego? O tym w następnym wpisie, bo mają tu znajdować się niezwykle interesujące rzeczy. Co prawda zrzut ekranu, już coś zdradza ale jak już pisałem więcej następnym razem.

kopstt GUI

Macie jakieś uwagi, pomysły? Jestem otwarty na wszelki feedback.

  • Pingback: dotnetomaniak.pl()

  • https://www.blog.szacho.me/ szacho

    GUI to ten moment kiedy programista staje się artystą, więc stąd pewnie różne opinie na ten temat. To jest również to, co widzi użytkownik, imo jedna z najważniejszych rzeczy. Fajny post 😉

    PS: Masz białą czcionkę w pozostałych inputach w formularzu do dodawania komentarza i nic nie widać xd

    • http://www.gemustudio.com blaze

      Tak jak mówisz. Aplikację tworzy się dla ludzi i to jak ona wygląda jest dość istotne. Dzięki za opinie 🙂 i za info o czcionce już poprawiłem 🙂