Kontrolki Silverlight w WP7  

Autor: Marcin Kruszyński

Opublikowano: 2010-12-17

Zasadniczymi elementami interfejsu użytkownika są kontrolki. Tworząc aplikacje w Silverlight na Windows Phone 7, mamy do dyspozycji różne kontrolki – zarówno te podstawowe, znane z desktopowej wersji Silverlight, jak i te zaprojektowane specjalnie z myślą o WP7. W tym artykule dokonamy krótkiego przeglądu komponentów, które dostajemy po instalacji standardowych Windows Phone Developer Tools, jak również w ramach Silverlight Toolkit.

Artykuł jest początkiem cyklu artykułów o kontrolkach Silverlight na Windows Phone 7. W kolejnych artykułach znajdziesz informacje o:

• budowie nowoczesnego interfejsu z użyciem kontrolki Panorama w artykule Panorama,
• organizacji nawigacji między różnymi widokami za pomocą kontrolki Pivot w artykule Pivot.

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

• znał kontrolki Silverlight na Windows Phone 7 dostarczane przez firmę Microsoft,
• wiedział, jakie są różnice między kontrolkami Silverlight for Windows Phone 7 a kontrolkami Silverlight  3 i 4,
• wiedział, jakimi sposobami możesz uczynić swoje aplikacje jak najbardziej zgodnymi z interfejsem Windows Phone 7.

Wprowadzenie

W Windows Phone 7 jednym z dwóch środowisk do budowania aplikacji został Silverlight. Jeśli używałeś wcześniej tej technologii, zorientujesz się, że ogólnie nie ma różnic w korzystaniu z kontrolek i w ich budowaniu. System WP7 rządzi się jednak pewnymi swoimi prawami, posiada własny styl wizualny o nazwie „Metro”, który wyraża pewną filozofię. Wiążą się z tym odpowiednie style graficzne, uwzględniające ustawienia systemowe oraz dedykowane pod tę platformę kontrolki. Mimo nieograniczonej możliwości w stylowaniu w samym Silverlight zaleca się, aby stosowane przez nas kontrolki używały stylów zgodnych z WP7.          

Podstawowe kontrolki

Na platformie Silverlight for Windows Phone 7 mamy wsparcie dla następujących elementów znanych z Silverlight 3: 

• Border,
• Button,
• Canvas,
• CheckBox,
• ContentControl,
• ContentPresenter,
• Control,
• Grid,
• HyperlinkButton,
• Image,
• InkPresenter,
• ListBox,
• MediaElement,
• MultiScaleImage,
• Panel,
• PasswordBox,
• ProgressBar,
• RadioButton,
• ScrollViewer,
• Slider,
• StackPanel,
• TextBlock,
• TextBox,
• UserControl.

Wspierane kontrolki są domyślnie ostylowane zgodnie z interfejsem WP7 (rys. 1) oraz integrują się z ustawieniami wybranymi przez użytkownika telefonu. Więcej na ten temat znajdziesz w artykule Tematy i style.

W niektórych przypadkach spotykamy się jednak z różnicami w funkcjonalności.  

W kontrolkach, tj.ListBox, dodatkowo zaimplementowano przewijanie z użyciem gestów. Wszystkie kontrolki (podobnie jak bardziej podstawowy UIElement) mogą obsługiwać gesty za pomocą odrębnych zdarzeń manipulacji. Więcej na ten temat przeczytasz w artykule Gesty. 

Kontrolka TextBox dodatkowo obsługuje Software Input Panel (SIP), z możliwością określenia rodzaju znaków poprzez propercję InputScope. Więcej na ten temat znajdziesz w artykule InputScope. 

**Rys.1. Domyślny wygląd wybranych kontrolek Silverlight na Windows Phone 7.

Pewne ograniczenia napotykamy w przypadku MediaElement, m.in. nie możemy jednocześnie używać więcej niż jednej instancji tej kontrolki oraz brakuje wsparcia dla VideoBrush. Opis wszystkich różnic znajdziesz w dokumentacji na stronie Media in Silverlight for Windows Phone.

W przypadku nawigacji zamiast kontrolek Frame i Page dostajemy ich odpowiedniki w postaci PhoneApplicationFrame i PhoneApplicationPage. Jest to podyktowane zarówno pewnymi różnicami w nawigacji na WP7, jak i dodatkowymi elementami wyświetlanymi w interfejsie użytkownika, tj. pasek systemowy, pasek aplikacyjny czy obsługa orientacji ekranu. Więcej informacji na temat nawigacji i samych kontrolek z nią związanych znajdziesz w artykule Nawigacja.

Reszta niewymienionych kontrolek z Silverlight 3 nie jest wpierana. W dużej mierze dotyczy to kontrolek z SDK, bardziej złożonych (np. DataGrid, TreeView, TabControl) lub niepasujących do funkcjonalności WP7 (np. OpenFileDialog, SaveFileDialog). Niektóre kontrolki zostały tylko ukryte w pasku narzędziowym przed użytkownikiem, jak ComboBox (trzeba samemu zapewnić ostylowanie zgodne z WP7), czy ScrollBar i Tooltip (niepasujące do dotykowej natury interfejsu). Nie jest jednak zalecane, aby z nich korzystać. Implementację niektórych kontrolek zgodną z interfejsem WP7 możemy odnaleźć w Silverlight for Windows Phone Toolkit (np. DatePicker). Zawsze pozostaje też możliwość stworzenia własnych kontrolek o potrzebnej nam funkcjonalności.

Kontrolka WebBrowser

