11 junho, 2010

Behavior para filtrar galerias Deep Zoom por tags

Acabei de publicar no Expression Gallery uma behavior para filtrar imagens em uma colleção do Deep Zoom.

image

Essa behavior, quando aplicada a um objeto do tipo MultiScaleImage, permite que se filtre as imagens dessa coleção de forma semelhante ao que acontece no site Memorabilia do HardRock Café.

O uso da behavior é muito simples:

  • Anexe a behavior à um objeto MultiScaleImage.
  • Defina as propriedades Source e MetadataUri da behavior respectivamente para a url da galeria e o arquivo de metadados da galeria.
  • Defina o valor da propriedade Filter da behavior para o filtro que quer aplicar.

A behavior trabalha com o arquivo de metadados gerado pelo Deep Zoom Composer para saber quais tags estão associadas a cada imagem. Ela entende tags separadas por vírgula (,) tanto para atribuir às imagens quanto para filtrar. Filtrar por múltiplas tags vai exibir todas as imagens que tenham pelo menos uma das tags do filtro.

O arquivo de metadados não precisa ser necessáriamente o mesmo gerado pelo Composer, mas deve ter o mesmo formato. A behavior o campo ZOrder do arquivo de metadados para saber qual é cada imagem, portanto, se esse arquivo for gerado manualmente deve se tomar o cuidado de garantir que estão sendo atribuídas as tags às imagens certas e sempre que a galeria for atualizada o arquivo de metadados também precisará ser atualizado.

A behavior também expõe uma propriedade (AvailableTags) que é um array contendo todas as tags disponíveis na galeria atual. Isso pode ser bem útil se quisermos exibir na tela todas as tags, como fiz no exemplo que está no Expression Gallery.

Cada vez que o filtro for alterado, a galeria será filtrada e ocorrerá uma animação para exibir as imagens desejadas. É possível controlar o tempo dessa animação e sua função de Easing.

As imagens são posicionadas de forma a preecher o espaço do controle da melhor forma possível, mas ainda preciso melhorar a lógica para quando apenas uma imagem é exibida.

Também há espaço para melhorias no algorítmo de posicionamento, no que diz respeito ao alinhamento das imagens do lado direito.

O código fonte está disponível no Codeplex. Sugestões, melhorias e bug fixes podem ser reportados lá ou aqui no blog.

Em breve estarei aumentando essa biblioteca do Codeplex com outras behaviors e helpers.

Ahhh, quem gosta de futebol pode ver essa behavior em ação em http://www.msnnacopa.com.br.

3 comentários:

Djonatas Tenfen disse...

Parabéns pelo novo Behavior, vou testa-lo e ver o comportamento em breve posto o que obtive de resultado, e deixo minha opnião.

William disse...

ola meu caro, eu sou iniciante em VS, e SL, e gostaria de saber como instalar minhas novas behaviors, por favor se puder me dizer o modo, um forte abraço, e obg por compartilhar seu cohecimento, mt bacana sua behavior, abraços.

Kelps Leite de Sousa disse...

William,
O jeito mais simples é simplesmente baixar a dll da behavior e fazer referencia a ela em seu projeto.

Estou trabalhando em um instalador que fará parte do projeto no Codeplex e se encarregará de instalar e registrar as behaviors para que sejam descobertas pelo Expression Blend e Visual Studio automaticamente. Isso tornará possível que você adicione a behavior ao seu projeto sem ter referenciado a dll antes e o próprio Visual Studio/Expression Blend se encarregará de fazer essa referencia para você. É dessa forma que funciona hoje quando utilizamos o Silverlight Toolkit, por exemplo.