BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











WP7 dla programistów. Część 2 - Kontrolki i style

13-02-2011 18:39 | Maciej Grabek
Druga część cyklu poświęcona technologii Windows Phone 7 z punktu widzenia programisty. Artykuł jest poświęcony zagadnieniu stylowania aplikacji oraz kontrolkom dostępnym w WP7

Wstęp

Zapraszam do lektury drugiego artykułu poświęconego nowej platformie mobilnej firmy Microsoft, jaką jest Windows Phone 7. W poprzednim artykule zapoznaliśmy się z podstawami tej technologii. Dziś przyjrzymy się zagadnieniu stylowania aplikacji oraz kontrolkom dostępnym na platformie Windows Phone 7. Artykuł ten ściśle nawiązuje do równoległego cyklu webcastów dostępnych na Channel 9 poświęconych programowaniu na platformie Windows Phone 7.

Odcinek 2

Style

Niezwykle ważny element naszych aplikacji stanowi oprawa graficzna. To dzięki niej użytkownik z chęcią wraca do korzystania z owoców naszej pracy. Z racji na fakt, że możemy pisać przy wykorzystaniu technologii Silverlight, mamy tu dostępne wszystkie narzędzia oferowane przez trzecią wersję tej platformy, a nawet coś ponad. Po krótce przypomnę na czym polegają standardowe techniki stylowania aplikacji w Silverlight. Pierwszym z mechanizmów jest możliwość umieszczania definicji stylu w kodzie określającym wybraną kontrolkę. Mamy zatem możliwość ustawienia styli w sposób widoczny na listingu 1, gdzie dla przycisku modyfikujemy kolor czcionki, tła i obramowania

Listing 1. Stylowanie inline

<Button Content="Inline style button" Height="72" HorizontalAlignment="Left" Margin="0,47,0,0" Name="button1" VerticalAlignment="Top" Width="450"
       Foreground="Blue" Background="#F0F000" BorderBrush="#0F0"/>

Analogicznie działamy dla każdej kontrolki, której chcemy nadać określony wygląd. Nie trudno tu dostrzec analogię do stylowania HTML przy użyciu atrybutu "style". Podobnie jak w jego przypadku, tak i tu nie jest to zalecana praktyka, gdyż z jednej strony powielamy kod, a z drugiej strony zmiany wyglądu mogą okazać się dużo bardziej pracochłonne.

Mechanizm Resources

W celu uniknięcia powtarzania kodu powstał mechanizm resources. Dzięki niemu mamy możliwość zdefiniować określone parametry wyglądu w stylach, a następnie wykorzystywać je w dowolnym miejscu czy to wewnątrz kontenera, czy na stronie, a nawet w obrębie całej aplikacji. Mamy tu również do czynienia z przesłanianiem styli tak jak ma to miejsce w przypadku kaskadowych arkuszy w przypadku HTML(CSS). Na listingu 2 widać zdefiniowany kontener (grid), dla którego w resources definiujemy styl dla przycisku

Listing 2. Style wewnętrzne kontenera

<Grid Margin="18,84,18,445">
	<!-- grid style resource-->
	<Grid.Resources>
		<Style TargetType="Button" x:Key="gridButtonStyle">
			<Setter Property="Foreground" Value="Red"/>
			<Setter Property="Background" Value="LightGreen"/>
		</Style>
	</Grid.Resources>
	<Button Content="Grid style button" Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="button2" VerticalAlignment="Top" Width="414" 
			Style="{StaticResource gridButtonStyle}"/>
</Grid>

Mamy możliwość w analogiczny sposób zdefiniować style na poziomie całego pliku XAML. Widoczne jest to na listingu 3, natomiast samo wykorzystanie tak zdefiniowanego stylu jest analogiczne jak w poprzednim przykładzie.

Listing 3. Style dla strony

<phone:PhoneApplicationPage.Resources>
	<Style TargetType="Button" x:Key="whiteButtonStyle">
		<Setter Property="Foreground" Value="Black"/>
		<Setter Property="Background" Value="White"/>
		<Setter Property="BorderBrush" Value="Blue"/>
	</Style>
</phone:PhoneApplicationPage.Resources>

Trzecim miejscem, gdzie możemy zdefiniować styl jest plik App.xaml, w którym znajduje się sekcja Application.Resources. Wewnątrz niej możemy definiować styl analogicznie jak powyżej. Przykładowy kod widać na listingu 4.

Listing 4. Style dla całej aplikacji w pliku App.xaml

<Applcation.Resources>
    <Style TargetType="Button" x:Key="greenButtonStyle">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Green"/>
        <Setter Property="BorderBrush" Value="YellowGreen"/>
    </Style>
</Application.Resources>

Wynik działania przykładowej aplikacji wykorzystującej zdefiniowane powyżej style prezentowany jest na rysunku 1. Oczywiście dobór kolorów poszczegolnych elementów jest sprawą indywidualną :)

Rysunek 1. Przykładowe style użyte w aplikacji

Wbudowane w Windows Phone 7

Platforma Windows Phone 7 oprócz styli, które możemy sami tworzyć posiada szereg wbudowanych definicji. Do czego mogą one służyć? W pierwszym webcaście widzeliśmy, że istnieje możliwość wybrania schematu kolorystycznego, którego będzie używał nasz telefon. Predefiniowane style pozwalają ujednolicić wygląd naszej aplikacji z kolorystyką ustawioną przez użytkownika. Do dyspozycji mamy wiele predefinioanych wartości, których pełna lista znajduje się tutaj. Jeżeli nie chcemy wpisywać ich ręcznie, to we właściwościach obiektu mamy również możliwość wybrania odpowiedniej wartości z listy widocznej na rysunku 2.

Rysunek 2. Dostępne style

W rezultacie otrzymujemy przycisk, którego kolor napisów zmienia się wraz ze zmianami ustawień kolorystyki na urządzeniu.

Rysunek 3. Style wbudowane

 

Kontrolki

Z racji na fakt, że korzystamy z rozszerzonej wersji Silverlight 3 mamy tu dostępny szereg standardowych kontrolek oraz kontrolki z Silverlight For Windows Phone Toolkit, o którym była mowa wcześniej. Są one widoczne odpowiednio na rysunku 4 i rysunku 5.

Rysunek 4. Standardowe kontrolki


Rysunek 5. Silverlight For Windows Phone Toolkit

Dużo ciekawsze mogą się jednak wydawać kontrolki, które są oferowane tylko przez Windows Phone. Przyjrzyjmy się im zatem bliżej.

Application Bar

W domyślnym szablonie strony na dole kodu XAML jest zakomentowany fragment kodu odpowiedzialnego za dodanie do strony tak zwanego Application Bar, który jest swego rodzaju wysuwanym menu. Mamy możliwość dodać do niego 4 przyciski z ikonami (ApplicationBarIconButton), lub dowolną ilość elementów tekstowych (ApplicationBarMenuItem) - pisząc dowolną rozumiem oczywiście rozsądną ilość, gdyż mamy tu na uwadze wygodę użytkownika. Przykładowy kod takiego paska widoczny jest na listingu 5.

Listing 5. Application bar

<phone:PhoneApplicationPage.ApplicationBar>
	<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.7">
		<shell:ApplicationBarIconButton IconUri="/Images/AddIcon.png" Text="Add"/>
		<shell:ApplicationBarIconButton IconUri="/Images/DeleteIcon.png" Text="Delete"/>        
		<shell:ApplicationBar.MenuItems>
			<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
			<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
		</shell:ApplicationBar.MenuItems>
	</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Po uruchomieniu aplikacji na emulatorze widzimy pasek, który można wysunąć ponad zawartość bieżącej strony. Widać to na rysunku 6.

Rysunek 6. Application Bar

Panorama i Pivot

Obie te kontrolki pozwalają powiększyć przestrzeń dostępną dla naszej aplikacji na pojedynczym pulpicie. Dzięki temu mamy możliwość dużo lepszego dopasowania aplikacji do niewielkiego, w stosunku do np komputerów stacjonarnych, ekranu. Podczas dodawania do aplikacji nowej strony mamy możliwość wybrania szablonów Windows Phone Panorama Page oraz Windows Phone Pivot Page zgodnie z tym co widać na rysunku 7. W związku z tym dodajmy do projektu dwie nowe strony korzystając z obu tych szablonów.

Rysunek 7. Szablony Panorama i Pivot

Kod strony, którą otrzymaliśmy zawiera w sobie element controls:Panorama. Wewnątrz tego kontenera możemy umieszczać jedynie elementy typu controls:PanoramaItem, które jednak są również kontenerami, do których można dodawać dowolne kontrolki. Domyślny kod wygenerowany przez szablon widoczny jest na listingu 6.

Listing 6. Panorama

<controls:Panorama Title="Panorama demo">
	<!--Panorama item one-->
	<controls:PanoramaItem Header="item1">
		<Grid/>
	</controls:PanoramaItem>
	<!--Panorama item two-->
	<controls:PanoramaItem Header="item2">
		<Grid/>
	</controls:PanoramaItem>
</controls:Panorama>

Do panoramy możemy dodawać wiele kontrolek typu PanoramaItem, dzięki czemu mamy możliwość rozszerzenia wielkości "pulpitu" tak, aby nasza aplikacja swobodnie się na nim zmieściła. Po dodaniu tła i przykładowych elementów działająca panorama widoczna jest na rysunku 8.

Rysunek 8. Panorama w akcji

Jeżeli chodzi o kontrolkę pivot, to jest ona bardzo podobna do panoramy, przy czym jej przeznaczenie jest skierowane bardziej w kierunku wyświetlania danych ustrukturyzowanych, bazujących na pewnych powtarzających się elementach. Doskonałym przykładem może tu być na przykład RSS, lub prezentacja informacji pobranych z zewnętrznej usługi.
Po zastosowaniu szablonów i bindowania przykładowych danych (o czym będzie mowa następnym razem) uzyskujemy kod widoczny na listingu 7.

Listing 7. Pivot

<phone:PhoneApplicationPage.Resources>
	<DataTemplate x:Key="SampleHeaderTemplate">
		<StackPanel>
			<TextBlock Text="{Binding Name}" />
		</StackPanel>
	</DataTemplate>
	<DataTemplate x:Key="SingleItemTemplate">
		<TextBlock Text="{Binding Value}" 
			Margin="5,2,5,3" HorizontalAlignment="Left" 
			VerticalAlignment="Bottom" 
			FontSize="40"/>
	</DataTemplate>
	<DataTemplate x:Key="DataContainerTemplate">
		<ListBox ItemsSource="{Binding Items}" 
			ItemTemplate="{StaticResource SingleItemTemplate}" />
	</DataTemplate>
</phone:PhoneApplicationPage.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent">
	<!--Pivot Control-->
	<controls:Pivot Title="Pivot Demo"
		x:Name="PivotControl"
		ItemsSource="{Binding DataItems}" 
		HeaderTemplate="{StaticResource SampleHeaderTemplate}" 
		ItemTemplate="{StaticResource DataContainerTemplate}">
	</controls:Pivot>
</Grid>

Po uruchomieniu tak przygotowanej strony dostajemy w rezultacie wynik widoczny na rysunku 9.

Rysunek 9. Pivot w akcji

Tak naprawdę to obie te kontrolki prezentują bardzo zbliżoną funkcjonalność, zatem zastosowanie Pivota zamiast Panoramy i na odwrót nie skończy się błędem. Jedyne zalecenie to takie, że korzystając z panoramy nie powinno się używać application bar.

Podsumowanie

Tak oto dotarliśmy do do końca tematu. Przypominam, że równolegle z tym cyklem artykułów na Channel 9 jest również publikowana seria webcastów poświęcona Windows Phone 7. Tym samym zapraszam do obejrzenia drugiego z odcinków tym bardziej, że statyczne rysunki nie oddają w pełni zalet korzystania z kontrolek, które dziś omówiłem. Gorąco zachęcam do śledzenia obu serii oraz w razie pytań umieszczania ich pod artykułami lub bezpośrednio pod nagraniami na CH9.

Maciej Grabek
Maciej Grabek
Pasjonat technologii oferowanych przez Microsoft , współzałożyciel i lider Toruńskiej Grupy Deweloperów .NET. Na co dzień programista .NET w jednej z największych firm e-commerce w Polsce.

Komentarze 2

Piotr Kolodziej Microsoft
Piotr Kolodziej
163 pkt.
Junior
16-02-2011
oceń pozytywnie 0

Maćku, świetna robota !!

 

-

Piotrek

Maciej Grabek Redaktor
Maciej Grabek
12328 pkt.
Guru
MVP
18-02-2011
oceń pozytywnie 0

Dzięki!

Materiały podobnie jak do poprzedniego artykułu można znaleźć na moim blogu w kategorii Windows Phone 7.

Maciek

Jeżeli odpowiedź okazała się pomocna kliknij [Pomógł mi]

BLOG

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.