Kontrolki wprowadzone przez Silverlight 4 w obecnej wersji Silverlight for Windows Phone 7 nie zostały zaimplementowane, z wyjątkiem kontrolki WebBrowser.  Mobilna wersja obsługuje gesty, nie ma ograniczeń dotyczących transformacji, pozwala na nawigację w miejscu, posiada bezpośredni dostęp do Isolated Storage. Nie mamy natomiast wsparcia dla kontrolek ActiveX oraz WebBrowserBrush. Szczegółowy opis kontrolki WebBrowser i czym się ona różni od wersji desktopowej znajdziesz w dokumentacji na stronie WebBrowser Control for Windows Phone.

Kontrolka Map

Dedykowanej wersji na Windows Phone 7 doczekała się także kontrolka Map (rys 2), prezentująca mapę opartą na usłudze Bing Maps. Podobnie jak w wersji desktopowej, możemy m.in. ustawiać różne rodzaje widoków, wyświetlać chmurki z opisami w danych lokalizacjach geograficznych, prezentować wyznaczoną trasę. Istnieją też pewne różnice, z którymi możesz się zapoznać w dokumentacji na stronie Using the Silverlight Map Control on Windows Phone 7.

**Rys.2. Kontrolki Bing Maps, Panorama i Pivot.

Kontrolki Panorama i Pivot

Innowacyjny interfejs użytkownika zgodny z natywnym look and feel w Windows Phone 7 zbudujemy za pomocą kontrolek Panorama i Pivot (rys. 2). Aplikacja typu panorama bazuje na unikalnym sposobie prezentacji kontrolek, danych, usług na canvasie, rozciągającym się horyzontalnie poza granice ekranu. Aplikacja typu pivot  pozwala na szybką nawigację między stronami, na których mogą znaleźć się przefiltrowane dane lub inne widoki. W obu przypadkach zaimplementowana jest obsługa gestów, a zmianie pokazywanej zawartości towarzyszą animacje. Więcej informacji o tych kontrolkach znajdziesz w artykułach Panorama i Pivot. 

Silverlight for Windows Phone Toolkit

Silverlight for Windows Phone Toolkit stanowi cenne uzupełnienie w stosunku do podstawowych narzędzi WP7. Możesz pobrać go z witryny https://www.codeplex.com  w wersji binarnej lub w wersji z kodami źródłowym i przykładami.

Wersja z września 2010 roku zawiera kontrolki, które wyglądają i zachowują się jak ich systemowe odpowiedniki (rys. 3):

• ContextMenu – pojawia się po dłuższym przytrzymaniu, czemu towarzyszą animacje „ugięcia” całego ekranu i wyskoczenia menu,
• DatePicker – po dotknięciu zostajemy przekierowani do strony, na której możemy wybrać dzień, miesiąc i rok, pomagając sobie przewijaniem cyfr,
• TimePicker – zapewnia wybór czasu w sposób analogiczny do wyboru daty w DatePicker,
• ToggleSwitch – przełącznik w postaci suwaka ze stanami On i Off, szczególnie przydatny na stronie z ustawieniami. 

**Rys.3. Kontrolki Toolkit:  ContextMenu, DatePicker, ToggleSwitch.

Dodatkowo w tym wydaniu dostajemy:

• WrapPanel – kontener layoutu zachowujący się jak StackPanel, który w przypadku niewystarczającej ilości miejsca przenosi elementy wizualne do nowych wierszy lub kolumn w zależności od orientacji (taki layout dość często spotykamy w różnych częściach WP7),
• GestureService/GestureListener – serwis pozwalający na obsługę konkretnych gestów, co jest wygodniejsze niż korzystanie ze standardowych zdarzeń manipulacji przy pisaniu własnych kontrolek czy całych aplikacji.

Kontrolki Silverlight a komponenty systemowe

Często chcemy, aby nasze aplikacje jak najbardziej przypominały swoim wyglądem aplikacje systemowe. Poza używanymi gotowymi kontrolkami Silverlight o wyglądzie zgodnym z elementami WP7 możemy też korzystać z niektórych komponentów systemowych. Za pomocą propercji SystemTray.IsVisible na poziomie strony decydujemy o wyświetlaniu pasku stanu. Klasa ApplicationBar, która nie jest kontrolką Silverlight, pozwala nam w zuinifikowany sposób wyświetlać pasek aplikacji z najważniejszymi poleceniami (więcej na ten temat dowiesz się z artykułu ApplicationBar).

Jeśli chcemy zbudować imitacje komponentów systemowych, do których nie otrzymaliśmy predefiniowanych kontrolek, warto przy stylowaniu skorzystać ze zbioru szablonów w Windows Phone Design Templates.

W systemie Windows Phone 7 możemy spotkać się z tzw. tilt effect. Jest to dodatkowy wizualny efekt, jaki powstaje przy dotykaniu niektórych kontrolek – wykonują one wtedy ruch. W dokumentacji na stronie Control Tilt Effect for Windows Phone możemy znaleźć opis z praktycznym przykładem, w jaki sposób zaimplementować takie zachowanie w naszych aplikacjach.

Podsumowanie

W tym artykule poznaliśmy przekrojowo kontrolki Silverlight na Windows Phone 7 – zarówno te podstawowe, jak i bardziej złożone. Umiemy porównać je z kontrolkami Silverlight 3 i 4. Znamy różne sposoby, by nasze aplikacje jak najlepiej upodobnić do interfejsu WP7.     

W kolejnym artykule nauczymy się wykorzystywać możliwości kontrolki Panorama.

---

          

[]

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