André Alves de Lima

Talking about Software Development and more…

Organize melhor o seu XAML colocando um elemento em cada linha

Olá caros(as) leitores(as), Esta semana trago a vocês um artigo bem simples e rápido, que na verdade contém uma dica para organizar melhor o seu código XAML. Se você trabalha com XAML no seu dia-a-dia, juntamente com algum sistema de controle de versão, como, por exemplo, o Team Foundation Server ou GitHub, você provavelmente já notou que é um pouco confuso fazer comparações entre diferentes versões de um arquivo XAML. Isso se deve ao fato que, por padrão, o Visual Studio deixa você lidar com o posicionamento dos elementos dentro das tags do seu XAML do jeito que você quiser. Isso faz com que cada desenvolvedor utilize uma maneira de formatar o XAML e, por consequência, causa certa desorganização, dificultando a comparação das versões de um mesmo arquivo XAML.

XAML sem organização dos elementos

Na comparação de duas versões de um arquivo XAML acima, note que fica difícil saber de imediato quais foram os elementos alterados, quais elementos foram adicionados, removidos, etc.
Eu nunca tinha parado para pensar nisso e simplesmente sobrevivi a essa desorganização sem dar muita atenção a esse detalhe. Porém, certo dia eu estava dando uma olhada na gravação de um evento que o Laurent Bugnion (Senior Director na IdentityMine e criador do MVVM Light Toolkit) e o Jaime Rodriguez (Principal Technical Evangelist na Microsoft) fizeram, chamado XAML Deep Dive for Windows & Windows Phone Apps Jump Start. Neste evento, o Laurent Bugnion deu uma dica que achei muito interessante. A dica dele foi para que nós, desenvolvedores de código XAML, utilizarmos uma configuração do Visual Studio que faz com que cada elemento das tags do XAML fique em linhas separadas. Dessa forma o XAML fica muito mais organizado e as comparações de diferentes versões do mesmo arquivo ficam muito mais claras.

XAML com um elemento em cada linha

Para configurar essa opção no Visual Studio, basta ir em “Tools -> Options -> Text Editor -> XAML -> Formatting -> Spacing” e selecionar a opção “Position each attribute on a separate line“.

Position each attribute on a separate line

Feito isso, sempre que você fechar uma tag no XAML, o Visual Studio vai formatar os elementos para que eles fiquem cada um em uma linha. Você pode também forçar a formatação de um arquivo já existente utilizando a opção “Edit -> Advanced -> Format Document“.

Format Document

É isso aí. O artigo de hoje foi curto, porém, espero que essa dica ajude vocês leitores(as) a organizarem melhor os seus códigos XAML, como acabou me ajudando.
Até a próxima semana!
André Lima

2 thoughts on “Organize melhor o seu XAML colocando um elemento em cada linha

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *