[Desenvolvimento] Como criar uma Splash Screen Page com ações em background

3

Olá pessoal, tudo bom?

Uma coisa muito comum nas APPs é abrir uma imagem inicial que a represente, como por exemplo, o cone usado pelo VLC, o brasão usado pela APP do Windows Team, as nuvens usadas pelo OneDrive, a bussola usada pelo Here Maps, etc…

splashscreenimage

Essas imagens iniciais são conhecidas como Splash Screen Images e para que sua APP a tenha basta criar um arquivo JPG de nome SplashScreeenImage.jpg e coloca-lo na raiz do seu projeto Windows Phone no Visual Studio.

Até aí tudo bem, mas ocorre que em algumas ocasiões temos necessidade de executar rotinas na inicialização da APP antes que a mesma seja liberada para o uso do usuário. Esse procedimento de inicialização de rotinas poderia ser feito de algumas maneiras, como por exemplo, nos métodos de inicialização existentes no arquivo App.xaml.cs que também faz parte do projeto Windows Phone, no entanto, tentando entender melhor a dúvida de um leitor, resolvi escrever esse post para demonstrar como podemos executar tarefas em uma suposta “Splash Page” da APP, ou seja, não faremos uso da imagem SplashScreenImage.jpg na inicialização mas teremos uma página inicial com rotinas de inicialização em background ao mesmo tempo em que ela apresenta uma imagem representativa ou outras informações ao usuário enquanto ele espera pela inicialização completa da APP.

Para entender melhor o objetivo do post, assista ao vídeo abaixo para visualizar o que estamos querendo representar.

Montando o exemplo…

A primeira coisa é implementar o XAML para representação da interface da Splash Page. No exemplo utilizei apenas TextBlock, mas nada impede que você utilize outros elementos, como por exemplo, uma imagem de fundo ou um áudio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Arquivo: MainPage.xaml -->
...
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <TextBlock Text="Ações em background e redirecionamento após conclusão..."
             TextWrapping="Wrap"
             Style="{StaticResource PhoneTextGroupHeaderStyle}"
             TextAlignment="Center" />
  <TextBlock Margin="0,30,0,0"
             TextAlignment="Center"
             Text="Executando ação, aguarde..." />
  <TextBlock Margin="0,50,0,0" TextAlignment="Center"
             Name="txtAguarde" Text="."
             Style="{StaticResource PhoneTextExtraLargeStyle}" />
  <TextBlock Text="0%" TextAlignment="Center"
             Name="txtPercentual"
             Style="{StaticResource PhoneTextExtraLargeStyle}" />
  <TextBlock Margin="0,50,0,0" Text="Redirecionando ->"
             TextAlignment="Center" Visibility="Collapsed"
             Name="txtRedirecionando"
             Style="{StaticResource PhoneTextGroupHeaderStyle}" />
</StackPanel>
...

Em seguida precisamos ajustar o arquivo code behind (C#) associado à página inicial da aplicação (splash page)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Arquivo: MainPage.xaml.cs
...
public partial class MainPage : PhoneApplicationPage
{
  //Criando o objeto para executar ações em background
  private BackgroundWorker bw = new BackgroundWorker();
 
  // Construtor
  public MainPage()
  {
    InitializeComponent();
 
    bw.WorkerReportsProgress = true; //Informa ao objeto de background que ele deve reportar o progresso de sua ação
    bw.WorkerSupportsCancellation = false; //Informa ao objeto de background que ele não pode ser cancelado
    bw.DoWork += bw_DoWork; //Indica ao objeto de background qual o método que ele deve executar no momento de sua inicialização
    bw.ProgressChanged += bw_ProgressChanged; //Informa ao objeto de background qual o método que ele deve executar sempre que houver mudanças em seu progresso
    bw.RunWorkerCompleted += bw_RunWorkerCompleted; //Informa ao objeto de background qual o método a ser executado quando sua rotina for finalizada
 
    this.Loaded += MainPage_Loaded;
  }
 
  void MainPage_Loaded(object sender, RoutedEventArgs e)
  {
    if (bw.IsBusy != true)
       bw.RunWorkerAsync(); //Iniciando o objeto de background...
  }
  void bw_DoWork(object sender, DoWorkEventArgs e)
  {
    BackgroundWorker worker = sender as BackgroundWorker;
    //Essa repetição foi criada apenas para simular a execução de algum procedimento.
    for (int i = 1; i <= 10; i++)
    {
      Thread.Sleep(1000);
      worker.ReportProgress(i * 10); //Indicando o percentual para a progressão do processo
    }
  }
 
  void bw_ProgressChanged(object sender, ProgressChangedEventArgs e)
  {
    //O trecho abaixo ocorre sempre que ocorre a mudança do status
    txtAguarde.Text += ".";
    txtPercentual.Text = e.ProgressPercentage.ToString() + "%";
  }
 
  void bw_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
  {
    //Após a finalização do processo, direcionamos o usuário para a página posterior à Splash Page
    txtRedirecionando.Visibility = Visibility.Visible;
    NavigationService.Navigate(new Uri("/Pagina2.xaml", UriKind.Relative));
  }
...
...
}

Espero que tenham gostado.

Grande abraço,

Eduardo Henrique Rizo (@eduardorizo)

MCP

Posts Relacionados: 

Fonte: Blog do Eduardo H. Rizo

Share.

About Author

Bacharel em Ciência da Computação pela FIPP/Unoeste, Pós-Graduado em Desenvolvimento de Sistemas Web, Segurança da Informação e Avaliação do Ensino e da Aprendizagem, Professor universitário e responsável pelo setor de desenvolvimento de sistemas web da Universidade do Oeste Paulista. MCP e MCPS pela Microsoft e nas horas vagas dedica um pouco do seu tempo escrevendo posts técnicos sobre desenvolvimento de sistemas web, windows phone, gerenciamento de servidores e outros assuntos para a comunidade.

  • lekobarros

    Eduardo muito bom, mesmo eu sendo leigo ainda no desenvolvimentos de App pro WP dá pra entender com suas explicações :}. Você tem algum local pela internet onde posso estudar mais sobre desenvolvimento de apps para o WP? Obrigado

  • Azure

    Ei pessoal do Windows Phone Brasil/Windows Team,lançou o novo aplicativo “Preview for Developers” para o Windows Phone 10.
    O nome é Phone Insider.Infelizmente depois de baixar o aplicativo que supostamente permitirá que você receba a pré versão do Windows 10 para smartphones você não conseguirá efetuar login no aplicativo. Isto porque o aplicativo esta pedindo um login exclusivo e interno da Microsoft.

    http://www.windowsmania.com.br/2015/01/10/phone-insider-confira-o-novo-preview-developers-windows-10-para-smartphones/

    • TeYokitoos

      Wow