Visão geral da análise XAML

A análise XAML é uma ferramenta que notifica você sobre problemas de desempenho em seu aplicativo. Ele verifica o código do aplicativo em relação a um conjunto de diretrizes de desempenho e práticas recomendadas e identifica problemas de um conjunto de regras de problemas comuns.

Quando a ferramenta encontra um problema, ela aponta para as ferramentas de diagnóstico, as informações de origem e a documentação do Visual Studio para que você possa investigar e corrigir o problema.

Tamanho da imagem decodificada maior que o tamanho da renderização

As imagens capturadas em altas resoluções podem fazer com que seu aplicativo use mais CPU ao decodificar e mais memória após o carregamento do disco. Não há nenhuma vantagem em decodificar uma imagem de alta resolução se você exibi-la apenas em um tamanho menor. Em vez disso, crie uma versão da imagem no tamanho em que você a exibe na tela usando as propriedades DecodePixelWidth e DecodePixelHeight.

Impacto

Exibir imagens em tamanhos diferentes do tamanho nativo pode afetar negativamente o tempo de CPU (decodificação e download) e a memória.

Causas e soluções

A imagem não foi definida de forma assíncrona

Seu aplicativo usa SetSource() em vez de SetSourceAsync(). Sempre use SetSourceAsync ao definir um fluxo para decodificar imagens de forma assíncrona.

A origem da imagem é definida antes que o elemento esteja na árvore dinâmica

O BitmapImage é conectado à árvore XAML ativa após definir o conteúdo com SetSourceAsync ou UriSource. Sempre anexe um BitmapImage à árvore dinâmica antes de definir a origem. Quando você especifica um elemento de imagem ou pincel na marcação, o anexo ocorre automaticamente.

Boa – origem especificada na marcação usando BitmapImage:

<Image x:Name="myImage">
    <Image.Source>
        <BitmapImage UriSource="Assets/cool-image.png"/>
    </Image.Source>
</Image>

Bom : conectar o BitmapImage à árvore antes de definir seu UriSource:

Image myImage = new Image();
var bitmapImage = new BitmapImage();
myImage.Source = bitmapImage;
bitmapImage.UriSource = new Uri("ms-appx:///Assets/cool-image.png", UriKind.RelativeOrAbsolute);

Incorreto — definir a UriSource de BitmapImage antes de conectá-la à árvore:

Image myImage = new Image();
var bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("ms-appx:///Assets/cool-image.png", UriKind.RelativeOrAbsolute);
myImage.Source = bitmapImage;

O pincel de imagem não é retangular

Quando você usa uma imagem para um pincel não retangular, a imagem usa um caminho de rasterização de software, que não dimensiona imagens. Além disso, o sistema armazena uma cópia da imagem na memória de software e hardware. Quando você usa um pincel não retangular, dimensione previamente suas imagens para aproximadamente o tamanho em que as renderiza.

Como alternativa, defina um tamanho de decodificado explícito usando as propriedades DecodePixelWidth e DecodePixelHeight :

<Image>
    <Image.Source>
    <BitmapImage UriSource="ms-appx:///Assets/highresCar.jpg"
                 DecodePixelWidth="300" DecodePixelHeight="200"/>
    </Image.Source>
</Image>

As unidades para DecodePixelWidth e DecodePixelHeight são pixels físicos por padrão. Defina DecodePixelType como Logical para que o tamanho de decodificação seja contabilizado automaticamente para o fator de escala atual do sistema, semelhante a outro conteúdo XAML.

Se você não conseguir determinar com antecedência um tamanho de decodificação apropriado, conte com a decodificação automática no tamanho adequado do XAML, que faz o melhor esforço para decodificar a imagem no tamanho apropriado.

Imagens usadas dentro do BitmapIcons retornam ao tamanho natural

Defina um tamanho de decodificação explícito usando as propriedades DecodePixelWidth e DecodePixelHeight.

DecodePixelWidth ou DecodePixelHeight são maiores que o tamanho da exibição

Se você definir DecodePixelWidth explicitamente ou DecodePixelHeight maior que o tamanho de exibição da imagem na tela, o aplicativo usará memória extra (até 4 bytes por pixel), o que se tornará caro para imagens grandes.

A imagem está oculta

A imagem fica oculta ao definir Opacity como 0 ou Visibility como Collapsed no elemento de imagem hospedeiro, no pincel ou em um elemento pai. Imagens não visíveis na tela devido ao recorte ou à transparência podem recorrer à decodificação no tamanho natural.

A imagem usa a propriedade NineGrid

Quando você usa uma imagem com NineGrid, a imagem usa um caminho de rasterização de software. Dimensione previamente suas imagens para aproximadamente o tamanho em que você as renderiza.

Elementos recolhidos ao carregar

Um padrão comum é ocultar os elementos da interface do usuário inicialmente e mostrá-los posteriormente. Na maioria dos casos, você deve adiar esses elementos usando x:Load para evitar pagar o custo de criação do elemento em tempo de carga.

Impacto

Os elementos, mesmo recolhidos, são carregados junto com os demais e aumentam o tempo de carregamento.

Solution

Use o atributo x:Load para atrasar o carregamento da interface do usuário. O elemento é carregado quando necessário, o que reduz o processamento inicial. Você também pode usar x:Bind para controlar o estado de carregamento.

ListView não está virtualizado

A virtualização da interface do usuário é a melhoria mais importante que você pode fazer para o desempenho da coleção. Os elementos de interface do usuário que representam itens são criados sob demanda. Para um controle associado a uma coleção de 1000 itens, a criação de toda a interface do usuário ao mesmo tempo desperdiça recursos porque você não pode exibir todos os itens simultaneamente. ListView e GridView cuidam da virtualização da interface do usuário para você — elas geram a interface para itens próximos à área visível e recuperam memória de itens que foram rolados para fora da área visível.

Impacto

Um ItemsControl não virtualizado aumenta o tempo de carregamento e o uso de recursos ao carregar mais itens filhos do que o necessário.

Solution

Defina uma largura e uma altura para o ItemsControl para definir uma área de visualização. Quando você coloca um controle virtualizado em um painel com espaço ilimitado (como ScrollViewer ou um Grid com linhas dimensionadas automaticamente), o controle ocupa espaço suficiente para todos os itens, o que inviabiliza a virtualização.

Thread da interface do usuário bloqueada ou ociosa durante o carregamento

O bloqueio de thread da interface do usuário ocorre quando chamadas síncronas para funções em execução fora do thread bloqueiam o thread da interface do usuário. Mantenha a thread da interface do usuário responsiva ao usar APIs assíncronas. Para obter mais informações, consulte Manter a thread da interface do usuário responsiva.

Usar {x:Bind} em vez de {Binding}

{Binding} usa mais tempo e memória do que {x:Bind}. Criar uma {Binding} resulta em uma série de alocações, e atualizar um destino de vinculação pode envolver reflexão e boxing. Use {x:Bind}, que compila vinculações durante a compilação para melhor desempenho e validação em tempo de compilação.

Usar x:Key em vez de x:Name em ResourceDictionaries

Quando você usa x:Name em um recurso, a plataforma o instancia imediatamente porque x:Name cria uma referência a um campo. Em vez disso, use x:Key quando você não precisar referenciar o recurso do code-behind.

Usar painéis de virtualização para coleções

Se você fornecer um modelo de painel de itens personalizado (veja ItemsPanel), use um painel de virtualização como ItemsWrapGrid ou ItemsStackPanel. Usar VariableSizedWrapGrid, WrapGrid ou StackPanel desabilita a virtualização.

Acessibilidade: fornecer nomes para elementos UIA

Defina AutomationProperties.Name no XAML do controle como uma cadeia de caracteres localizada apropriada. Se um elemento não deve aparecer na árvore UIA, defina AutomationProperties.AccessibilityView = "Raw".

Evite atribuir a dois elementos UIA com o mesmo pai o mesmo Name e ControlType. Em listas em que nomes duplicados são comuns, use a vinculação para definir AutomationProperties.Name com base em uma fonte de dados.

Conteúdo relacionado

• Otimizar sua marcação XAML
• Otimizar seu layout XAML
• Manter o thread da interface do usuário responsivo