Archiwista [cz. 3 – Styl GUI]
Posiadam już większość rzeczy potrzebnych do stworzenia interfejsu graficznego. Jak do tej pory zdecydowałem się na dwie czcionki – Lato i Font Awesome, paletę kolorów w odcieniu niebieskiego, język angielski dla całej aplikacji oraz wstępny wygląd. Czas połączyć te wszystkie rzeczy i zabrać się za implementację aplikacji. Aplikację napiszę wykorzystując technologię WPF oraz język C#. Moim środowiskiem programistycznym będzie Visual Studio Community 2017.
Słowniki
Pierwszą rzeczą, którą warto zrobić zaczynając jest stworzenie słowników zawierających nasze stałe informacje takie jak czcionki oraz ich rozmiary, kody ikon Font Awesome i kolory z palety. Windows Presentation Foundation pozwala nam na tworzenie Resource Dictionary, z których skorzystam. Zostanie utworzony nowy plik Fonts.xaml zawierający wszelkie informacje na temat czcionek.
|
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 |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Archivist" xmlns:system="clr-namespace:System;assembly=mscorlib"> |
Tak samo zrobię z kolorami i stworzę Colors.xaml.
|
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 |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Archivist"> |
Aby posiadać dostęp do dwóch słowników jednocześnie musimy je połączyć w jeden duży. Można to zrobić w głównym pliku konfiguracyjnym aplikacji App.xaml. Podczas łączenia słowników trzeba pamiętać, aby zachować kolejności ich występowania. Jeżeli używamy informacji ze słownika A w słowniku B, to słownik A musi zostać zadeklarowany nad słownikiem B.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Archivist" StartupUri="MainWindow.xaml"> |
Style
Kolejnym etapem będzie tworzenie styli komponentów, z których w późniejszym czasie będę tworzyć aplikacje. Na samym początku stworzę styl bazowy zmieniający typ czcionki na Lato oraz wielkość liter na Regular. Teraz mogę przypisać styl do wszystkich elementów, z których będę później korzystać. Z biegiem czasu w tym miejscu będzie pojawiać się więcej wpisów do kolejnych elementów interfejsu graficznego.
|
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 |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Archivist" xmlns:system="clr-namespace:System;assembly=mscorlib"> |
Posiadając już styl bazowy mogę teraz stworzyć styl dla przycisku posiadającego ikonę Font Awesome. Napiszę całkowicie nowy wygląd pasujący do całej aplikacji, tak jak zostało to zaplanowane. Aby tego dokonać muszę pierw wyczyścić styl przycisku. Ustawiam tło na odpowiadający mi kolor, ramkę na 0 pikseli oraz tworzę własną logikę wyzwalaczy.
|
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 |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Archivist"> |
Cały kod aplikacji można zobaczyć na moim koncie github /kkolodziejczak/Archivist
![Archiwista [cz. 1 - Planowanie]](https://i0.wp.com/kkolodziejczak.net/wp-content/uploads/2017/07/Featured_Image-2.png?resize=143%2C150&ssl=1 "Archiwista [cz. 1 - Planowanie]")
![Archiwista [cz. 2 - Projekt GUI]](https://i0.wp.com/kkolodziejczak.net/wp-content/uploads/2017/07/Featured_Image.png?resize=143%2C150&ssl=1 "Archiwista [cz. 2 - Projekt GUI]")
![Archiwista [cz. 4 - Główny wygląd aplikacji]](https://i0.wp.com/kkolodziejczak.net/wp-content/uploads/2017/08/Featured_Image-2.png?resize=143%2C150&ssl=1 "Archiwista [cz. 4 - Główny wygląd aplikacji]")
![Archiwista [cz. 5 - Główny wygląd aplikacji cd.]](https://i2.wp.com/kkolodziejczak.net/wp-content/uploads/2017/08/Featured_Image-3.png?resize=143%2C150&ssl=1 "Archiwista [cz. 5 - Główny wygląd aplikacji cd.]")