Cześć,

Dziś chciałbym przedstawić Wam bardzo ciekawe rozwiązanie, którego dotychczas nie udało mi się znaleźć na żadnych forach, grupach, a nawet Stack Overflow.

O rozwijaniu i zwijaniu elementów, a także innych animacjach kontrolek sama dokumentacja Xamarina jest dość wystarczająca, nie mniej jednak jest jedno ALE, które nie podoba mi się podczas implementacji projektów xamarinowych.

Każdy deweloper Xamarina musi znać działanie wzorca Mvvm (nie będę się tu w niego zagłębiał, ponieważ temat dotyczy czegoś innego), natomiast jest jedna rzecz, która trochę mnie denerwuje… mianowicie wiązanie danych widoku z viewmodelem. W wielu przypadkach jest tak, że część logiki odpowiedzialnej za zmiany na widoku znajduje się typowo w viewmodelu lub w „code behind” strony albo trochę tu  i tu. I to ostatnie mnie najbardziej szczerze mówiąc irytuje w kodzie, dlatego moim zdaniem najlepiej zdecydować się na jedno rozwiązanie (chyba, że już naprawdę nie ma innego wyjścia). Czemu to poruszam? No właśnie m.in. takie sytuacje zachodzą podczas implementacji obrotu, zoomu, zwijania/rozwijania kontrolki.
Ja osobiście staram się nic nie robić w „code behind”, dlatego chcę pokazać, że tego typu rzeczy można zaimplementować po stronie viewmodelu.

 

Na wstępie budowa widoku.

ExpandXAML

To co rzuca się w oczy to dwie rzeczy:

  1. Nadajemy nazwę elementowi, który będzie odpowiedzialny za zwijanie i rozwijanie.
  2. Odwołujemy się do właściwości GestureRecognizers, by z niej można wywołać TapGestureRecognizer odpowiadający za akcję kliknięcia na element widoku (tu oczywiście podpinamy odpowiednio komendę i jako parametr przekazujemy referencję do wcześniej nazwanego elementu).

 

Teraz można przejść do implementacji viewmodelu.

ExpandVM

Jak widać klasa nie jest dość obszerna. Zawiera tylko dwie propercje, gdzie jedna zwraca wartość czy element został rozwinięty lub nie oraz komendę odpowiadającą za akcję kliknięcia na kontrolkę.

Przejdźmy do krótkiego omówienia tego co tutaj się dzieję.

  1. W konstruktorze inicjujemy komendę, której parametrem jest obiekt typu Visual Element oraz podpinamy do niej metodę Expand, która przyjmuje jako parametr StackLayout.
  2. Następnie ustawiamy wysokość oraz flagę IsExpand.

 

Rezultat jest następujący:

ExpandAndCollapse

 

 

Filozofii dużej tu nie ma. Mi osobiście zależało, aby pokazać, że po stronie viewmodelu można takie przypadki śmiało implementować 🙂

 

Reklamy