Acabei de publicar no Expression Gallery uma behavior para filtrar imagens em uma colleção do Deep Zoom.
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.
