Szczegółowy widok gry – pop-ups

Odpowiednia prezentacja danych (cześć 3 z 3)

Jedną z kontrolek, którą już wcześniej(przy okazji wpisu o koncie użytkownika) omawiałem jest ContentDialog. Dzisiaj wykorzystamy ją ponownie do dodania formularzy edycji danych o grze.

Design

Podstawowe dwie funkcje, na których zależy użytkownikowi w kontekście pojedynczej gry jest edytowanie jej status w kolekcji oraz logowanie rozgrywek. Obie zrealizujemy za pomocą pop-upów na stronie pojedynczej gry. Dzięki wcześniej stworzonemu stylowi nagłówka możemy zachować spójność wizualną w przypadku tej kontrolki. Działanie obu tych widoków zostało zaprezentowane w tym GIFie.

Slider

Warto zwrócić tu uwagę na jeden drobny fakt powiązany z użyciem Slidera, a mianowicie dodanie pola tekstowego z aktualnie wybraną wartością na suwaku. Jest to bardzo ważne w kontekście UX – pozwala użytkownikowi na szybszą orientację w informacjach.

Ponadto, chcielibyśmy nie konfundować użytkownika i w momencie ustawienia oceny na liście życzeń na wartość zero poinformować go, że będzie to skutkowało brakiem/usunięciem oceny. Dlatego też zamiast zera wyświetlimy none. W tym celu zastosujemy konwerter. Tutaj jednak napotykamy na problem – stosujemy już jeden konwerter do formatowania stringów w tym polu. Tu na pomoc przychodzi ValueConverterGroup [znaleziony na StackOverflow]. Nasz NullConverter może wyglądać tak:

Połączymy go z StringFormatConvert tak:

Zwróćcie uwagę na możliwość zastosowania parametru w konwerterach – bardzo pożyteczna sprawa np. w przypadku lokalizacji aplikacji.

CalendarDatePicker

Największym problem jaki spotkałem implementując te widoki była kontrolka CalendarDatePicker. Dlaczego? Ponieważ w jej przypadku własność Date nie jest typu DependencyProperty i binding typu TwoWay nie działa poprawnie. Dzięki mechanizmowi x:Bind, który umozliwia podpinanie funkcji pod wydarzenia możemy szybko temu zaradzić:

To wszystko na dziś. Następny w kolejce – widok i kod ustawień aplikacji.

Autor: Paweł Rzepiński

Dev-wannabe, pasjonat gier planszowych i zimowego szusowania

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *