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











Rozszerzony ekran powitalny w aplikacji Windows Store

06-03-2013 18:33 | Grzegorz Drążek
Artykuł opisuje stworzenie rozszerzonego ekranu powitalnego (z ang. splash screen) w aplikacji Windows Store.

Każda aplikacja typu Windows Store posiada tak zwany ekran powitalny (z ang. "splash screen"). Standardowy splash screen to nic innego jak pewien obrazek o rozmiarach  620 x 300 pikseli, definiowany jest w pliku manifest aplikacji, który pokazywany jest przy uruchamianiu naszej aplikacji. Jego głównym zadaniem jest powiadomienie użytkownika, że aplikacja jest właśnie uruchamiana, a tym samym dać jej czas na uruchomienie.

Domyślnie czas uruchomienia każdej prostej aplikacji to koło 2-4 sekund. Co natomiast jeśli napiszemy, aplikację, która podczas uruchamiania pobiera jakieś dodatkowe dane z pliku albo internetu? W takim wypadku na pewno czas uruchamiania aplikacji wydłuży się o kilka dodatkowych sekund. Mając taką sytuację zwykły splash screen w postaci obrazka, który może wyświetlać się nawet powyżej 10 sekund może okazać się niewystarczający. Po pierwsze użytkownik może pomyśleć, że aplikacja się "zawiesiła" i nie działa prawidłowo. Drugi scenariusz może być taki, że nasza aplikacja po prostu nie przejdzie certyfikacji.

Co więc programista może zrobić w takim przypadku? Otóż, może rozszerzyć działanie ekranu powitalnego. W poniższym przykładzie napiszemy sobie proste demo, które będzie zawierało taki rozszerzony ekran powitalny (extended splash screen). Nie ma więc co przedłużać i czas brać się do pracy.

Otwórzmy sobie Visual Studio 2012 (lub Visual Studio Express 2012). Stwórzmy nowy projekt typu Windows Store w języku C# korzystając z szablonu Blank App. 

Zlokalizujmy teraz nasz obrazek, który pełni rolę ekranu powitalnego. Otóż znajduje się on w folderze Assets naszej aplikacji i nosi nazwę SplashScreen.png. Sam podmieniłem sobie na ten obrazek, nadpisując poprzedni.

Przejdźmy teraz do plik Package.appxmanifest, czyli pliku manifest naszej aplikacji, następnie zaznaczmy na liście pozycję Splash Screen i w polu Background color wpiszmy wartość #EAE85D:

Kolejnym krokiem będzie dodanie nowej strony do naszego projektu: klikamy prawym przyciskiem myszy na nazwę projektu, następnie wybieramy New Item. W nowym oknie zaznaczamy Blank Page, nadajemy jej nazwę SplashPage i klikamy na Add.

Otwórzmy teraz plik SplashPage.xaml i zmieńmy sekcję Grid na taką:

<Grid Background="#EAE85D">
    <Image x:Name="extendedSplashImage"
           Source="Assets/SplashScreen.png"
           Width="620"
           Height="300" />
    <ProgressRing x:Name="progressRing"
                  Foreground="Green"
                  IsActive="True"
                  Margin="0,400,0,0"
                  HorizontalAlignment="Center"
                  Width="80"
                  Height="80" />
</Grid>
 

W powyższym kodzie nie powinno być nic trudnego, ale omówmy go sobie. Do naszej strony dodajemy dwa komponenty: pierwszy czyli kontrolka Image będzie ładował nasz obrazek będący ekranem powitalnym. Drugim komponentem będzie Progress Ring, mający na celu pokazać, że nasza aplikacja podczas uruchamiania cały czas działa.  

Przejdźmy teraz do pliku SplashPage.xaml.cs, czyli pliku code-behind naszej nowo dodanej strony, następnie zmodyfikujmy konstruktor w ten sposób:

public SplashPage(SplashScreen splash)
{
    this.InitializeComponent();

    this.extendedSplashImage.SetValue(Canvas.LeftProperty, splash.ImageLocation.X);
    this.extendedSplashImage.SetValue(Canvas.TopProperty, splash.ImageLocation.Y);
    this.extendedSplashImage.Height = splash.ImageLocation.Height;
    this.extendedSplashImage.Width = splash.ImageLocation.Width;

            
    this.progressRing.SetValue(Canvas.TopProperty, splash.ImageLocation.Y + splash.ImageLocation.Height + 32);
    this.progressRing.SetValue(Canvas.LeftProperty, splash.ImageLocation.X +(splash.ImageLocation.Width / 2) - 15);
}

 

Powyższy kod nie robic nic innego jak odpowiednio pozycjonuje nasz rozszerzony splash screen względem domyślnego. Chodzi o to, aby był on w tym samym miejscu.

Kolejną ważną rzeczą będzie modyfikacja metody OnLaunched w pliku App.xaml.cs. Otówrzy sobie więc ten plik i zmodyfikujmy całą metodę w ten sposób: 

protected async override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {

        SplashPage splashPage = new SplashPage(args.SplashScreen);
                
        Window.Current.Content = splashPage;

    }

    Window.Current.Activate();
    PerformDataFetch();
}
 

Domyślnie metoda OnLaunched odpowiada, za uruchomienie głównej strony naszej aplikacji. My zmodyfikowaliśmy tę metodą tak aby na początku wyświetlana została nasza strona SpashPage z rozszerzonym ekranem powitalnym. Na samym końcu tej metody, będziemy wywoływać specjalną funkcję która będzie ładować dane do naszej aplikacji. Stwórzmy więc tę funkcję:

internal async void PerformDataFetch()
{
    await Task.Delay(TimeSpan.FromSeconds(5));
    RemoveExtendedSplash();
}

W tej funkcji warto zwrócić uwagę na 2 rzeczy: pierwsza linijka symuluje ładowanie danych w naszej aplikacji, usypiając ją na 5 sekund. Druga linia kodu wywołuje kolejną metodę o nazwie RemoveExtendedSplash, mająca za zadanie usunąć splash screen i otworzyć główną stronę aplikacji. Napiszmy sobie jej postać:

internal void RemoveExtendedSplash()
{
    Window.Current.Content = new MainPage();
}

 

Ostatnią rzeczą będzie otwarcie strony MainPage.xaml, czyli główej strony naszej aplikacji i dodanie wewnątrz kontrolki Grid odpowiedniego napisu:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock Text="Główna strona programu"
                FontSize="52"
                VerticalAlignment="Center"
                HorizontalAlignment="Center" />
</Grid>
 

Możemy teraz uruchomić naszą aplikację i jeśli wykonaliśmy wszystko poprawnie zobaczyć efekt rozszerzonego ekranu powitalnego aplikacji.

I tak dotarliśmy do końca tego artykułu. Jak widać zrobienie rozszerzonego splash screena wcale nie jest takie skomplikowane a efekt wydaje się być zadowalający. Rozszerzony ekran powitalny pokazuje, że aplikacja ciągle działa ładując potrzebne dane. Jeśli więc wszystko wykona się poprawnie, żaden użytkownik nie pomyśli, że aplikacja przestała działać.

Komentarze 0

pkt.

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