Guia de início rápido: adicionando uma tela inicial (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Defina a imagem de tela inicial do aplicativo e a cor de tela de fundo usando o Microsoft Visual Studio 2013.

Veja este recurso em ação como parte da nossa série sobre Recursos para aplicativos, do início ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim (HTML).

Pré-requisitos

Este guia de início rápido usa o Visual Studio 2013. Para baixá-los, veja Obter as ferramentas.

Definir a imagem de tela inicial e a cor de tela de fundo no Visual Studio 2013

Ao usar um modelo do Visual Studio 2013 para criar seu aplicativo, uma imagem padrão é adicionada ao seu projeto e definido como imagem de tela inicial. A cor de tela de fundo da tela inicial muda para um padrão de cinza claro. Se você quiser mudar a imagem ou cor padrão da tela inicial de seu aplicativo, siga estas etapas:

  1. Abra o projeto do aplicativo do Tempo de Execução do Windows existente no Visual Studio 2013.

  2. No Gerenciador de Soluções, abra o arquivo "Package.appxmanifest". Você também pode abrir esse arquivo pela barra de menus escolhendo Projeto, Loja e Editar Manifesto do Aplicativo.

  3. Abra a guia Ativos Visuais e escolha Tela Inicial no painel Todos os Ativos de Imagem do lado esquerdo da janela "Package.appxmanifest". Se estiver mudando a tela inicial pela primeira vez, você verá o caminho "Assets\SplashScreen.png" no campo Tela Inicial.

    A captura de tela a seguir mostra a janela "Package.appxmanifest" no Visual Studio 2013. Dependendo se o projeto é para um aplicativo da Windows Store ou um aplicativo da Loja do Windows Phone, você verá um conjunto de ativos visuais ligeiramente diferente.

    Uma captura de tela da janela "Package.appxmanifest" no Visual Studio 2013

    Se você abrir "Package.appxmanifest" em um editor de texto, o SplashScreen element aparecerá como filho do VisualElements element. A marcação de tela inicial padrão no arquivo do manifesto tem aparência semelhante a esta em um editor de texto:

    <m2:SplashScreen Image="Assets\splashscreen.png" />
    
  4. Para escolher uma nova imagem de tela inicial de um aplicativo da Windows Store, pressione o botão com reticências exibido ao lado do rótulo 620 x 300 px abaixo de Ativos Dimensionados. Escolha a imagem de 620 x 300 pixels (.png, .jpg ou .jpeg) que gostaria de usar para a imagem de tela inicial.

    Importante  A imagem da tela inicial que você escolhe deve ser de 620 x 300 pixels usando um fator de escala 1x. Além disso, ao projetar sua tela inicial, observe que ela é menor do que a tela e centralizada. Ela não preenche a tela como uma tela inicial de um aplicativo da Loja do Windows Phone faz.

     

  5. Para escolher uma nova imagem de tela inicial de um aplicativo da Loja do Windows Phone, pressione o botão com reticências exibido ao lado do rótulo 1152 x 1920 px abaixo de Ativos Dimensionados. Escolha a imagem de 1152 x 1920 pixels (.png, .jpg ou .jpeg) que gostaria de usar para a imagem de tela inicial.

    Importante  A imagem da tela inicial que você escolher deve ter 1152 x 1920 pixels, que é o tamanho correto para um fatores de dimensionamento 2,4 x. Se esse for o único ativo que você fornecer, então, ele será reduzido para os fatores de dimensionamento 1,4 x e 1x.

     

  6. No campo Cor de Tela de Fundo da seção Tela Inicial, defina a cor da tela de fundo exibida com a sua imagem da tela inicial. Você pode inserir o nome de uma cor ou o 'número' e o valor hexadecimal de uma cor. Para obter uma lista dos nomes e cores disponíveis, veja SplashScreen element.

    Definir a cor de tela de fundo para a sua tela inicial é opcional. Se você não especificar uma cor para um aplicativo da Windows Store, a cor de tela de fundo da tela inicial mudará para o padrão cinza claro (valor hexadecimal 464646). Essa é a mesma cor da tela de fundo do Bloco padrão (veja o campo Cor da Tela de Fundo da seção Imagens de Blocos e Logotipos na guia Ativos Visuais). Se você não especificar uma cor para um aplicativo da Loja do Windows Phone, ou configurá-lo como "transparente", a cor de tela de fundo da tela inicial será transparente.

Resumo e próximas etapas

Se o aplicativo levar algum tempo para ser carregado, considere a inclusão de uma tela inicial estendida. Para obter diretrizes passo a passo, veja o artigo sobre como estender a tela inicial. Saiba sobre criar uma boa experiência de carregamento no artigo sobre diretrizes e lista de verificação para telas iniciais.

Quer saber mais sobre as outras imagens necessárias para um aplicativo da Windows Store? Veja Escolhendo as imagens do seu aplicativo.

Tópicos relacionados

Exemplo da tela inicial.

Diretrizes e lista de verificação para telas iniciais

Como estender a tela inicial

Escolhendo as imagens do seu aplicativo

Referência

Package manifest schema SplashScreen element

Windows.ApplicationModel.Activation.SplashScreen class