Guia de início rápido: usando recursos de arquivo ou imagem (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 ]

Você pode adicionar imagens e outros recursos de arquivos ao seu aplicativo e fazer referência a esses arquivos de dentro de seu aplicativo. O suporte para seleção de imagens com base em configurações de alto contraste ou na escala específica da tela é integrado ao Tempo de Execução do Windows, caso você siga as instruções abaixo para nomear e organizar os recursos de seus arquivos em pastas.

Instruções

1. Crie imagens personalizadas ou outros ativos de arquivos para configurações de tela (DPI) e configurações de contraste diferentes.

   Crie suas imagens em vários tamanhos recomendados, para garantir que o seu aplicativo tenha uma ótima aparência quando o Windows carregar o recurso adequado. Veja Diretrizes de dimensionamento de acordo com a densidade de pixels.

   1. Crie várias cópias de cada imagem:

      1. Tamanho original, que é usado por um dispositivo típico de 96 dpi. Nomeie esse arquivo como name**.scale-100.**ext (Para esta e todas as instruções subsequentes, name é o espaço reservado para o nome do recurso escolhido e ext é a extensão do tipo de arquivo específico. O .scale-100 é o segmento do nome do recurso que insere o comportamento de dimensionamento do Tempo de Execução do Windows; é nessa parte do nome que você deve usar as convenções que documentamos aqui.)
      2. 140% do tamanho original. Por exemplo, uma imagem de 100x100px também deve ter uma versão de imagem 140x140px. Nomeie esse arquivo como name**.scale-140.**ext
      3. 180% do tamanho original. Por exemplo, uma imagem de 100x100px também deve ter uma versão de imagem de 180x180px. Nomeie esse arquivo como name**.scale-180.**ext
      4. 240% do tamanho original, para aplicativos do Windows Phone. Por exemplo, uma imagem de 100x100px também deve ter uma versão de imagem de 240x240px. Nomeie esse arquivo como name**.scale-240.**ext
      5. Imagem de alto contraste com tela de fundo preta e primeiro plano branco no tamanho original. Nomeie esse arquivo como name**scale-100_contrast-black.**ext
      6. Imagem de alto contraste com tela de fundo branca e primeiro plano preto no tamanho original. Nomeie esse arquivo como name**scale-100_contrast-white.**ext

      Observação  As imagens de logotipo do aplicativo também usam recursos, que são especificados no arquivo de manifesto do aplicativo. Se você estiver usando uma imagem especificamente para o logotipo do aplicativo, deverá criar uma cópia que seja 80% do tamanho original. Por exemplo, uma imagem de logotipo de 100x100px também deve ter uma versão de imagem de 80x80px. Nomeie esse arquivo como name**.scale-80.**ext. Para saber mais, veja Escolhendo as imagens do seu aplicativo e Ativos visuais de bloco e de notificações do sistema.

       

   2. Coloque todas as imagens na mesma pasta da estrutura do aplicativo. Por exemplo:

      1. images/logo.scale-100.png
      2. images/logo.scale-140.png
      3. images/logo.scale-180.png
      4. images/logo.scale-240.png
      5. images/logo.scale-80.png
      6. images/logo.scale-100_contrast-black.png
      7. images/logo.scale-100_contrast-white.png

2. Consultar as imagens em HTML sem os qualificadores

   Use o formulário name.ext quando se referir a esse recurso de arquivo na marcação (você está deliberadamente omitindo o segmento que especifica a escala ou o contraste; o Tempo de Execução do Windows anexa esse segmento internamente quando ele recupera o recurso apropriado). Por exemplo:

   <img src="images/logo.png" />
   

3. Consultar as imagens no código sem os qualificadores

   Use o formulário name.ext quando se referir a esse recurso de arquivo no código (você está deliberadamente omitindo o segmento que especifica a escala ou o contraste; o Tempo de Execução do Windows anexa esse segmento internamente quando recupera o recurso apropriado). A diferença das instruções para marcação acima é que a marcação pode inferir o esquema, bem como uma raiz devido ao contexto do arquivo de marcação. Mas o código não pode inferir isso; as partes do esquema e da raiz de um URI (Uniform Resource Identifier) são necessárias para o código quando você constrói um novo Uri. Por exemplo:

   var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
   var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);
   

4. Para um arquivo de logotipo, consultar a imagem no manifesto sem os qualificadores

   1. Abra o arquivo Package.appxmanifest no Microsoft Visual Studio. Abra a guia Ativos Visuais.

   2. Edite a referência de manifesto para se referir ao arquivo de recurso. Isso é mostrado como um campo de edição de texto por padrão e, ao especificar o nome do arquivo de recurso aqui, você omite o segmento de qualificador. Por exemplo, existe um campo para Logotipo Quadrado de 150x150, onde o valor pode ser:

      images\logo.png
      

Recursos de arquivo e globalização

As instruções neste tópico se concentram nos qualificadores de recursos que habilitam o suporte a escala e contraste. Elas usam a convenção que inclui o qualificador no nome do arquivo. Porém, algumas imagens ou outros arquivos podem precisar ser localizados por motivos que não sejam o suporte a escala ou contraste, principalmente quando contêm texto ou material com características culturais. Os arquivos também podem variar dependendo do local de um usuário, independentemente do idioma. Por exemplo, um mapa pode ter fronteiras diferentes, dependendo da localização do usuário, mas os rótulos devem seguir o idioma preferido do usuário. Para saber mais sobre por que isso pode ser necessário, consulte Diretrizes para globalização e localização.

Se você precisar de recursos diferentes de acordo com o idioma e a localização, o Tempo de Execução do Windows também dará suporte a uma convenção em que o idioma e a localização possam ser determinados em tempo de execução e recursos diferentes sejam carregados conforme adequado. Essa convenção usa nomes de pasta, não nomes de arquivo. Portanto, você pode combinar as convenções de nome de arquivo descritas aqui com as convenções de pasta para definir os recursos que dão suporte a escala/contraste e questões de localização. Também há suporte para recursos específicos a RTL e uma convenção targetsize, que é usada em situações especiais, como imagens exibidas pelo sistema para associações de arquivos. Veja Como nomear recursos usando qualificadores para saber mais sobre a convenção de nome de pasta para recursos e convenções de qualificação.

Tópicos relacionados

Como nomear recursos usando qualificadores

Imagens do aplicativo

Diretrizes de dimensionamento de acordo com a densidade de pixels

Tamanhos de imagem de bloco