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











Dzień 6 - "31 Days with Windows Phone"

10-11-2011 08:00 | Łukasz Arciszewski
Tym razem w artykule będzie mowa o pasku aplikacji (Application Bar) oraz o zasobniku narzędziowym (System Tray).

W poprzednim artykule była mowa o motywach systemowych i o tym, w jaki sposób powiązać je z aplikacją poprzez Expression Blend 4 dosłownie kilkoma kliknięciami myszy. W tym artykule natomiast chciałbym omówić inną rzecz, która dzięki Expression Blend 4 staje się o wiele łatwiejsza. Jeśli oglądałeś różne aplikacje, których demo można obejrzeć np. na YouTube lub na stronie http://blankensoft.com/, mogłeś zobaczyć użycie Paska Aplikacji (Application Bar).

Application Bar w Windows Phone 7 jest zbiorem okrągłych ikon na dole aplikacji. Poniżej umieszczam przykład z gry TapScotch.

 

Na powyższym przykładzie widać, że aplikacja posiada cztery podstawowe ikony, z którymi użytkownik wchodzi w interakcję: Play, BestTimes, Badges oraz Help. Wciśnięcie każdego z nich powoduje przeniesienie użytkownika na określoną stronę. W takim razie, jak to jest zrobione?

Dodawanie paska aplikacji

Jeśli zaczniesz nowy projekt, na dole MainPage.xaml masz zakomentowany przykładowy kod. Jeśli skasowałeś to i potrzebujesz odtworzyć na nowo domyślny kod, wygląda on tak:

<phone:PhoneApplicationPage.ApplicationBar>
 
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
 
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
 
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
 
            <shell:ApplicationBar.MenuItems>
 
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
 
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
 
            </shell:ApplicationBar.MenuItems>
 
        </shell:ApplicationBar>
 
    </phone:PhoneApplicationPage.ApplicationBar>

 

Jeśli dodatkowo usunąłeś wymagane przestrzenie nazw XML z nagłówka strony to tutaj masz kod (sprawdź czy posiadasz referencje do tych plików):

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

 

Gdy dodasz pasek aplikacji powinieneś zobaczyć, że Visual Studio jest na tyle inteligentne by dostosować wielkość DesignHeight do 72px. To jest właśnie wysokość paska aplikacji. Teraz jest dobry czas aby napisać o zasobniku systemowym (SystemTray).

Zasobnik systemowy Windows Phone

Zapewne zauważyłeś, ze po uruchomieniu aplikacji nadal możesz zobaczyć zegarek, ikonkę Wi-Fi, ilość baterii, itp. Tak jest, ponieważ domyślnie SystemTray jest włączony. Jeśli chciałbyś go wyłączyć (lub mieć dodatkowe 32 px przestrzeni) powinieneś ustawić widzialność na false.

shell:SystemTray.IsVisible="False"

 

Dodawanie ikon do paska aplikacji

Jeśli spojrzysz na kod dla paska aplikacji powinieneś zobaczyć, że wskazane są tam dwie grafiki, które aktualnie nie są dołączone do projektu. Jeśli uruchomisz aplikację zauważysz, że są tam przekreślone ikony dla każdego ApplicationBarIconButton. W tym momencie możemy stworzyć szybko ikonki, dodać je do projektu oraz dodać referencję do nich w kodzie. Proste, prawda? No pewnie, ale można jeszcze prościej. I znów z pomocą przychodzi nam Expression Blend 4. Otwórzmy naszą aplikację w Expression Blend i przejdźmy do zakładki Objects and Timeline oraz odnajdźmy w drzewie te dwa przyciski.

 

Jak wybierzesz jeden z tych przycisków to następnie przejdź na zakładkę właściwości (Properties). Zobaczysz tam miejsca do zmiany ikony oraz tekstu. Wygląda to mniej więcej tak:

 

Jeśli otworzysz IconUri, Twoim oczom ukaże się mnogość standardowych ikonek, które możesz użyć w swojej aplikacji. Jeśli nie masz jakiejś niestandardowej ikonki, bez której nie potrafisz żyć, te ikony powinny ci wystarczyć w większości przypadków (zawsze możesz stworzyć własną ikonkę i dodać ją ręcznie). Teraz jeśli wybierzesz jedną z ikon z listy, zostanie dodana do Twojego projektu jej biała wersja. Dlaczego biała? Dobre pytanie, ale wyjaśnię to już niedługo. Jeśli nie śledzisz tego w Blendzie to poniżej zamieszczam wykaz ikonek (przepraszam za długość tej listy):

 

Dlaczego tylko białe ikonki?

Zespół tworzący Windows Phone sprawił, że Twoje życie staje się łatwiejsze. Wystarczy, że stworzysz JEDEN zestaw ikon a system sam zadba o resztę. Więc, kiedy dasz białe ikonki, zostaną one użyte w ciemnym motywie i automatycznie zostaną odwrócone kolory, kiedy użytkownik użyje jasnego motywu. Sam sprawdź! Wybierz ikonę z powyższej listy i spójrz na strukturę swojego projektu. Jest tam dołączony tylko jeden obrazek. System sam zmieni białą ikonkę na czarną, kiedy tego będzie potrzebował.

Sprawmy, by przyciski zadziałały

W tym momencie mamy kilka ładnych przycisków, które nic nie robią, kiedy się je przyciśnie. Potrzebują one zatem zdarzenia Click oraz jego obsługi po stronie kodu. Oto przykładowy kod:

XAML

<shell:ApplicationBarIconButton x:Name="AddButton" IconUri="/icons/appbar.add.rest.png" Text="Add" Click="AddButton_Click"/>
 
<shell:ApplicationBarIconButton x:Name="SubtractButton" IconUri="/icons/appbar.minus.rest.png" Text="Subtract" Click="SubtractButton_Click"/>

 

C#

private void AddButton_Click(object sender, EventArgs e)
{
                Counter.Text = (Int32.Parse(Counter.Text.ToString()) + 1).ToString();
}
 
 
 
private void SubtractButton_Click(object sender, EventArgs e)
{
                Counter.Text = (Int32.Parse(Counter.Text.ToString()) - 1).ToString();
}

 

Jakie są inne tekstowe opcje w menu?

Jak uruchomisz aplikację to zobaczysz, że jest tam przycisk trzech kropek. Po kliknięci w nie pojawi się lista kolejnych opcji w menu. Jeśli użyłeś domyślnego kodu będą one nazwane „MenuItem 1” oraz „MenuItem 2”. Działają one identycznie jak przyciski z ikonkami. Tak samo obsługujesz w nich zdarzenie kliknięcia. Przykłady:

 

Możesz minimalizować pasek aplikacji

Nowością w Windows Phone 7.5 jest możliwość minimalizacji paska aplikacji. Aby to zrobić musisz po prostu zmienić właściwość Mode dla ApplicationBar na Minimized. Jeśli to zrobisz, to jako efekt końcowy uzyskasz coś takiego:

Załączniki:

Komentarze 0

pkt.

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