O que é o Xaml?

Linguagem de marcação baseado em XML desenvolvido para facilitar a integração entre developers e designers.

É tarefa do Designer entender o XAML?

Esta é uma pergunta que eu não sei responder, depende de cada um, eu gosto muito do formato de escrita e não posso falar pelos outros, mas acredito que posso compreender uma parte do código fonte e ainda fazer um bom trabalho no FrontEnd.

Se você é um programador, não se assuste se o Designer não quizer nem olhar para o código fonte, ai entramos com o Blend, para dar suporte para nossos amigos Designers gráficos, sim! Eles agora vão ter que ser seus amigos!

Pois o Silverlight foi feito, na minha opinião, para os profissionais da área gráfica e o programador se vê com bilhões de oportunidades na sua frente, mas sem usabilidade e acessibilidade e outros conceitos, os projetos RIA podem ir por água abaixo.

O Expression Blend e o XAML pode ser feito com simples códigos milhares de possibilidades de desenho, pois na verdade é simples, design começa em sua essência, linha, circulo, triangulo, retângulo e assim por diante.

Eu prefiro no momento nem comentar os Shapes como; Elipse, Rectangle e outros… vamos unir estes no futuro e formar nossos layouts, é o suficiente!

Abaixo entenda como desenhar em Xaml, eu posso até chamar de meu design "open source", que não deixa de ter uma certa ironia.

Tipos de Desenho em Xaml

Hoje no Expression Blend 4 já encontramos uma biblioteca extensa de desenhos como estrelas, balões, e muitas outras formas úteis que podem ser misturada com outros objetos.

Mas entenda abaixo como funciona os Paths, e como são editados através do XAML.

Veja o que cada comando define um PATCH, que é o que precisamos para desenhar qualquer coisa em nosso XAML.

F n – Define FillRule, 0 = EvenOdd e 1 NonZero

M x,y – Inicia uma Nova PathFigure e define StarPoint como (x,y). Isto deve constar antes no código do que os outros comandos exceto F
O M significa mover.

Z – Encerra uma PathFigure e define IsClosed como true.
É possível começar qualquer PathFigure independente depois disso com um comando M ou usar um comando diferente para iniciar uma nova PathFigure a partir do ponto atual.

Caso não queira fechar a PathFigure, poderá omitir todo o comando Z.

PathSegments

L x,y Cria um LineSegment para(x,y)

A rx,ry d f1 f2 x,y – Cria um ArcSegment para (x,y) baseado em uma elipse com raios rx e ry, com rotação de d graus. Os flags f1 e f2 podem ser definido com 0 (false) ou como 1(true) para controlarem duas das propriedades ArcSegment: IsLargeArc e Clockwise, respectivamente.
C xy,y1 x2,y2 x,y – Cria um BezierSegment para (x,y) usando pontos de controle (x1,y1) e (x2,y2). O C significa curva de Bezier cúbica.

Q x1,y1 x,y- Cria um QuadraticBezierSegment para (x,y) usando ponto de controle (x1,y1)

Atalhos Adicionais

Hx – Cria um LineSegment para(x,y) onde o y é retirado do ponto atual. O H significa uma linha horizontal.

Vx – Cria um LineSegment para(x,y) onde o y é retirado do ponto atual. O H significa uma linha vertical.

S x2,y2 x,y – Cria um BezierSegment para(x,y) usando pontos de controle (x1,y1) e (x2,y2), onde x1 e y1 são automaticamente calculados para garantir suavidade (esse pode ser o segundo ponto de controle do segmento anterior ou o ponto atual, caso o segmento anterior não seja um BezierSegment). O S significa curvade Bézier cúbica suave.

Pode se utilizar letras maiúsculas ou minúsculas para estes comandos de seu PATCH.
Você também pode ignorar os espaços em brancos e as vírgulas, mas para os parâmetros é necessário as vírgulas para diferenciar, mas ficaria muito confuso talvez.

M 0,0 L 0,100 L100,100 Z

Os designers só podem estar pensando, "esse cara só pode estar maluco que eu vou ter que aprender para poder desenhar meu layout…" na realidade nem eu sou louco suficiênte para decorar tudo isto, mas pode ser muito útil este post quando estiver desenhando uma logomarca ou uma ilustração mais complexa.

E com certeza os programadores pensam, isto é tarefa de designer, e ponto final.

Pois bem, pensando pelo lado do programador, acredito que ele só pode ta certo, como ele vai fazer o design gráfico do sistema?

O fato é que o desenho é código e vice-versa, é muito novo para o designer copiar um código fonte e colar uma logomarca, mas é muito melhor desta forma do que nos outros programas, que você não tem a mínima noção do que ocorre por "baixo dos panos" do visual!

Veja abaixo um exemplo do que descrevi acima e repare o código e o desenho:

 

 

Combinando objetos

É muito simples combinar objetos no Blend, e também muito útil, a idéia é compor vetoriais e formar desenhos com maior facilidade veja abaixo as opções que temos para unir os nossos vetoriais do projeto.

Unite – Faz a união dos objetos selecionados, transformando em um path editável.

Divide– Faz a combinação dos objetos, porém separa em linhas as intersecções.

Intersect – Combina o objeto mantendo somente a sobreposição das vetores.

Subtract – Faz o oposto ao Intersect mantem a parte oposta da sobreposição dos vetores

Exclude Overlap – Exclui a sobreposição e mantém o restante do patch.

Para executar os comandos basta selecionar 2 ou mais objetos e clicar com o botão direito e procurar por Combine, conforme a imagem abaixo:

 

Confira o resultado do Unite, o restante das ações você pode experimentar no Expression Blend.

 

Convertendo em Path

Deu para perceber o quanto os paths são importantes dentro do XAML, por este motivo nós podemos criar os shapes nativos do Blend e converter em path, isto pode ser muito útil com elipses e com retângulos com bordas arredondas, para desenvolver outros desenhos não seria necessário fazer tudo do zero com a ferramenta Pen por exemplo.

Confira abaixo na figura como converter em path os seu vetor:

 

Veja o que pode ser feito com esta conversão no exemplo abaixo: