1 2 Kontrolki standardowe WP7 Michał Ręczkowicz, Opublikowano: 2012-02-08 http://msdn.microsoft.com/pl-pl/library/rozpoczecie-pracy-z-windows-phone--kontrolki-standardowe W tym samouczku dowiesz się, jakie kontrolki standardowe znajdują się w Visual Studio i w jaki sposób możesz je wykorzystać w swoich aplikacjach. Przed wykonaniem zadań powinieneś znać: ListBox służy do tworzenia list z wielu innych kontrolek, działa podobnie jak ScrollViewer, Map służy do określania lokalizacji na mapie, Media Element umożliwia prezentację plików multimedialnych, PasswordBox umożliwia maskowanie tekstu, jaki jest do niej wprowadzany, RadioButton umożliwia zaznaczenie jednej z dostępnych opcji, kontrolki te mogą być grupowane, Slider służy do płynnej regulacji zmiany wartości różnych zakresów, StackPanel to powierzchnia do rozmieszczania kontrolek, kontrolki w niej zawarte można jedynie przeglądać, TextBox służy do pobierania tekstu z klawiatury, WebBrowser służy do obsługi stron internetowych, za jej pomocą można przeglądać sieć. Wynik końcowy projektu przedstawiono na Rys. 1. podstawy języka C#, środowisko MS Visual Studio 2010 Express for Windows Phone, emulator Windows Phone, podstawy z dodawania i obsługi kontrolek w projekcie. Po wykonaniu zadań nauczysz się: jakie kontrolki standardowe są dostępne dla programisty Windows Phone, w jaki sposób można użyć tych kontrolek w aplikacji. Implementacja Utwórz nowy projekt i nazwij go Kontrolki. Jeśli nie wiesz, jak to zrobić, zobacz samouczek Podstawowe elementy środowiska MS Visual Studio 2010 Express for Windows Phone 5. Lista standardowych kontrolek: Image pozwala na wyświetlania obrazków, ScrollViewer pozwala na przesuwanie elementów w niej zawartych, TextBlock służy głównie do wyświetlania tekstu, Rys. 1. Efekt końcowy. Strona główna aplikacji Na stronie głównej aplikacji umieść linki do stron zawierających prezentacje kontrolek. Do ułożenia linków wykorzystaj kontrolkę StackPanel umożliwiającą automatyczne układanie elementów pionowo (jeden pod drugim) lub poziomo (jeden obok drugiego). 1. W oknie XAML określ nazwę aplikacji i strony głównej.
3 4 Dla elementu TextBlock o x:name=pagetitle zmień właściwość Text na wybór. 2. Dodaj kontrolkę StackPanel umożliwiającą układanie elementów w pionie i w poziomie W oknie XAML do elementu Grido x:name=contentpanel dodaj element StackPanel tak, aby uzyskać efekt jak na Rys. 2. w polu Name wpisz Glowne.xaml, 2. W oknie XAML określ nazwę aplikacji i strony Glowne.xaml. Dla elementu TextBlock o x:name=pagetitle zmień właściwość Text na główne. 3. Dodaj kontrolkę StackPanel umożliwiającą układanie elementów w pionie i w poziomie W oknie XAML do elementu Grid o x:name=contentpanel dodaj element StackPanel tak, aby uzyskać efekt jak na Rys. 2. Rys.2. Dodanie elementu StackPanel do ContentPanel. 3. Dodaj kontrolkę HyperlinkButton przekierowującą do strony Glowne.xaml. Zmień jej właściwość Content na Główne. Dwukrotnie kliknij kontrolkę i w metodzie hyperlinkbutton1_click dodaj: NavigationService.Navigate(newUri("/Kontrolki;component/Glowne.xaml", UriKind.Relative)); Kontrolki podstawowe Kontrolki podstawowe to kontrolki, które można wykorzystać do pobierania prostych informacji od użytkownika, takich jak: Imię, Wiek, określenie płci. 1. Dodaj nową stronę Glowne.xaml. Z menu wybierz Project -> Add New Item. z lity dostępnych szablonów wybierz Windows Phone PortraitPage, 4. Dodaj kontrolki umożliwiające pobranie imienia. Do okna podglądu telefonu przenieś kontrolkę TextBlock i określ jej właściwość Text jako Podaj imię: Do okna podglądu telefonu przenieś kontrolkę TextBox i określ jej właściwość Text jako "". 5. Dodaj kontrolki umożliwiające pobranie wieku. Do okna podglądu telefonu przenieś kontrolkę TextBlock i określ jej właściwość Text jako Podaj wiek: Do okna podglądu telefonu przenieś kontrolkę TextBox i określ jej właściwość Text jako "", dodaj właściwość InputScope="Number". 6. Dodaj kontrolki umożliwiające pobranie płci. Do okna podglądu telefonu przenieś kontrolkę TextBlock i określ jej właściwość Text jako Wybierz płeć: Do okna podglądu telefonu przenieś kontrolkę RadioButton i określ jej właściwość Content jako "Kobieta", dodaj właściwość GroupName="Plec". Do okna podglądu telefonu przenieś kontrolkę RadioButton i określ jej właściwość Content jako "Mężczyzna", dodaj właściwość GroupName="Plec". 1. Dodaj kontrolki umożliwiające pobranie hasła. Do okna podglądu telefonu przenieś kontrolkę TextBlock i określ jej właściwość Text jako Podaj hasło: Do okna podglądu telefonu przenieś kontrolkę PasswordBox.
5 6 Do okna podglądu telefonu przenieś kontrolkę CheckBox i określ jej właściwość Content jako "Zapamiętaj?". 8. Dodaj Przycisk umożliwiający zatwierdzenie danych i przejście do strony głównej. Do okna podglądu telefonu przenieś kontrolkę Button. Dwukrotnie kliknij dodaną kontrolkę i w metodzie button1_click dodaj: NavigationService.Navigate(newUri("/Kontrolki;component/MainPage.xaml", UriKind.Relative)); 9. Sprawdź dodane kontrolki. Otwórz plik Glowne.xaml i sprawdź, czy kod w kontrolce Grid o x:name=contentpanel wygląda podobnie do przedstawionego na Rys. 3. Kontrolki dodatkowe 1. Do strony MainPage.xaml do kontrolki StackPanel dodaj kontrolkę HyperlinkButton przekierowującą do strony Dodatkowe.xaml. Zmień jej właściwość Content na Dodatkowe. Dwukrotnie kliknij kontrolkę i w metodzie hyperlinkbutton2_click dodaj: NavigationService.Navigate(newUri("/Kontrolki;component/Dodatkowe.xaml", UriKind.Relative)); 1. Dodaj nową stronę Dodatkowe.xaml. Z menu wybierz Project -> Add New Item. z lity dostępnych szablonów wybierz Windows Phone PortraitPage, w polu Name wpisz Dodatkowe.xaml, 3. W oknie XAML określ nazwę aplikacji i strony Dodatkowe.xaml. Dla elementu TextBlock o x:name=pagetitle zmień właściwość Text na dodatkowe. 4. W oknie XAML dodaj kontrolkę StackPanel umożliwiającą układanie elementów w pionie i w poziomie. 5. Dodaj kontrolkę umożliwiającą wybór elementów z listy. Rys. 3. Kod elementów na stronie po dodaniu kontrolek podstawowych. Zapisz zmiany we wszystkich plikach za pomocą kombinacji Ctrl+Shift+S lub za pomocą menu File->SaveAll. Uruchom projekt (F5) i sprawdź działanie dodanych kontrolek. Do okna podglądu telefonu przenieś kontrolkę ListBox. W dodanej kontrolce, w widoku XAML, zamień /> na ></ListBox>. Do kontrolki dodaj: <TextBlockName="tb1" Text="Pierwszy"/> <TextBlockName="tb2" Text="Drugi"/> <TextBlockName="tb3" Text="Trzeci"/> <TextBlockName="tb4" Text="Czwarty"/>
7 8 <TextBlockName="tb5" Text="Piąty"/> 6. Dodaj kontrolkę Slider wraz z kontrolką wyświetlającą wybraną wartość. Do okna podglądu telefonu przenieś kontrolkę Slider. Do okna podglądu telefonu przenieś kontrolkę TextBox. Usuń jej właściwość Text. Dwukrotnie kliknij na kontrolce Slider. W metodzie slider1_valuechanged dodaj: textbox1.text = e.newvalue.tostring(); 7. Sprawdź dodane kontrolki. Otwórz plik Dodatkowe.xaml i sprawdź, czy kod w kontrolce Grid o x:name=contentpanel wygląda podobnie do przedstawionego na Rys. 4. Przesuwane obrazki W poprzednim odcinku dodałeś kontrolkę image. Tym razem rozszerzysz prezentację jej możliwości za pomocą kontrolki ScrollViewer. 1. Do strony MainPage.xaml, do kontrolki StackPanel, dodaj kontrolkę HyperlinkButton przekierowującą do strony Obrazki.xaml. Zmień jej właściwość Content na Obrazki. Dwukrotnie kliknij kontrolkę i w metodzie hyperlinkbutton3_click dodaj: NavigationService.Navigate(newUri("/Kontrolki;component/Obrazki.xaml", UriKind.Relative)); 2. Dodaj nową stronę Obrazki.xaml. Z menu wybierz Project -> Add New Item z lity dostępnych szablonów wybierz Windows Phone Portrait Page w polu Name wpisz Obrazki.xaml, 3. W oknie XAML określ nazwę aplikacji i strony Dodatkowe.xaml. Dla elementu TextBlock o x:name=pagetitle zmień właściwość Text na obrazki. Dla elementu phone określ właściwość SupportedOrientations jako PartraitOrLandscape. 4. Do projektu dodaj kontrolkę ScrollViewer. Rys. 4. Kod elementów na stronie po dodaniu kontrolek dodatkowych. Zapisz zmiany we wszystkich plikach za pomocą kombinacji Ctrl+Shift+S lub za pomocą menu file->saveall. Uruchom projekt (F5) i sprawdź działanie dodanych kontrolek. Określ jej szerokość na 455, a wysokość na 600. Określ właściwość HorizontalScrollBarVisibility na "Visible". 5. Do kontrolki ScrollViewer dodaj kontrolkę Image.
9 10 W oknie Properties w polu Source: wybierz Add, wybierz jeden obraz z biblioteki obrazów w Windows, zaznacz obrazek i zatwierdź wciskając opcję k.. W liście rozwijalnej właściwości Stretch wybierz "Uniform". Ustaw HorizontalScrollBarVisibility na "Visible". 6. Sprawdź dodane kontrolki. Otwórz plik Obrazki.xaml i sprawdź, czy kod w kontrolce Grid o x:name=contentpanel wygląda podobnie do przedstawionego na Rys. 5. Dwukrotnie kliknij kontrolkę i w metodzie obsługi zdarzenia Click dodaj: NavigationService.Navigate(newUri("/Kontrolki;component/Browser.xaml", UriKind.Relative)); 2. Dodaj nową stronę Browser.xaml. Z menu wybierz Project->Add new item. z lity dostępnych szablonów wybierz Windows Phone Portrait Page, w polu Name wpisz Browser.xaml, 3. W oknie XAML określ nazwę aplikacji i strony Browser.xaml. Dla elementu TextBlock o x:name=pagetitle zmień właściwość Text na web. Dla elementu phone określ właściwość SupportedOrientations jako PartraitOrLandscape. 4. Do projektu dodaj kontrolkę WebBrowser. W oknie Properties w polu Source wprowadź adres: http://www.bing.com/ 6. Rys. 5. Kod elementów na stronie po dodaniu kontrolek Scrollviewer i Image. Zapisz zmiany we wszystkich plikach za pomocą kombinacji Ctrl+Shift+S lub za pomocą menu file->saveall. Uruchom projekt (F5) i sprawdź działanie dodanych kontrolek. Przeglądarka internetowa 1. Do strony MainPage.xaml do kontrolki StackPanel dodaj kontrolkę HyperlinkButton przekierowującą do strony Browser.xaml. Zmień jej właściwość Content na Przeglądarka. Mapa 1. Do strony MainPage.xaml do kontrolki StackPanel dodaj kontrolkę HyperlinkButton przekierowującą do strony Browser.xaml. Zmień jej właściwość Content na Mapa. Dwukrotnie kliknij kontrolkę i w metodzie obsługi zdarzenia Click dodaj: NavigationService.Navigate(newUri("/Kontrolki;component/Mapa.xaml", UriKind.Relative)); 2. Dodaj nową stronę Mapa.xaml.
11 12 Z menu wybierz Project->Add new item. z lity dostępnych szablonów wybierz Windows Phone Portrait Page. w polu Name wpisz Mapa.xaml. 3. W oknie XAML określ nazwę aplikacji i strony Dodatkowe.xaml. Kontrolki i style Video: http://channel9.msdn.com/series/kurs-programowania-windows-phone-7/kurs-windows-phone-7-cz-2-style-i-kontrolki/ 7 Kontrolki Silverlight w WP7: http://msdn.microsoft.com/pl-pl/library/kontrolki-silverlight-w-wp7.aspx 8 Video How Do I? : http://msdn.microsoft.com/en-us/gg243438 9 Dla elementu TextBlock o x:name=pagetitle zmień właściwość Text na obrazki. Dla elementu phone określ właściwość SupportedOrientations jako PartraitOrLandscape. 4. Do projektu dodaj kontrolkę Map. Rozciągnij ją do maksymalnych rozmiarów ekranu telefonu. Uruchom projekt: kliknij dwukrotnie na mapie, znajdź Redmond na mapie. Zadanie Utwórz formularz z poznanych kontrolek. Podsumowanie W tym samouczku poznałeś kontrolki standardowe dostępne po zainstalowaniu narzędzi programistycznych. W kolejnym samouczku nauczysz się, jak dodawać nowe kontrolki do środowiska i projektu. Sprawdzisz, jakie kontrolki są dostępne w bibliotece Silverlight for Windows Phone Toolkit. Dodatkowo zobacz: