Como personalizar blocos da tela inicial para aplicativos de área de trabalho (aplicativos do Tempo de Execução do Windows)

  • Artigo

[ 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]

A partir do Windows 8.1, os desenvolvedores de aplicativos Win32 podem personalizar a aparência do bloco do aplicativo de área de trabalho na tela inicial. No Windows 8, esses blocos só eram fornecidos pelo sistema, sem opção de personalização pelo desenvolvedor. O ícone do aplicativo era mostrado em um bloco com base na cor de fundo da tela inicial. O Windows 8.1 oferece uma aparência de bloco padrão mais variada, mas também permite que você crie uma identidade visual ainda maior em seu bloco com cores e imagens próprias.

As personalizações disponíveis para o bloco do seu aplicativo de área de trabalho são:

  • Imagens personalizadas de sangramento total
  • Uma cor da tela de fundo especificada
  • A opção para mostrar ou ocultar o nome do aplicativo no bloco
  • Cor de texto clara ou escura especificada, se você optar por mostrar o nome do aplicativo

Você pode personalizar completamente o bloco, mas também deve estar ciente das mudanças na aparência do bloco padrão, que podem ser suficientes. O bloco padrão que o Windows atribui ao seu aplicativo ainda é um bloco médio que mostra o nome e o ícone do aplicativo. No entanto, a partir do Windows 8.1, o layout foi modificado, e o Windows extrai a cor do ícone do aplicativo para aplicar uma cor de fundo semelhante ou complementar em torno desse ícone.

A imagem a seguir mostra a aparência dos mesmos blocos padrão no Windows 8 e no Windows 8.1, usando a mesma cor de fundo da tela inicial.

Blocos do Microsoft Office mostrados para Windows 8 e Windows 8.1

Se você optar por personalizar ainda mais o bloco, usará um arquivo XML especializado. O esquema usado por esse arquivo é semelhante ao esquema de blocos usado para blocos de aplicativos da Windows Store, mas não faça confusão—eles não são intercambiáveis. Este tópico o orienta na criação do seguinte exemplo de arquivo, em que os atributos Square150x150Logo e Square70x70Logo são opcionais porém todos os outros são obrigatórios.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Pré-requisitos

  • Noções básicas sobre XML
  • Noções básicas sobre parâmetros de linha de comando
  • Noções básicas sobre a nomenclatura e o empacotamento de recursos de versões localizadas, de dimensionamento e de alto contraste de imagens. Para saber mais, veja Como nomear recursos usando qualificadores.

Instruções

Etapa 1: Criar o arquivo XML de personalização

  • Especifica as personalizações para seu bloco
  • Coloque no mesmo diretório do seu arquivo executável
  • Dê o mesmo nome do seu arquivo executável, com uma extensão ".VisualElementsManifest.xml". Por exemplo, se o arquivo executável for "contoso.exe", o arquivo XML complementar será nomeado "contoso.visualelementsmanifest.xml".

Adicione o código a seguir ao arquivo XML que você criou.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements/>
</Application>

Etapa 2: Declarar uma cor de plano de fundo

  • Obrigatório
  • Especifique como qualquer valor hexadecimal RGB ou como uma destas cadeias de caracteres predefinidas:
    • preto
    • prata
    • cinza
    • branco
    • castanho-avermelhado
    • vermelho
    • roxo
    • fúcsia
    • verde
    • verde-limão
    • verde-oliva
    • amarelo
    • azul-marinho
    • azul
    • azul-petróleo
    • azul-piscina

Exemplos dos dois métodos para expressar o valor da cor são mostrados a seguir:


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"/>
</Application>


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="red"/>
</Application>

Etapa 3: Declarar se o nome do aplicativo deve aparecer no bloco

  • Obrigatório
  • O atributo ShowNameOnSquare150x150Logo tem dois valores possíveis:
    • "on" para mostrar o nome
    • "off" para ocultar o nome
  • Somente o tamanho de bloco médio (150x150) pode exibir um nome de aplicativo.

O nome do aplicativo é o nome do arquivo de atalho do menu Iniciar do aplicativo ou do respectivo arquivo executável se não houver nenhum arquivo de atalho.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"/>
</Application>

Etapa 4: Declarar uma cor de texto de primeiro plano

  • Obrigatório, mesmo quando ShowNameOnSquare150x150Logo="off"
  • Refere-se ao nome do aplicativo no bloco.
  • O atributo ForegroundText tem dois valores possíveis:
    • "light" para um texto branco
    • "dark" para um texto preto

Escolha um valor que apareça melhor contra a cor da tela de fundo declarada. Para obter máxima visibilidade e acessibilidade, tenha como objetivo no mínimo uma taxa de luminância de 4,5:1 entre a cor de texto e a cor da tela de fundo. Para saber mais, veja o padrão de acessibilidade W3C G18: garantindo uma relação de contraste de no mínimo 4,5:1 entre o texto (e as imagens do texto) e a tela de fundo do texto.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"/>
</Application>

Etapa 5: Especificar imagens

  • Opcional
  • Forneça imagens de sangramento total para substituir o ícone e a tela de fundo padrão
  • Há suporte apenas para tamanhos de bloco médio (150x150) e pequeno (70x70)
  • Restrições de imagem de bloco normais se aplicam:
    • Dimensões inferiores ou iguais a 1024x1024 pixels
    • Tamanho de arquivo inferior ou igual a 200 KB
    • Tipo de arquivo .png, .jpg, .jpeg ou .gif

Importante  Se você optar por uma imagem personalizada, deverá especificar uma imagem para os atributos Square150x150Logo e Square70x70Logo. Se você especificar somente um desses atributos, esse arquivo XML inteiro será ignorado, e o estilo padrão (ícone e tela de fundo do aplicativo) será aplicado ao bloco.

 

As práticas recomendadas de design de bloco especificam que se o seu bloco não for dinâmico, ele não deverá reivindicar o espaço de tela extra necessário para os blocos largos (310 x 150) e grandes (310 x 310). Como o bloco de um aplicativo de área de trabalho é sempre estático e nunca dinâmico, este esquema não dá suporte a esses tamanhos de blocos adicionais.

Neste exemplo, as imagens estão localizadas em uma pasta chamada "Assets", que é irmã do arquivo YourAppName.VisualElementsManifest.xml. Esses nomes de arquivo podem ser os nomes de arquivo verdadeiros ou nomes genéricos usados para os arquivos dimensionados, de alto contraste ou localizados discutidos na etapa 6. Consulte a seção Comentários para ver uma discussão sobre a nomenclatura de ativos de imagem.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Agora esse é seu .VisualElementsManifest.xml completo. Inclua esse arquivo na instalação do seu aplicativo como irmão do arquivo executável do aplicativo.

Etapa 6: Especificar imagens para dimensionamento, localização e alto contraste

  • Opcional, mas recomendado
  • Se você não fornecer imagens dimensionadas, de alto contraste ou localizadas, poderá ignorar essa etapa
  • Para obter máxima qualidade de exibição, forneça um conjunto completo de ativos dimensionados para cada imagem especificada na etapa 5. Veja a seção Comentários para saber mais detalhes.
  • Use as convenções de nomenclatura de sistema de gerenciamento de recursos normais e o arquivo Resource.pri

Observação  Se você não fornecer um conjunto completo de ativos dimensionados, o Windows dimensionará os ativos incluídos conforme necessário. É melhor incluir um dos tamanhos maiores (140% ou 180%), pois a redução geralmente proporciona resultados melhores do que a ampliação.

 

Com base nas configurações do sistema ativas quando o bloco é atualizado, o Windows usa um arquivo Resources.pri para escolher o ativo de imagem correto do seu conjunto. Vamos criar esse arquivo nesta etapa.

  1. Criar uma pasta de trabalho. Esta pasta não está incluída na instalação do seu aplicativo, ela é usada apenas durante a criação do arquivo Resources.pri. Neste exemplo, vamos chamá-la de "CreateResources".

    md %USERPROFILE%\Documents\CreateResources

  2. Criar um subdiretório de CreateResources para manter os arquivos de imagem. Neste exemplo, vamos chamá-la de "Assets".

    md %USERPROFILE%\Documents\CreateResources\Assets

  3. Coloque as suas imagens dimensionadas, de alto contraste e/ou localizadas na pasta "Assets". Você pode incluir as imagens como uma lista simples ou estruturada em subdiretórios, desde que siga as convenções de nomenclatura e estrutura obrigatórias. Para as finalidades deste exemplo, vamos fornecer os ativos dimensionados e de alto contraste como uma lista simples.

    • 150x150Logo.scale-80.png
    • 150x150Logo.scale-100.png
    • 150x150Logo.scale-140.png
    • 150x150Logo.scale-180.png
    • 70x70Logo.scale-80.png
    • 70x70Logo.scale-100.png
    • 70x70Logo.scale-140.png
    • 70x70Logo.scale-180.png
    • 150x150Logo.scale-80_contrast-white.png
    • 150x150Logo.scale-100_contrast-white.png
    • 150x150Logo.scale-140_contrast-white.png
    • 150x150Logo.scale-180_contrast-white.png
    • 150x150Logo.scale-80_contrast-black.png
    • 150x150Logo.scale-100_contrast-black.png
    • 150x150Logo.scale-140_contrast-black.png
    • 150x150Logo.scale-180_contrast-black.png
    • 70x70Logo.scale-80_contrast-white.png
    • 70x70Logo.scale-100_contrast-white.png
    • 70x70Logo.scale-140_contrast-white.png
    • 70x70Logo.scale-180_contrast-white.png
    • 70x70Logo.scale-80_contrast-black.png
    • 70x70Logo.scale-100_contrast-black.png
    • 70x70Logo.scale-140_contrast-black.png
    • 70x70Logo.scale-180_contrast-black.png

  4. Crie um arquivo de configuração MakePRI. Este é um arquivo XML usado pelo MakePRI.exe para especificar quais imagens são indexadas em Resources.pri. Execute o comando a seguir para criar o arquivo de configuração, que chamamos "TestAppConfig.xml". Observe que não estamos gravando esse arquivo na pasta CreateResources. Isso evita que o próprio arquivo de configuração seja incluído no índice.

    Importante  A MakePRI.exe ferramenta de linha de comando, incluída no Windows SDK, pode ser baixada gratuitamente. Se você usa o Microsoft Visual Studio, então é provável que o MakePRI.exe já esteja no seu sistema como parte dessa instalação.

     

    Esse comando e o seguinte pressupõem que a localização de MakePRI.exeesteja no seu caminho. Se não estiver, procure-o em "Arquivos de Programas\Windows Kits" e inclua seu caminho completo nesses comandos.

    
makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high
    Argumento de comando Definição
    /cf Caminho e nome do arquivo de configuração que você está criando
    /dq O(s) qualificador(es) padrão. Pelo menos um qualificador (lang, scale, etc.) é necessário.

     

  5. Crie o arquivo Resources.pri. Execute o seguinte comando, que usa o arquivo de configuração TestAppConfig.xml que você acabou de criar para produzir um arquivo Resources.pri no mesmo diretório CreateResources.

    
makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri
    Argumento de comando Definição
    /pr Localização raiz dos arquivos do projeto
    /cf Caminho do arquivo XML de configuração
    /in Nome do índice de recursos no arquivo Resources.pri. Normalmente corresponde ao nome do aplicativo.
    /of Local de saída do arquivo Resources.pri. Se omitido, a raiz do projeto especificada com o argumento /pr será usada.

     

  6. Inclua o arquivo Resources.pri na instalação do aplicativo. Coloque-o no mesmo diretório do arquivo .exe do aplicativo e seu arquivo .VisualElementsManifest.xml. Durante a instalação, armazene o .VisualElementsManifest.xml antes de instalar o arquivo de atalho do aplicativo.

Etapa 7: Importante! Atualizar seu arquivo de atalho

Se o seu aplicativo já estiver instalado, você deverá deslocar seu atalho depois que o .VisualElementsManifest.xml novo ou atualizado estiver armazenado, senão ele será ignorado. O seguinte exemplo de comando do Windows PowerShell referente ao aplicativo fictício da Contoso é um modelo de como fazer isso, apesar de haver muitas outras maneiras possíveis.


