GridView oraz RelativePanel

Czyli UI adaptujące się do rozmiaru ekranu

Korzystając z możliwości jakie daje nam Universal Windows Platform wypuszczenie BoardGameGeek Hub na PC wymaga tylko lekkiej zmiany interfejsu tak aby dostosowywał się on do rozmiaru ekranu.

W tym GIFie możecie zobaczyć jak wyglądał BGG Hub po uruchomieniu na PC. To teraz do dzieła!

GridView

Pierwszym krokiem w ramach przystosowywania interfejsu będzie zamiana ListView na GridView.

Tu szybko pojawia się problem – na telefonie GridView z pojedynczą kolumną nie będzie rozciągnięty na całą szerokość ekranu. Rozwiązanie tego problemu można znaleźć w tym artykule.

RelativePanel

Kolejnym krokiem będzie rozmieszczenie elementów na stronie szczegółowej gry na podstawie wzajemnych relacji zamiast wykorzystania siatki. RelativePanel najłatwiej zrozumieć na przykładach, także polecam zerknąć na ten wpis.

RelativePanel idą w parze z AdaptiveTriggers – po spełnieniu pełnego warunku zmieniane jest x wartości. Czyli taki XAMLowy if.

W BGG Hub są trzy stany interfejsu:

  • Snapped: 0-649 px
  • Narrow: 650-900 px
  • Wide: 900+ px

W zależności od szerokości ekranu odpowiednie bloki będą inaczej rozmieszczone. Wygląda to tak:

Zaś na telefonie tak:

Przykładowa implementacja:

Warto zwrócić uwagę na linie 21 i 22 – wyrównaniu zarówno do lewej jak i prawej strony powoduje rozciągniecie obiektu – horizontal stretch.

Autor: Paweł Rzepiński

Dev-wannabe, pasjonat gier planszowych i zimowego szusowania

Jedna myśl na temat “GridView oraz RelativePanel”

  1. Pingback: dotnetomaniak.pl

Dodaj komentarz

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