Pivot  

Autor: Marcin Kruszyński

Opublikowano: 2011-01-21

Spośród kontrolek Silverlight na Windows Phone 7 możemy wyróżnić takie, które od początku zostały zaprojektowane z myślą o nowoczesnym interfejsie użytkownika Metro. Niewątpliwie kontrolka Pivot, obok Panoramy, stanowi jeden z najbardziej charakterystycznych jego elementów.

Artykuł jest kontynuacją wcześniejszego artykułu Kontrolki Silverlight w WP7, w którym dokonano przekrojowego przeglądu wszystkich kontrolek dostępnych na platformie Windows Phone 7.

Po zapoznaniu się z informacjami zawartymi w tym artykule będziesz:

• znał przeznaczenie kontrolki Pivot, jej architekturę i zachowanie,  
• wiedział, jak jest wspierana w Visual Studio i Expression Blend,
• potrafił zastosować ją w swojej aplikacji,
• znał zalecane praktyki dla tej kontrolki.

Wprowadzenie

Kontrolka Pivot pozwala na wygodną nawigację między stronami lub widokami w aplikacji. Może być przydatna przy filtrowaniu dużych zbiorów danych, przełączaniu się między różnymi widokami na te same dane lub do prezentowania zawartości powiązanej. Spotykamy ją w różnych natywnych aplikacjach systemu Windows Phone 7, np. w ustawieniach, kalendarzu, programie Outlook.  

Pivot jest funkcjonalnym odpowiednikiem TabControl. W tym przypadku również mamy nagłówki, powiązane z odpowiadającą im zawartością. Zawartość, którą widzimy, odpowiada aktualnie wybranemu nagłówkowi. Występują też różnice, bo kontrolka Pivot została zaprojektowana specjalnie dla telefonu z ekranem dotykowym. Umieszcza poszczególne widoki horyzontalnie obok siebie i pozwala na cykliczną nawigację w prawo lub w lewo za pomocą gestów.

Architektura

W kontrolce Pivot możemy wyróżnić dwa zasadnicze elementy (rys.1):

• Headers List Element – element typu PivotHeadersControl, odpowiedzialny za pokazywanie nagłówków dla elementów Pivota. Są one wyświetlane do momentu, gdy przekroczą szerokość kontrolki z aktualnie zaznaczonym nagłówkiem. Gdy zajmują łącznie mniej, nie są powielane.
• Pivot Item Presenter – element typu ItemsPresenter, wizualizujący kolekcję kontrolek PivotItem, które wyświetlają zawartość pojedynczej strony. Zawsze jest widoczna jedna z nich.

PivotItem przypomina typowy element w ItemsControl. Zawiera w sobie ContentPresenter do wyświetlania zawartości. Pivot może zawierać w sobie tylko kontrolki typu PivotItem. Gdy umieścimy w nim inny element, zostanie opakowany w PivotItem.

Przy zmianie wyświetlanego widoku w kontrolce Pivot zachodzi zdarzenie SelectionChanged. Możemy również jawnie wybrać element PivotItem do wyświetlania.

**Rys.1. Budowa kontrolki Pivot.

**Rys.2. Nawigacja między stronami za pomocą gestu pan.

Właściwości

Pivot posiada wbudowaną obsługę różnych gestów do sterowania nawigacją. Wspierane są następujące gesty:

• horyzontalny pan (naciśnięcie i przesuwanie palcem w prawo lub lewo, rys. 2), 
• horyzontalny flick (naciśnięcie i szybkie przesunięcie palcem w prawo lub w lewo),
• tap na nagłówkach (dotknięcie palcem i jego podniesienie),
• nawigacja w hostowanych kontrolkach, np. naciskanie na linki, przewijanie list.

Przesuwaniu w trakcie nawigacji towarzyszą predefiniowane animacje.

Pivot automatycznie obsługuje tematy w Windows Phone 7, podobnie jak większość predefiniowanych kontrolek.

Implementacja

Visual Studio i Expression Blend ułatwiają rozpoczęcie pracy z kontrolką Pivot na kilka sposobów:

• poprzez stworzenie nowego projektu typu Windows Phone Pivot Application – dostajemy wtedy przykładową aplikację ze stroną z kontrolką Pivot, która zawiera kilka predefiniowanych widoków wyświetlających przykładowe dane (możemy to wszystko dowolnie modyfikować),
• poprzez dodanie do istniejącego projektu strony z kontrolką Pivot – z menu kontekstowego projektu w Solution Explorer należy wybrać Add -> New Item -> Windows Phone Pivot Page. Nowo utworzona strona z Pivot zawiera kilka predefiniowanych elementów PivotItem,
• poprzez  przeciągnięcie kontrolki Pivot z paska narzędziowego na daną stronę w aplikacji.

Mamy również ułatwienie przy dodawaniu nowych elementów. Wystarczy zaznaczyć kontrolkę i z menu kontekstowego wybrać Add PivotItem (rys.3).

**Rys.3. Dodawanie nowego PivotItem.

Największym ułatwieniem jest jednak niewątpliwie wyświetlanie w kontrolce Pivot w design-time zawartości aktualnie wybranego elementu PivotItem (rys. 4). Zawartość tę możemy edytować z poziomu designera.

**Rys.4. Nawigacja pomiędzy stronami w design-time.

W Expression Blend z menu kontekstowego aktualnie zaznaczonego PivotItem możemy wykonać na nim pewne akcje, np. zmiana nazwy, usuwanie.

XAML dla przedstawionego na rys.4 Pivota wygląda następująco:

<!--Pivot Control-->



<controls:Pivot Title="PIVOT APPLICATION">



     <!--Pivot item one-->



     <controls:PivotItem Header="all">



          <ListBox ItemsSource="{Binding All}" ItemTemplate="{StaticResource



               ProductTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}"/>         



     </controls:PivotItem>



     <!--Pivot item two-->



     <controls:PivotItem Header="new">



          <ListBox ItemTemplate="{StaticResource ProductTemplate2}"



  ItemsSource="{Binding Recent}"/>         



     </controls:PivotItem>



     <!--Pivot item three-->



     <controls:PivotItem Header="best">



          <ListBox ItemTemplate="{StaticResource ProductTemplate3}"



               ItemsSource="{Binding Best}"/>



     </controls:PivotItem>



</controls:Pivot>

Zawartość elementów PivotItem może być dowolna. Najczęściej umieszczane są w nich listy elementów, tak jak w prezentowanym już przykładzie.

Zalecane praktyki

Przy korzystaniu z kontrolki Pivot zaleca się następujące praktyki:

• wygląd kontrolki nie powinien odbiegać od wyglądu znanego z Metro,
• nie należy jej nadużywać, stosować tylko w uzasadnionych przypadkach,
• powinna być stosowana wyłącznie do wyświetlania elementów lub danych podobnego typu,
• nigdy nie należy umieszczać kontrolki Pivot w kontrolce Panorama czy w innej kontrolce Pivot,
• nie należy jej używać w przepływie zadań,
• ilość wyświetlanych stron powinna być jak najmniejsza (zwykle do 7), przy dużej ich ilości użytkownik może poczuć się zagubiony,
• powinny być usuwane strony, na których nie są wyświetlane żadne dane i nie mogą być dodane w wyniku akcji użytkownika,
• stronom Pivota nie wolno nadpisywać obsługi gestów pan i flick w kierunku horyzontalnym,
• dla zwiększenia wydajności warto ładować wyświetlaną zawartość na żądanie, zamiast ładować wszystko na starcie. Jedną z możliwości jest przerobienie zawartości kontrolek PivotItem na kontrolki UserControl. Możemy wtedy obsłużyć w Pivot zdarzenie LoadingPivotItem, inicjalizując daną UserControl, i ustawić ją jako zawartość odpowiedniej kontrolki PivotItem.

Podsumowanie

W tym artykule poznaliśmy kontrolkę Pivot. Wiemy, w jakich sytuacjach jest przydatna. Znamy jej budowę i właściwości. Wiemy, jak jest wspierana przez narzędzia. Potrafimy w umiejętny sposób zastosować ją w naszych aplikacjach.

---

          

Marcin Kruszyński

Absolwent wydziału EAIE Akademii Górniczo-Hutniczej w Krakowie na kierunku Informatyka. Technologiami Microsoft zajmuje się od sześciu lat. Pracuje w firmie ComArch, gdzie tworzy rozwiązania oparte na platformie .NET i Silverlight. Od dwóch lat jest architektem w centrum badawczo-rozwojowym. Wcześniej zajmował się utrzymaniem oraz rozwojem aplikacji webowych w systemie EDI dla dużych sieci handlowych. Interesuje się wieloma aspektami platformy .NET od pierwszej wersji. Obecnie specjalizuje się w implementacji bogatych interfejsów graficznych aplikacji w oparciu o Silverlight (desktop i mobilne) i WPF, których rozwój śledzi od początku ich istnienia. Sporo uwagi poświęca też platformie WCF RIA Services. Jest pasjonatem nowych trendów i technologii (zwłaszcza w wydaniach CTP i beta), których poznawaniem zajmuje się hobbystycznie i zawodowo. Prelegent grup społecznościowych. Prowadził warsztaty z Silverlight w Krakowie (KGD.NET) i Wrocławiu (PGS). Prezentował tworzenie aplikacji w Silverlight na Windows Phone 7 na Visual Studio 2010 Community Launch we Wrocławiu i Krakowie. Pełnił funkcję eksperta w strefie Ask The Expert (ATE) technologii Windows Phone na konferencji Microsoft Technology Summit (MTS) 2010.

Blogi: http://www.marcinkruszynski.blogspot.com, http://www.martinkruszynski.blogspot.com