(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date

Comentários

Importante  Se alguma coisa estiver errada com seu arquivo .VisualElementsManifest.xml, o bloco voltará a ser o padrão fornecido pelo Windows. Possíveis erros de arquivo podem incluir um arquivo XML inválido, a omissão de atributos necessários, valores de atributos inválidos ou imagens que não podem ser localizadas.

 

Você pode usar o arquivo MakePRI.exe com a opção de comando dump para examinar o conteúdo do arquivo Resources.pri. Isso pode ser útil para a solução de problemas. Para obter mais informações na ferramenta MakePRI.exe, veja configuração MakePRI.exe e opções de comando MakePRI.exe.

Ao solucionar problemas, você também pode examinar o Visualizador de eventos para o evento 28032 no log\Microsoft\Windows\Shell-Core\Operational Logs de Aplicativos e Serviços. Os dados do evento incluem o caminho do arquivo .VisualElementsManifest.xml, o código de erro HRESULT e uma cadeia de caracteres de erro, se estiver disponível.

Trabalhando com o sistema de gerenciamento de recursos

Embora o escopo deste tópico não seja explicar minuciosamente o sistema de gerenciamento de recursos, apresentaremos a seguir uma breve visão geral a respeito. Para obter uma discussão aprofundada, leia os tópicos do Sistema de Gerenciamento de Recursos.

Um conjunto completo de imagens de recursos inclui:

  • Uma imagem separada para cada nível de ajuste predefinido de DPI (80%, 100%, 140% e 180%)
  • Versões de alto contraste (branco sobre preto e preto sobre branco) de cada imagem
  • Imagens localizadas se quiser que o seu bloco use uma imagem diferente com base no idioma do sistema, por exemplo quando a sua imagem contém texto.

Você pode fornecer todas essas imagens ou apenas um subconjunto.

Os nomes dos arquivos seguirão o padrão name.scale-100.ext, name.scale-100_contrast-black.ext e assim por diante. Você também pode fornecer qualificadores através de uma estrutura de diretórios, em vez de no nome do arquivo. Entretanto, no arquivo .VisualElementsManifest.xml, você faz referência somente ao name raiz do arquivo. Por exemplo, você pode fornecer esses arquivos para o tamanho de bloco médio:

  • 70x70Logo.scale-80.png
  • 70x70Logo.scale-100.png
  • 70x70Logo.scale-140.png
  • 70x70Logo.scale-180.png
  • 70x70Logo.scale-80_contrast-white.png
  • 70x70Logo.scale-100_contrast-white.png
  • 70x70Logo.scale-140_contrast-white.png
  • 70x70Logo.scale-180_contrast-white.png
  • 70x70Logo.scale-80_contrast-black.png
  • 70x70Logo.scale-100_contrast-black.png
  • 70x70Logo.scale-140_contrast-black.png
  • 70x70Logo.scale-180_contrast-black.png

Entretanto, no arquivo .VisualElementsManifest.xml você só faz referência a "70x70Logo.png", como em nosso exemplo. Com base nas configurações atuais do sistema, o Windows usa o arquivo Resources.pri para selecionar a versão correta do arquivo 70x70Logo a partir de todas essas opções listadas. Para ver um tutorial completo sobre as convenções de nomenclatura que fazem esse sistema funcionar, confira Guia de início rápido: usando recursos de arquivo ou imagem.

XSD de personalização de bloco de aplicativo de área de trabalho

O XSD do esquema usado na personalização de blocos de aplicativos de área de trabalho é mostrado aqui.


<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  
           xmlns:xs="http://www.w3.org/2001/XMLSchema">  
  
    <xs:simpleType name="st_nonemptystring">  
        <xs:restriction base="xs:string">  
            <xs:minLength value="1"/>  
            <xs:maxLength value="32767"/>  
            <xs:pattern value="[^\s]|([^\s].*[^\s])"/>  
        </xs:restriction>  
    </xs:simpleType>  
    
    <xs:simpleType name="st_filenamecharset">  
        <xs:restriction base="st_nonemptystring">  
            <xs:pattern value=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_filename">  
        <xs:restriction base="st_filenamecharset">  
            <xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>  
            <xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>  
            <xs:maxLength value="256"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_imagefile">  
        <xs:restriction base="st_filename">  
            <xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_color">  
        <xs:restriction base="xs:string">  
            <xs:pattern value="#[\da-fA-F]{6}"/>  
            <xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_foregroundtext">  
        <xs:restriction base="xs:string">  
            <xs:enumeration value="light"/>  
            <xs:enumeration value="dark"/>  
        </xs:restriction>  
    </xs:simpleType>  

    <xs:simpleType name="st_showname">
        <xs:restriction base="xs:string">
            <xs:enumeration value="on"/>
            <xs:enumeration value="off"/>
        </xs:restriction>
    </xs:simpleType>
  
    <xs:complexType name="ct_visualelements">
        <xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>  
        <xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
        <xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>  
        <xs:attribute name="BackgroundColor" type="st_color" use="required"/>
        <xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>  
    </xs:complexType>  
  
    <xs:complexType name="ct_application">  
        <xs:all>  
            <xs:element name="VisualElements" type="ct_visualelements" />  
        </xs:all>  
    </xs:complexType>  
  
    <xs:element name="Application" type="ct_application" />  
  
</xs:schema>

Tópicos relacionados

Sistema de Gerenciamento de Recursos

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

Como nomear recursos usando qualificadores

Configuração de MakePRI.exe

Opções de comando de MakePRI.exe