Idioma: HTML | XAML

Guia de início rápido: usando recursos de arquivo ou imagem (XAML)

Applies to Windows and Windows Phone

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 troca de imagens com base em configurações de alto contraste ou escala de exibição vem integrado se você seguir 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 escalas diferentes (DPI) e configurações de contraste.

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

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

      1. Tamanho original, para um típico dispositivo de 96dpi.
      2. 140% do tamanho original. Por exemplo, uma imagem de 100x100px também deve ter uma versão de imagem 140x140px.
      3. 180% do tamanho original. Por exemplo, uma imagem de 100x100px também deve ter uma versão de imagem 180x180px.
      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 240x240px.
      5. Para os recursos logo, wideLogo e smallLogo especificados no arquivo manifesto do aplicativo, 80% do tamanho original. Por exemplo, uma imagem de 100x100px também deve ter uma versão de imagem 80x80px. Veja Imagens de aplicativos e Tamanhos de imagem de bloco.
      6. Imagem de alto contraste com um fundo preto e primeiro branco plano no tamanho original.
      7. Imagem de alto contraste com um fundo branco e primeiro plano preto no tamanho original.
    2. Nomeie as imagens com qualificadores para as diversas configurações de escalas e contraste:

      1. name.scale-100.ext
      2. name.scale-140.ext
      3. name.scale-180.ext
      4. name.scale-240.ext
      5. name.scale-80.ext (para os recursos logo, wideLogo e smallLogo)
      6. name.scale-100_contrast-black.ext
      7. name.scale-100_contrast-white.ext

      Neste exemplo, name.ext é o nome da imagem como mencionada no código e na marcação.

    3. Coloque as imagens lado a lado na mesma pasta. 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. Consulte as imagens em XAML sem os qualificadores.
    
    <Image Source="images/logo.png" />
    
    
  3. Consulte as imagens em código sem os qualificadores.
    
    var uri = new System.Uri("ms-appx:///images/logo.png");
    var file = Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);
    
    
  4. Consulte as imagens no manifesto sem os qualificadores.
    1. Clique com o botão direito do mouse no arquivo Package.appxmanifest no Microsoft Visual Studio.
    2. Edite a referência do manifesto para se referir ao arquivo no elemento ou atributo correto, por exemplo:
      
      Logo:	images\logo.png
      
      

Algumas imagens ou outros arquivos podem precisar ser traduzidos, 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.

Os arquivos podem ser marcados ou qualificados usando convenções básicas de nomes de pasta e arquivo para todas as diferentes configurações do usuários e do dispositivo. Veja Como nomear recursos usando qualificadores para saber mais detalhes sobre os recursos de qualificação e uma lista de qualificadores.

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
Mapa para criar aplicativos em C#, C++ ou VB

 

 

Mostrar:
© 2014 Microsoft