adotando silverlight 2.0 - v2 - handson

1

Hands-On Adotando o Silverlight 2.0

[IL400]

2

Índice

Projeto Margie’s Travel .................................................................................................. 3

A- Criando a interface do usuário da Margie’s Travel………….……................................................ 3

Seção 1: Examinando o Design Final……………………………………….......…………………………........ 4

Seção 2: Estabelecendo a Base…………………………………........…………………………...............…... 5

B – Preparando a Margie’s Travel……………………………………………………………………………………....… 13

Seção 1: Atualizando o padrão do ListBox Style…………………………………….………………………. 14

C – Vinculando os Dados na Margie’s Travel…………………………………………………………………………… 19

Seção 1: Observando Por Baixo da Cobertura……………………………………………………………….... 20

Seção 2: Habilitando uma Interface do Usuário Dinâmica e Baseada em Dados ..…………… 21

D- Integração do Navegador na Margie’s Travel……………………………………………………………………… 24

Seção 1: Alterar os Tours a partir do HTML…………………………………………........……………..... 26

Seção 2: Atualizar o Virtual Earth Map a partir do Código Gerenciado …………………………... 27

Projeto Agência Web .................................................................................................... 30

A - Construindo um Banner ............................................................................................................. 30

B - Construindo um Banner com Múltiplas sessões ....................................................................... 32

C - Construindo uma galeria de imagens no Deep Zoom Composer .............................................. 37

D - Construindo uma galeria de imagens e integrando ferramentas ............................................ 39

E - Construindo um player de vídeo e programando ações ........................................................... 43

3

Projeto Margie’s Travel

A- Criando a Interface do

Usuário para Margie’s Travel

Primeiros Passos para o uso do controle de layout

Nesse laboratório, você criará a página principal do aplicativo de demostração da Margie’s Travel,

usando controles de layout diferentes, incluindo o Grid, StackPanel, TabControl e ItemsControl. Cada

caixa de controle possui seus pontos fortes e descobri-los e aprender como usá-los aumentará a sua

produtividade e satisfação.

4

Seção 1: Examinando o Design Final

Vamos iniciar examinando o que iremos criar.

Não se preocupe! Não iremos criar o aplicativo Margie’s Travel inteiro em um laboratório. A criação do

aplicativo está distribuida por diversos Laboratórios, concentrados em áreas específicas. Esse

Laboratório inicial focará os Controles, em sua maior parte os Controles de Layout, que serão usados

para criar a página principal da Margie’s Travel.

Uma vez completo, o seu aplicativo parecerá de certa maneira com a foto de tela acima, mas somente

após a finalização dos Laboratórios restantes ele estará associado a dados reais, interativo e integrado

ao Virtual Earth.

Vamos iniciar estabelecendo a base!

5

Seção 2: Estabelecendo a Base

Segundo o mencionado na seção anterior, a fim de exibir dados reais e fornecer ao usuário uma

interface interativa nós precisamos esboçar primeiro os controles. Usando a foto de tela acima como

nosso objetivo de design, agora iremos percorrer as etapas, a fim de adicionar à página principal cada

um dos controles necessários.

Inicie abrindo o arquivo MargiesTravel.sln incluído na pasta MargiesTravel – Begin Here.

Dentro do Visual Studio, pocure se familiarizar com o projeto durante alguns instantes.

Você encontrará dois projetos, um Site e um

Aplicativo Silverlight. No projeto do Site você verá

que foram incluídos arquivos de imagem, CSS e uma

página Default.aspx. A Default.aspx foi configurada

com a navegação e com o host Aplicativo Silverlight

MargiesTravel via marca <object>. Olhando a

imagem à direita você pode ver que a tela principal,

beneficiando-se totalmente da Integração do

Navegador, está dividida entre a navegação

baseada em HTML e o aplicativo Silverlight.

No projeto de Aplicativo Silverlight você encontrará imagens para serem usadas dentro da interface,

junto com algumas referências a outros assemblies, incluindo: o modelo de dados, a lógica de negócios

e os controles personalizados.

Abra o Page.xaml

Com a altura e a largura do UserControl definida para nós, juntamente com alguns recursos que serão

usados mais tarde, estamos prontos para iniciar a criação da IU.

Executaremos os dois primeiros passos dentro do Expression Blend para conhecer a ferramenta e os

recursos de edição disponíveis. Depois retornaremos ao Visual Studio para operar o tempo de design e o

ItemsControl.

Iniciando o layout no Blend

A maioria das etapas do Laboratório pedirá que você adicione ou modifique os códigos. Se você ficar

impedido de prosseguir e precisar de assistência, as respostas estão no Apêndice.

Entre os recursos das ferramentas de criação do Aplicativo Silverlight, a integração e a compatibilidade

6

são por mim mais apreciados. O Visual Studio e o Blend usam o mesmo sistema de arquivo do projeto e

os dois possuem links para arquivos abertos dentro de outro programa.

Clique com o botão direito do mouse em Page.xaml e selecione Open in Expression Blend…

Um interessante recurso de tempo de design do controle Grid (Grade) é o ShowGridLines. Quando ele

estiver definido como verdadeiro, as linhas são processadas entre linhas e colunas, oferecendo a você

uma idéia da associação entre elas. Durante esse Laboratório, usaremos o ShowGridLines em todos as

Grades para nos ajudar a esboçar os controles. No próximo Laboratório do Margie’s Travel chegaremos

em Styles assim poderemos limpá-los depois.

Defina o ShowGridlines como verdadeiro na Grade principal de nome LayoutRoot.

O ShowGridLines é uma propriedade da Grade e pode ser encontrado no Painel Properties quando a

Grade é selecionada. Se não conseguir encontrar uma propriedade específica, você pode usar o recurso

Search do Painel Properties para localizá-la.

Adicione duas RowDefinitions nas partes

superior e inferior da porção Silverlight da

tela principal. A primeira metade deve ter

280 pixels de altura e a secunda deve

ocupar o espaço vertical restante.

É possível adicionar o RowDefinitions a uma Grade

no Blend clicando na linha decorativa azul em volta

da Grade. Em seguida, você pode usar o Painel

Properties ou digitar dentro do XAML para obter

um valor exato.

Agora que temos as duas linhas dos painéis superior e inferior, vamos adicionar a Grade principal.

Adicione uma nova Grade à primeira linha no LayoutRoot. Além de ShowGridLines, a Grade

precisa possuir duas colunas (com largura de 598 pixels e *) e duas linhas (com altura de 64

pixels e *).

Adicione a Imagem do logotipo do Tour. Para a Imagem será usado um recurso local, que faz

parte do Aplicativo Silverlight e ela será incorporada ao assembly durante a compilação. O

caminho para a origem da imagem é “images/wonders_bgd.jpg”. Ele deve ser colocado na

primeira Coluna e na primeira linha da Grade principal com uma Margem de “14,14,14,0”.

A Margem da Imagem poderia ter sido estabelecida somente em “14”, o que aplicaria essa medida às

margens Esquerda, Superior, Direita e Inferior. Contudo, a fim de abrir espaço para a imagem do rótulo

que aparecerá abaixo, precisamos especificar a margem inferior como 0.

7

Adicione a Imagem do mapa. Para essa Imagem também se usa como origem um recurso local

com o caminho “images/map.jpg”. A Imagem é usada como um espaço reservado até

adicionarmos a integração com o Virtual Earth. Com isso, toda a parte superior da Grade

principal será preenchida, então as duas Linhas terão que ser expandidas com o uso do

RowSpan. Além disso, a imagem deve ser colocada na segunda Coluna da Grade a fim abrir

espaço para as destinações e atrações do Tour. Um toque adicional centraliza a imagem na sua

célula da Grade, a definição da Margem como “14,0”.

Fazer isso usando somente dois números atua como

um repetidor de lados espelhados (mirrored sides).

Traduz-se “14,0” por “Esquerda=14, Superior=0,

Direita=14, Inferior=0”.

Adicione o Grid Destinations (Grade de

Destinos). Essa Grade ficará embaixo da Tour

Image na segunda Linha da grade principal.

Defina o ShowGridLines para true e adicione

duas Linhas, uma com 33 pixels de altura e

outra ocupando o espaço restante. O passo final é adicionar uma Margem de “14,0,14,14”.

Definindo a Margem como “14,0,14,14” nós mantemos o mesmo espaço de margem que o da Imagem

do Tour, mas também estamos definindo a Superior como 0, concedendo à Tour Image e à Destinations

Label Image que será adicionada depois a menor quantidade de espaço em branco. Elas não necessitam

de espaço em branco porque já o possuem dentro dos arquivos de origem de imagem.

Adicione a Destinations Image (Imagens de Destinos) com um caminho de Source do

“images/label_destinations.jpg”. Defina o HorizontalAlignment como “Esquerda” para substituir

o valor “Central" (valor do Centro) padrão e alinhar o rótulo com as cidades que chegam.

Salve o Page.xaml

Nesta altura, seu aplicativo deve parecer muito com a imagem à direita. Agora iremos voltar alguns

passos no Visual Studio e adicionar os controles restantes.

O layout dinâmico e os dados de tempo de design no Visual

Studio

Nós adicionamos os controles básicos para ajudar a definir a aparência e o layout e agora iremos

adicionar o ItemsControl que mostrará os dados de tempo de de design. Em seguida, finalizaremos a

Grade inferior (botton Grid) que conterá os painéis inferiores (sub panels) do aplicativo Margie’s Travel.

Retorne ao Visual Studio e certifique-se de que o Page.xaml esteja aberto.

8

Talvez você veja uma notificação de que o arquivo foi modificado fora do Visual Studio. Recarregue o

arquivo e verá os resultados do seu trabalho no Blend.

Agora observe com atenção a parte superior do arquivo Page.xaml. Você verá que os recursos do

assembly MargiesTravel.Presentation foram adicionados à coleção UserControl.Resources. Nós

usaremos o CityCountryConverter mais tarde, por enquanto observe que o DesignTimeData está

fornecendo o DataContext para o LayoutRoot.

A vinculação de dados será abordada mais a fundo nos próximos Laboratórios, contudo, agora você já

possui uma idéia de onde os dados virão quando usarmos o ItemsControl.

Depois da Destinations Image, adicione o ItemsControl digitando o código abaixo no editor

XAML.

<ItemsControl Grid.Row="1" ItemsSource="{Binding Cities}"></ItemsControl>

Você identificará que a sintaxe do Grid.Row coloca o ItemsControl na segunda linha da Grade de

Destino. A propriedade do ItemSource foi aqui vinculada a propriedade de Cities dos dados do Tour de

tempo de design.

Dentro da exibição do tempo de design do Visual

Studio (talvez seja necessário recarregar o

designer), você verá algo parecido com a imagem à

direita. Ela não se parece com o conceito de design

apresentado no início desse Laboratório... qual é o

engano?

Sem a definição do ItemTemplate, o ItemsControl

exibirá os resultados do ToString() dos objetos vinculados. Nesse caso, a classe CityTour assume o

padrão de processamento do seu tipo e a utilidade dela será pouca.

Vamos corrigir isso atualizando nosso ItemsControl.

Defina um novo ItemsPanel. Vamos usar o StackPanel a fim de organizar as Cities de forma

horizontal em vez de vertical.

<ItemsControl.ItemsPanel>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" />

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

9

Definir um ItemsTemplate. Vamos buscar mais detalhes no Laboratório de Dados, mas em um

nível superior estamos basicamente afirmando que cada objeto CityTour cria uma Grade

contendo um Retângulo como plano de fundo, uma Textbox que exibe o nome da City e o do

Country e uma Listbox cheia de Attractions. A fim de evitar os problemas iniciais de antes,

quando o objeto City mostrava apenas o seu valor ToString() devido a falta do ItemTemplate, a

propriedade DisplayMemberPath da ListBox foi definida para fornecer uma propriedade padrão

para renderização. (propriety to render)

<ItemsControl.ItemTemplate>

<DataTemplate>

<Grid Margin="3,0" Width="184">



<Rectangle Stroke="#FFD7D7D7" RadiusX="6" RadiusY="6">

<Rectangle.OpacityMask>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#00000000"/>

<GradientStop Color="#33757575" Offset="0.5"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFF"/>

<GradientStop Color="#EEE" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>



<TextBlock Margin="18,9,0,0"

Text="{Binding City,

Converter={StaticResource CityCountryConverter}}"

Style="{StaticResource HeaderTextBlock}" />



<ListBox Margin="13,29,0,5" ItemsSource="{Binding Attractions}"

DisplayMemberPath="Name"></ListBox>

</Grid>

</DataTemplate>

</ItemsControl.ItemTemplate>

Se por acaso você adicionar de maneira bem

sucedida o ItemsControl na primeira tentativa, seu

aplicativo parecerá com a imagem à direita. Os

ListBoxes ficam estranhos no plano de fundo cinza,

mas nós iremos Prepará-los (ou mesmo Modelá-los)

mais tarde.

10

Toques Finais

Adicione outra Grade para manter os painéis inferiores. Essa Grade ficará na segunda Linha e a

cor do Plano de Fundo é “#c06c14”.

Antes de adicionar um TabControl para segurar os painéis inferiores, precisamos adicionar uma

referência ao assembly que contém o TabControl. Adicione uma referência ao

System.Windows.Control.Extended no seu Aplicativo Silverlight e depois adicione uma referência ao

assembly na sua Page.xaml, adicionando o código a seguir ao elemento UserControl:

xmlns:y="clr-

namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"

Adicione ao painel inferior um TabControl usando o código abaixo:

<y:TabControl Background="#b2b564" Margin="14,13" FontFamily="Verdana"

FontSize="12">

</y:TabControl>

Adicione diversos TabItems colocando o código abaixo dentro do TabControl.

<y:TabItem>

<y:TabItem.Header>

<Image Source="images/tab_attractions.png" Stretch="None" />

</y:TabItem.Header>

<presentation:AttractionsCanvas />

</y:TabItem>

<y:TabItem>

<y:TabItem.Header>

<Image Source="images/tab_details.png" Stretch="None" />

</y:TabItem.Header>

</y:TabItem>

<y:TabItem>

<y:TabItem.Header>

<Image Source="images/tab_itinerary.png" Stretch="None" />

</y:TabItem.Header>

</y:TabItem>

Agora você deve colocar no modo de exibição de design do Visual Studio, seu aplicativo deve parecer

com a imagem abaixo. Se executar o aplicativo, você perceberá que os Dados de tempo de Design não

estão mais disponíveis, portanto as Cities e as Atractions não são mostradas. Isso se deve ao fato de que

a classe DesignTimeData está escrita para somente ser executada durante o tempo de Design e não

interferir no código de tempo de execução.

11

Meus parabéns, você acaba de completar a primeira parte do Margie’s Travel!

Apêndice:

Respostas de Código de Blend

Defina o ShowGridlines como true na Grade principal de nome LayoutRoot.

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">

Adicione duas RowDefinitions nas partes superior e inferior da porção Silverlight da tela

principal. A primeira metade deve ter 280 pixels de altura e a segunda deve ocupar o espaço

vertical restante.

<Grid.RowDefinitions>

<RowDefinition Height="280" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

Adicione uma nova Grade à primeira Linha em LayoutRoot. Além de ShowGridLines, a Grade

precisa possuir duas Colunas (com largura de 598 pixels e *) e duas Linhas (com altura de 64

pixels e *).

12

<Grid ShowGridLines="True">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="598" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>





</Grid>

Adicione a Imagem do logotipo do Tour. Na Imagem será usado um recurso local, que faz parte

do Aplicativo Silverlight e será incorporado ao assembly durante a compilação. O caminho para

a origem da imagem é “images/wonders_bgd.jpg”. Ele deve ser colocado na primeira Coluna e

na primeira linha da Grade principal com uma Margem de “14,14,14,0”.

<Image Margin="14,14,14,0" Source="images/wonders_bgd.jpg" />

Adicione a Imagem do mapa. Para essa Imagem também usaremos como origem um recurso

local com o caminho “images/map.jpg”. A Imagem é usada como um espaço reservado até

adicionarmos a integração com o Virtual Earth. Com isso, a altura total da Grade principal será

preenchida, então as duas Linhas terão que ser expandidas com o uso do RowSpan. Além disso,

a imagem deve ser colocada na segunda Coluna da Grade a fim de abrir espaço para as

destinações e as atrações do Tour. Como um toque adicional para centralizar a imagem na

célula de Grade dela, vamos definir a Margem como “14,0”.

<Image Grid.RowSpan="2" Grid.Column="1" Margin="0,14" Source="images/map.jpg"

/>

Adicione o Destinations Grid (Grade de Destinos). Essa Grade ficará embaixo do Tour Image na

segunda linha da grade principal. Defina o ShowGridLines como true e adicione duas Linhas,

uma com 33 pixels de altura e a outra ocupando o espaço restante. O passo final é adicionar

uma Margem de “14,0,14,14”.

<Grid ShowGridLines="True" Grid.Row="1" Margin="14,0,14,14">





</Grid>

Adicione a Destinations Image (Imagem de Destinos) com um caminho de Origem do

“images/label_destinations.jpg”. Defina o HorizontalAlignment como “Esquerda” para substituir

o valor “Central" padrão e dispor as etiquetas alinhadas com as cidades.

13

<Image Source="images/label_destinations.png" HorizontalAlignment="Left" />

B – Preparando a Margie’s Travel

Primeiros Passos para o uso de Styles e do Visual State Manager

Neste laboratório será feita a atualização da aparência do aplicativo Margie’s Travel com o uso de

Styles, Modelos e do Visual State Manager. Acompanharemos a exposição e a edição do modelo padrão

no Blend e a partir daí o integraremos ao aplicativo como um Recurso no Visual Studio.

14

Seção 1: Atualizando o padrão do

ListBox Style

Após abrir seu projeto concluído do primeiro Laboratório ou abrir o arquivo MargiesTravel.sln, incluído

na pasta MargiesTravel – Begin Here , abra o Page.xaml , você encontrará uma visualização parecida

com a foto abaixo.

A Margie’s Travel possui um design bem simples que usa os Styles e alguns SolidColors padrão.

Observando a foto de tela acima, as bordas extras nas Grades e nos ListBoxes são as que se destacam

como necessitando de atualização. As linhas extras desviam a atenção do conteúdo real.

Vamos fazer primeiro a parte mais fácil. Agora que definimos o layout, os GridLines não são mais

necessários para ajudar a posicionar os controles.

Remova os GridLines definindo todos os ShowGridLines como false.

15

Agora é a parte mais complicada,

as atualizações dos Modelos

ListBox a fim de remover as bordas

extras. Além disso, iremos alterar

a aparência de estados distintos

(ou seja, Mouseover, Foco) do

ListBoxItem. A fim de testar os

diferentes estados, precisamos ter

dados disponíveis em tempo de

execução. Se você se lembra, no primeiro laboratório a classe DesignTimeData estava restrita ao

carregamento somente no modo de visualização de design. Será preciso atualizar o código a fim de

carregar um Tour em tempo de execução.

Abra o Page.xaml.cs e adicione um EventHandler ao evento Loaded da classe Page .

No EventHandler adicione a linha única abaixo, que definirá um objeto ThemedTour para o

DataContext da Grade principal.

LayoutRoot.DataContext = MargiesTravel.DataModel.TourData.Find("wonders");

Agora ao executar o aplicativo será possível observar as mesmas Destinations e Attractions que você vê

no designer.

Alterando o Modelo ListBox

O modo mais fácil de modificar o Modelo de um controle existente consiste em pegar uma cópia do

modelo padrão usando o Expression Blend.

No Blend, abra o Page.xaml

Infelizmente o Blend não renderiza os dados de tempo de design, porém ainda é possível encontrar

controles navegando a árvore de controle.

Navegue para o ItemsControl dentro do Painel Objeto,

clique com o botão direito do mouse e selecione Edit

Other Templates -> Edit ItemTemplate -> EditTemplate

Agora com o ItemTemplate do ItemControl aberto,

navegue no Painel Objeto até o ListBox, clique com o

botão direito do mouse e selecione Edit Control Parts

(Template) -> Edit Copy…

Aparecerá uma janela perguntando a você qual o nome do

novo Modelo, mantenha os padrões, mas defina o nome como

16

“AttractionListBoxStyle”. Após expandir a árvore no Painel Objetos, seu painel deve parecer com a

imagem à direita.

Na atual árvore de objeto, é possível ver aquilo que estamos procurando, os dois objetos de Borda.

Remova os dois controles de Borda, de modo que você fique só com o Grid, o Scrollviewer e o

ItemsPresenter.

Volte ao ListBox selecionando-o com a navegação de Trilha na parte superior.

Clique com o botão direito do mouse em ListBox e selecione Add ListBoxItem.

Clique com o botão direito do mouse em ListBoxItem e selecione Edit Control Parts (Template) -

> Edit Copy…

Uma janela aparecerá perguntando a você qual o nome

do novo Modelo, mantenha os padrões, mas defina o

nome como “AttractionListBoxItemStyle”. Após expandir

a árvore no Painel de Objetos, seu painel deve parecer

com a imagem à direita.

Observe que o Painel de Estado está populado assim

como o Painel de Objetos. Isso se deve ao fato do modelo

padrão do ListBoxItem usar o Visual State Manager para

diferenciar os estados no objeto.

Observe os diferentes estados selecionando-os,

isso permite ver quais objetos estão alterados,

assim como a linha de tempo.

Como no exemplo a esquerda,

selecione o estado MouseOver e

você verá que o Fill e Stroke do

Retângulo do HoverOverlay estão

modificados.

Infelizmente o ListBoxItem não possui muito conteúdo para exibir durante o tempo de design. Antes de

continuar, talvez você queira experimentar o Visual State Manager iniciando um novo projeto no Blend

e criando um novo modelo de Botão com o uso das técnicas mostradas acima. Nele você pode

modificar as cores dos Retângulos do Botão em cada Estado, o que oferece uma alteração bem

perceptível, para se familiarizar com o Visual State Manager e às opções disponíveis, incluindo as

transições.

17

Agora, de volta ao nosso estilo ListBoxItem.

Salve o Page.xaml e retorne ao Visual Studio.

Após ter recarregado o designer você perceberá um início de erro. Infelizmente, no Silverlight 2 Beta 2,

o Visual Studio Silverlight Designer não suporta o VisualStateManager. A esta altura talvez você queira

alterar do modo divisão para o modo de exibição somente XAML .

Navegue para o AttractionListBoxItemStyle no seu User.Resources.

Remova o VisualStateGroup de nome FocusStates.

Remova o Retângulo no Modelo de nome FocusVisual.

Agora, nós removemos o retângulo pontilhado, usado quando um item possuia foco e não precisamos

mais do StateGroup que estava alterando ele.

Remova a Linha do Modelo.

Tanto o modelo ListBoxItem como o ListBox fazem uso de um bom número de linhas. Vamos mover os

Modelos dentro do arquivo App.xaml, permitindo uma edição mais fácil do arquivo Page.xaml .

Copie e Cole os dois Styles no Application.Resources depois dos dois estilos de TextBlock

padrão.

Copie e Cole a declaração xml namespace “vsm” do UserControl na Page.xaml em Aplicativo no

App.xaml.

Agora precisamos atualizar nosso ListBox dentro do DataTemplate na Page.xaml para nos beneficiarmos

dos novos Modelos de forma apropriada.

Remova a configuração DisplayMemberPath.

Assegure-se de que o ItemsSource está definido como “{Binding Attractions}”

Defina o ItemContainerStyle como igual a “{Binding AttractionListBoxItemStyle}”

Remova o filho do ListBoxItem estático de dentro do ListBox.

Adicione dentro do ListBox o seguinte DataTemplate usando o código abaixo:

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal" Margin="8,2,0,2">

<TextBlock Text="- " Style="{StaticResource DefaultTextBlock}" />

<TextBlock Text="{Binding Name}" Style="{StaticResource

DefaultTextBlock}" />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

18

No próximo laboratório abordaremos em detalhes o DataBinding e os DataTemplates. Por ora desfrute

do seu trabalho e execute o aplicativo. Se tudo deu certo, ele deve parecer com a foto de tela abaixo.

Solução de Problemas

Se você executar o aplicativo e não ver exibidas as Attractions, provavelmente se trata de um problema

com o modelo do Listbox. O Blend pode enganar e adicionar valores padrão inesperados. A seguir veja

como deve ser o Modelo do ListBox.

<Style x:Key="AttractionListBoxStyle" TargetType="ListBox">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ListBox">

<Grid>

<ScrollViewer x:Name="ScrollViewer" BorderThickness="0"

Padding="{TemplateBinding Padding}">

<ItemsPresenter />

</ScrollViewer>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

19

C – Vinculando os Dados na

Margie’s Travel

Primeiros Passos para o uso da vinculação e dos modelos de dados

Neste laboratório, você irá atualizar a página principal da Margie’s Travel, fazendo com que

todos os controles sejam orientados por dados reais. Além disso, todos os controles na

página são mantidos em sincronia a fim de assegurar que eles estejam exibindo os dados

corretos e em alguns casos os dados selecionados. Exploraremos as funcionalidades de

Vinculação de Dados, DataContext, Modelos de Dados e Conversores. Neste laboratório

tudo girará em torno dos dados.

20

Seção 1: Observando Por Baixo da

Cobertura

Abra o arquivo MargiesTravel.sln incluído na pasta

MargiesTravel – Begin Here.

Nos dois primeiros Laboratórios, os assemblies

MargiesTravel de suporte eram mencionados somente

como referências de arquivos pré-compilados. Nesse

laboratório nós adicionamos as bibliotecas

MargiesTravel de suporte como referências completas

do projeto. Agora que você está aprendendo como a

Ligação de dados está relacionada com os valores

mostrados na IU para as instâncias de objetos, você

pode acompanhar a cadeia de declarações de objetos

usando a mágica do "Go To Definition”.

Os MargiesTravel.Controls contém os controles

personalizados, usados para criar o controle

TourTimeline, um exemplo de implementação de layout

personalizado.

O MargiesTravel.DataModel define todos os objetos usados no aplicativo e mais. Você verá definido

nele um Modelo de Objeto bem maior do que aquele usado no aplicativo de demonstração. No início

podia-se afirmar que estávamos otimistas em relação à completude do aplicativo que estávamos

criando.

O MargiesTravel.Presentation contém os UserControls que são usados dentro da tela principal do

aplicativo. Além disso, a matriz de Conversores de dados fica ali pacientemente esperando por mais

dados para serem convertidos.

Neste Laboratório, você executará códigos dos dois últimos projetos. Sinta-se a vontade para examinar

as bibliotecas de classe a fim de obter uma idéia de como serão os próximos passos.

21

Seção 2: Habilitando uma Interface do

Usuário Dinâmica e Baseada em Dados

Uma Propriedade para Controlar Todos Eles

Nos dois últimos Laboratórios, os dados de tempo de design foram usados para ajudar a planejar

(layout) e a preparar (style) a página principal, mas o conceito não foi totalmente explicado. Se navegar

pela classe propriamente denominada DesignTimeData no projeto MargiesTravel.Presentation, você

verá que ela possui uma propriedade Tour do tipo ThemedTour. A página principal vincula em tempo de

execução uma instância do ThemedTour e, com o suporte dessa classe, também o faz em tempo de

design.

Seja em tempo de design ou em tempo de execução, uma vez que o DataContex da Grade principal,

chamado LayoutRoot, estiver definido, o mesmo objeto estará disponível para qualquer controle filho

daquela Grade. Por isso, nos dois primeiros Laboratórios você conseguiu vincular o ItemsControl à

propriedade Cities do objeto Tour. Ao nos aprofundarmos uma camada, em cada City vinculada

conseguimos vincular um ListBox filho à propriedade Attractions da City.

A idéia simples por trás de toda essa vinculação é que na maioria dos casos, uma propriedade é

atualizada e a IU inteira atualiza para refletir os novos dados ou, nesse caso, o Tour. Bem menos códigos

necessitam ir e vir para serem escritos e você e o seu desenvolvedor talvez consigam mais tempo livre.

Atualize o XAML Para Que Seja Mais Dinâmico

Vamos atualizar os controles restantes na página a fim de que reflitam os dados do Tour carregados.

Considerar a definição de classe ThemedTour e o arquivo Tours.xml (ambos encontrados no

MargiesTravel.DataModel) oferecerá a você uma idéia da estrutura e dos valores dos dados que serão

usados.

Altere a fonte do Tour Image de valor codificado “images/wonders_bgd.jpg” para a

propriedade ImagePath do Tour vinculado usando o código abaixo:

Source="{Binding ImagePath,

Converter={StaticResource StringToImageConverter}}"

Devido a um bug no Silverlight 2 Beta 2, quando uma propriedade da Image’s Source tem os Dados

Vinculados a uma cadeia, o TypeConverter automático não é executado. Como solução alternativa, o

StringToImageConverter, definido no UserControl.Resources, não converte para nós a cadeia em uma

Imagem até a adição da correção.

A Imagem do mapa continuará a mesma até o laboratório de Integração do Navegador

22

Na Grade usada no ItemsControl.ItemsTemplate, antes do Textblock, adicione a seguinte

Imagem:

<Image Source="{Binding StopIndex, Converter={StaticResource

StopIndexToImageConverter}}" Stretch="None" HorizontalAlignment="Left"

VerticalAlignment="Top" Margin="-5,-3,0,0" />

De forma muito semelhante ao StringToImageConverter, o

StopIndexToImageConverter toma a propriedade StopIndex dupla do

objeto Tour e retorna uma imagem para representar a ordem das

destinações.

Adicione um x:Name do “AttractionsSlider” ao controle do AttractionsCanvas no primeiro

TabItem.

Iremos nos referir a ele depois em código e para que isso seja feito, é melhor definir um x:Name.

No segundo TabItem adicione um TourTimeline com o x:Name do “TimelineSlider”. O

TourTimeline fica no mesmo assembly que o AttractionsCanvas, o que o ajudará a descobrir

como adicionar o controle no XAML.

Atualizar o Código para Terminar o Trabalho

Todos os controles agora estão funcionando e prontos e é necessário ativar o carregamento de Tours

diferentes e sincronizar os controles personalizados.

Abra o Page.xaml.cs e, na classe Page, adicione as seguintes definições:

ThemedTour tour;

Attraction attraction;

List<ListBox> listBoxes = new List<ListBox>();

Extraia a linha do Loaded EventHandler para dentro do próprio método dela, chamado

“ChangeTour”.

Esse é um local perfeito para tentar a refatoração, caso você não tenha usado o recurso antes. Selecione

a única linha de código, iniciando pelo “LayoutRoot.DataContext…” e clique com o botão direito do

mouse para criar o menu de contexto. Selecione Refactor -> ExtractMethod… Nomeie o novo método

“ChangeTour”.

Adicione um parâmetro de cadeia de tipos denominado tourName à assinatura do ChangeTour.

Substitua a linha de código existente no método ChangeTour pelo código abaixo:

tour = MargiesTravel.DataModel.TourData.Find(tourName);

23

LayoutRoot.DataContext = tour;

AttractionsSlider.DataContext = tour.Cities;

AttractionsSlider.UpdateAttractions();

TimelineSlider.Tour = tour;

Primeiro nós armazenamos uma instância do ThemedTour em uma variável tour local e a definimos

como valor da propriedade do DataContext, nossa Grade principal. Depois definimos o DataContext dos

dois UserControls incorporados. O AttractionsSlider possui um método adicional, chamado para

atualizar os filhos dele, devido ao modo específico que ele usa para manipulá-los.

No Loaded EventHandler, chame o ChangeTour com o valor de parâmetro padrão de “wonders”.

Com isso, são carregados os dados que você já vem utilizando nos dois últimos laboratórios. Se quiser

tentar carregar outro tour tente passar “art” ou “beer” como parâmetro. Os dois tours são válidos e

definidos nos arquivos de dados XML. Embora o conteúdo dos outros tours talvez não seja tão

abrangente quanto o do tour “wonders”, os serviços de dados executam códigos reais e retornariam

quaisquer dados devidamente formatados. Sinta-se a vontade para criar seu próprio tour!

Execute o aplicativo e você verá o tour carregado e exibido em cada um dos controles.

Mais Um Detalhe

Atualmente os controles são sincronizados no Tour selecionado, mas não nas Attractions selecionadas.

Se você selecionar uma Attraction no ListBox, o AttractionsCanvas no TabControl não reflete essa

seleção. Vamos conectá-lo.

Adicione um EventHandler ao evento SelectionChanged do ListBox

Adicione o seguinte código ao EventHandler

ListBox lb = sender as ListBox;

if (lb.SelectedIndex > -1)

{

synchListBoxes(lb);

attraction = lb.SelectedItem as Attraction;

AttractionsSlider.ShowAttraction(attraction.Name);

}

Primeiro convertemos o remetente a um ListBox e depois verificamos o SelectedIndex. Nós queremos

apenas induzir a sincronização e o foco da Attraction, se estivermos selecionando de verdade um item e

não apenas redefinindo o ListBox. Em seguida, nós enviamos o nome da Attraction selecionada para o

AttactionsCanvas, nele os AttractionsDisplays são selecionados e animados conforme ele considerar

adequado.

24

Defina um método synchListBoxes que aceita o ListBox como parâmetro de nome “lb”.

Aqui outra oportunidade de Refatoração, Generate Method Stub especificamente.

Adicione o seguinte código ao novo método synchListBoxes.

if (!listBoxes.Contains(lb))

{

listBoxes.Add(lb);

}

foreach (ListBox l in listBoxes)

{

if (l != lb)

{

l.SelectedIndex = -1;

}

}

Agora que seu aplicativo esta em execução, somente um Listbox por vez manterá o SelectedItem dele e

o AttractionsCanvas selecionará e animará automaticamente para a mesma Attraction selecionada.

Observe enquanto passam as AttractionDisplays!

25

D- Integração com Navegador

no Margie’s Travel

Primeiros Passos para o uso do modo sem j anelas e da ponte do JavaScript

Neste laboratório você aprenderá como chamar o código gerenciado a partir do JavaScript e

como chamar o JavaScript a partir do código gerenciado e também como ter uma chance de

jogar no API do Virtual Earth.

26

Seção 1: Alterar os Tours a partir do

HTML

Nesta seção você usará a ponte do JavaScript para chamar métodos dentro do aplicativo Silverlight do

JavaScript executados na página Web hospedada.

O primeiro passo é registrar o objeto gerenciado que você quer que esteja acessível no

JavaScript. Adicione a linha de código abaixo no Loaded EventHandler antes de registrar a classe

Page.

HtmlPage.RegisterScriptableObject("TourBuilder", this);

Após adicionar esse código, você notará que a HtmlPage aparecerá como indefinida. Clique com

o botão direito do mouse na dica de cor marrom que aparecerá quando você passar o cursor no

HtmlPage e adicione a instrução using no System.Windows.Browser.

Adicione um atributo ScriptableMember ao método ChangeTour e altere ele de privado para

público. Somente os métodos públicos podem ser chamados a partir do JavaScript.

Adicione uma função do JavaScript em Default.aspx para chamar para o interior o código

gerenciado recém registrado.

<script type="text/javascript">

function ChangeTour(theme)

{

var slPlugin = document.getElementById("TourBuilder");

slPlugin.content.TourBuilder.ChangeTour(theme);

}

</script>

Modifique o html do sub-navigation html para chamar a função JavaScript quando estiver

clicando com o mouse.

<li class="active"><a

href="javascript:void(ChangeTour('wonders'));">Wonders</a></li>

<li><a href="javascript:void(ChangeTour('beer'));">Beer Breweries</a></li>

<li><a href="javascript:void(ChangeTour('art'));">Classical Art</a></li>

Execute o aplicativo e clique em um nome de tour diferente da sub-navigation. Agora você verá as

atualizações da IU refletirem o tour selecionado.

27

Seção 2: Atualizar o Virtual Earth Map a

partir do Código Gerenciado

Nesta seção, você chamará as funções do JavaScript a partir do código gerenciado, demonstrando que a

ponte JavaScript (JavaScript bridge) passa por ambos os caminhos.

No Default.aspx adicione uma referência ao Virtual Earth API

<script type="text/javascript"

src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>

Desenhe o Caminho do Tour no Mapa

O Virtual Earth fornece uma API de desenho simples, que permite desenhar formas e linhas no mapa,

cobrindo as peças de imagem. Essa funcionalidade permite que você desenhe o caminho do Tour

selecionado sobre um mapa interativo.

Adicione as seguintes funções e declarações ao seu bloco de scripts em Default.aspx

var map = null;

var pinHtml = "<div class='pin'><img src='images/pin.png' /></div>";

function GetMap(){

map = new VEMap('mapDiv');

map.SetDashboardSize(VEDashboardSize.Small);

map.LoadMap();

}

function DrawTour(lats, longs, titles) {

if (map == null)

GetMap();

map.DeleteAllShapes();

var ll, shape;

var lls = new Array(lats.length);

var centerLat = 0, centerLong = 0;

//mark destinations

for(i = 0; i < lats.length; i++){

ll = new VELatLong(lats[i], longs[i]);

lls[i] = ll;

centerLat = centerLat + ll.Latitude;

centerLong = centerLong + ll.Longitude;

shape = new VEShape(VEShapeType.Pushpin, ll);

shape.SetTitle(titles[i]);

shape.SetCustomIcon(pinHtml);

map.AddShape(shape);

http://dev.live.com/virtualearth/sdk/

28

}

//draw path

shape = new VEShape(VEShapeType.Polyline, lls);

shape.HideIcon();

shape.SetLineColor(new VEColor(30,206,34,0.5));

shape.SetLineWidth(3);

map.AddShape(shape);

//center map

centerLat = centerLat / lats.length;

centerLong = centerLong / lats.length;

var centerLatLong = new VELatLong(centerLat, centerLong);

map.SetCenterAndZoom(centerLatLong,4);

}

As funções acima fornecem o código necessário para: criar uma instância de mapa Virtual Earth, adicionar detalhes por destinação e desenhar linhas entre as destinações baseadas nas latitudes e nas longitudes fornecidas.

Adicione um elemento DIV à página, bem abaixo da marca do objeto. <div id="mapDiv" style="position:relative; top:-591px; left:598px; width:

388px; height: 252px; z-index: 200;"></div>

Observe que o modo sem janelas está definido como verdadeiro na marca do objeto, o que permite a você posicionar o DIV sobre o aplicativo Silverlight usando o CSS.

No Page.xaml.cs adicione o seguinte o método updateMap: private void updateMap()

{

ScriptObject DrawTourScript =

(ScriptObject)HtmlPage.Window.GetProperty("DrawTour");

int cityCount = tour.Cities.Count;

City currentCity;

double[] lats = new double[cityCount];

double[] longs = new double[cityCount];

string[] titles = new string[cityCount];

for (int i = 0; i < cityCount; i++)

{

currentCity = tour.Cities[i].City;

lats[i] = currentCity.GeoCoord.Latitude;

longs[i] = currentCity.GeoCoord.Longitude;

titles[i] = string.Format("{0}, {1}", currentCity.Name,

currentCity.Country.Name);

}

DrawTourScript.InvokeSelf((object)lats, (object)longs, (object)titles);

}

O método GetProperty do objeto HtmlPage.Window é usado para recuperar uma referência à função JavaScript na página web de hospedagem. Após executar um loop através de Cities e reunir os nomes e

29

as coordenadas, os dados são transferidos para função JavaScript mencionada. O InvokeSelf usa um paramarray, que permite um conjunto de dinâmico de parâmetros. Se você passar diversas matrizes como parâmetros, ele só pegará a primeira e ignorará as restantes. Para contornar isso nós convertemos todas as matrizes em objetos.

No método ChangeTour adicione a chamada de updateMap após a definição da variável tour. Agora ao executar o aplicativo você verá um Virtual Earth Map interativo, carregado sobre o aplicativo Silverlight, com as destinações do tour plotadas. Além disso, agora o mapa está sincronizado com o restante da IU e atualizará quando um tour diferente for selecionado.

Atualize o mapa com base na atração selecionada

A parte final da integração consiste em sincronizar a seleção da atração com o mapa do Virutal Earth.

Quando a Attraction estiver selecionada no Listbox, significa que queremos que a Attraction do mapa

acompanhe o AttractionsCanvas já sincronizado.

Adicione as seguintes funções ao seu bloco de scripts em Default.aspx

function GoToAttraction(latitude, longitude){

attraction = new VELatLong(latitude, longitude);

map.SetCenterAndZoom(attraction, 16);

map.SetBirdseyeScene(attraction);

}

Adicione o seguinte código ao SelectionChanged EventHandler em Page.xaml.cs.

ScriptObject GoToScript =

(ScriptObject)HtmlPage.Window.GetProperty("GoToAttraction");

GoToScript.InvokeSelf(attraction.GeoCoord.Latitude,

attraction.GeoCoord.Longitude);

Agora ao executar o aplicativo e selecionar a atração, o ListBox destacará o Attraction, o AttractionsCanvas passará a exibição apropriada e o mapa agora exibirá a foto de um olho de pássaro no Attraction.

30

Projeto Agência Web

A- Construindo um Banner

Até agora aprendemos a criar projetos em Silverlight utilizando o Microsoft Expression Blend. Mas agora

vamos construir um projeto muito utilizado na web: um banner animado. Os banners são importantes

meios de comunicação. Eles são utilizados, na maioria das vezes, para realizar publicidade e marketing.

As seções a seguir propõem um exercício básico, que tem como objetivo exemplificar e aplicar a

construção de um banner que contenha imagens, animações, botões e links de redirecionamento.

Obs: este exemplo foi baseado em um banner contido no site oficial do ImageCup 2008 (www.imaginecup.com).

Considerações

1) O banner deve conter as seguintes dimensões:

Height: 300px.

Width: 1000px.

2) Você deve aplicar diferentes animações para imagens e escritas. 3) Você deve adicionar ao botão, um link de redirecionamento para uma URL.

31

Construindo o Projeto

1) Utilizando o Microsoft Expression Blend, crie um novo projeto em Silverlight 2.0 com linguagem em

C#. Após esta ação, modifique as dimensões do “UserControl” para:

Height: 300px.

Width: 1000px.

2) Crie, nas propriedades do projeto, uma pasta denominada imagens e adicione uma imagem ao

projeto.

3) Adicione todo o conteúdo visual e descritivo no “LayoutRoot”.

4) Crie um botão que apresente diferentes estados.

5) Depois de adicionar todos os elementos necessários, certifique-se que todos os objetos estão

presentes no “LayoutRoot”.

6) Após todas as ações, acima descritas, é hora de criar a animação.

o Adicione um novo “StoryBoard” e salve como anime_1.

o Baseado nas propriedades e posições de cada objeto defina uma animação para os itens

presentes no banner.

7) Visualize o projeto, no browser, pressionando F5.

8) Certifique-se que o projeto esta salvo.

Programando o Projeto

Para adicionar um link de redirecionamento para uma URL, devemos adicionar um evento ao botão.

9) Selecione o botão. 10) Vá até Propriedades do botão e clique em “Events”. 11) Selecione a opção “Click”, de um duplo clique em sua caixa de escrita. 12) Após estas ações o Microsoft Visual Studio irá carregar automaticamente. 13) Com o Microsoft Visual Studio aberto, adicione os seguintes trechos de código:

using System.Windows.Browser;

public Page()

{

// Required to initialize variables

InitializeComponent();

anime_1.Begin(); //Inicializa a animação anime_1

}

private void button_Click(object sender, RoutedEventArgs e)

{

HtmlPage.Window.Navigate(new Uri("http://imaginecup.com/", UriKind.Absolute));

//Executa a ação de abrir um link

}

32

14) Salve o projeto e feche o programa.

Concluindo o Projeto

15) Retorne para o Microsoft Expression Blend e execute a aplicação.

16) Com o êxito visual e estrutural concluído, este exercício tem seu fim.

Considerações

Neste exercício, colocamos em prática a construção de um banner que contém animações e link para

redirecionamento para uma página URL.

Se você quiser ser mais independente e explorar um pouco, experimente. Por exemplo, adicione mais

imagens ao projeto e crie diferentes animações, altere os estados do botão e inúmeras outras

possibilidades.

Auxílio

Este exemplo, acima proposto, encontra-se completo para consulta.

33

B- Construindo um Banner com

Múltiplas sessões

Até agora aprendemos a criar inúmeras possibilidades como, por exemplo, um banner. Mas agora

vamos construir um projeto muito utilizado na web: um banner animado que contenha diferentes

imagens e diferentes links de direcionamento.

Os banners multitelas são importantes meios de comunicação que unem diversas imagens e conteúdos,

redirecionando o usuário para diferentes localidades.

As seções a seguir propõem um exercício intermediário, que tem como objetivo exemplificar e aplicar a

construção de um banner que contenha diferentes imagens e botões com links de redirecionamento

independentes.

Considerações

1) O banner deve conter as seguintes dimensões:

Height: 500px.

Width: 1000px.

2) Você deve aplicar diferentes animações para diversas imagens. 3) Você deve adicionar ao botão, diferentes links de redirecionamento para páginas URL.

34

4) Programar os eventos de cada botão.


1) Utilizando o Microsoft Expression Blend, crie um novo documento em Silverlight 2.0 com linguagem

em C#. Após esta ação, modifique as dimensões do “UserControl” para:

Height: 500px.

Width: 1000px.

2) Crie, nas propriedades do projeto, uma pasta denominada imagens e adicione imagens ao projeto

(blend.png, media.png e design.png).


4) Crie um layout padrão com diferentes estados para o botão.



6) Após todas as ações, acima descritas, de acordo com o exemplo proposto, devemos criar três

animações diferentes sendo que cada uma vai ser executada de acordo com o botão pressionado (1, 2 e

3).

Adicione um novo “StoryBoard” e salve como anime_1.

Baseado nas propriedades e posições de cada objeto defina uma animação para a primeira

imagem (blend.png).



imagem (design.png).



imagem (media.png).

7) Visualize o projeto, no browser, pressionando F5.

8) Certifique-se que o projeto esta salvo.

Programando o Projeto

Para adicionar diferentes links de redirecionamento para diversas páginas URL, devemos adicionar um

evento para cada o botão, de acordo com a mudança de cada imagem.

9) Selecione o botão construído para o projeto. 10) Vá às Propriedades do botão e clique em “Events”. 11) Selecione a opção “Click”, de um duplo clique em sua caixa de escrita. 12) Após estas ações o Microsoft Visual Studio irá carregar automaticamente.

35

13) Com o Microsoft Visual Studio aberto, adicione o seguinte código:

using System.Windows.Browser;

public Enum Produto { Blend, Design, Media };

public Produto prod;

public Page()

{

// Required to initialize variables

InitializeComponent();

anime_1.Begin(); Inicializa a animação anime_1

}

private void anima1(object sender, RoutedEventArgs e)

{

anime_1.Begin();

prod = Produto.Blend;

}

private void button_Click(object sender, RoutedEventArgs e)

{

if (prod == Produto.Blend)

{

HtmlPage.Window.Navigate(new

Uri("http://www.microsoft.com/expression/products/Overview.aspx?key=blend"),

"__blank");

}

else if (prod == Produto.Design)

{


Uri("http://www.microsoft.com/expression/products/Overview.aspx?key=design"),

"__blank");

}

else

{


Uri("http://www.microsoft.com/expression/products/Overview.aspx?key=media"),

"__blank");

}

}

private void btn_2_Click(object sender, RoutedEventArgs e)

{

anime_2.Begin();

prod = Produto.Design;

}

private void btn_3_Click(object sender, RoutedEventArgs e)

{

anime_3.Begin();

prod = Produto.Media;

}

}

}

14) Salve o projeto e feche o programa.

36



16) Com o êxito visual e estrutural concluído, este exercício tem seu fim.

Considerações

Neste exercício, colocamos em prática a construção de um banner multitelas que contém diferentes

animações e links para redirecionamento para páginas URL.

Se você quiser ser mais independente e explorar um pouco, experimente. Por exemplo, adicione mais

imagens ao projeto e crie diferentes animações, altere os estados do botão, os textos e adicione novos

efeitos de entrada e transição.

Auxílio


37

C- Construindo uma galeria de imagens

no Deep Zoom Composer.

O Deep Zoom Composer é uma ferramenta profissional que trabalha diretamente com imagens de

diferentes resoluções, proporcionando e possibilitando a criação de ambientes visuais complexos.

As seções a seguir propõem um exercício básico, que tem como objetivo exemplificar e aplicar a

construção de uma galeria de imagens construída no Deep Zoom Composer.


1) Abra o Deep Zoom Composer e crie um novo projeto. 2) Importe as imagens que irão constituir a galeria de imagens. 3) Após importar as imagens selecione a área de composição de imagens e crie o ambiente visual do

projeto. 4) Para visualizar o arquivo você pode exportar como um projeto Silverlight.

38

Considerações

Neste exercício, colocamos em prática a construção de uma galeria de imagens que demonstra todos os

recursos de imagens disponibilizados pelo Deep Zoom Composer.

Auxílio


39

D- Construindo uma galeria de imagens

e integrando ferramentas.

Até agora aprendemos a criar projetos em Silverlight utilizando o Microsoft Expression Blend. Mas agora

vamos construir um projeto que integre, além do Microsoft Expression Blend, o Deep Zoom Composer,

uma poderosa ferramenta de imagens.

O Deep Zoom Composer é uma ferramenta profissional que trabalha diretamente com imagens de

diferentes resoluções, proporcionando e possibilitando a criação de ambientes visuais complexos. As

seções a seguir propõem um exercício básico, que tem como objetivo exemplificar e aplicar a

construção de uma galeria de imagens que integre a interface de um projeto Silverlight, criado pelo

Expression Blend, com o recurso de imagens do Deep Zoom Composer.

40

Considerações

1) A galeria de imagens deve conter as seguintes dimensões:

Height: 633px.

Width: 983px.

2) Você deve criar uma interface que contenha uma GRID para comportar o arquivo do Deep Zoom Composer.

3) Você deve, juntamente com o programador, integrar os dois projetos a fim de criar uma interface dinâmica.

Construindo o Projeto – Deep Zoom Composer

1) Abra o Deep Zoom Composer e crie um novo projeto. 2) Importe as imagens que irão constituir a galeria de imagens. 3) Após importar as imagens selecione a área de composição de imagens e crie o ambiente visual do

projeto. 4) Exporte, criando um projeto Silverlight para abrigar o conteúdo.

Construindo o Projeto – Microsoft Expression Blend



Height: 633px.

Width: 983px.


7) Construa uma Grid de posicionamento para comportar o arquivo exportado pelo Deep Zoom

Composer (fique atento as dimensões do projeto para evitar problemas visuais).



9) Após todas as ações, acima descritas, é hora de integrar o projeto com o arquivo do Deep Zoom

Composer.

Juntamente com o auxílio de um programador, adicione o arquivo do Deep Zoom Composer no projeto

“Galeria de Imagens”, utilizando o Microsoft Visual Studio.

41

Integrando os Projetos

10) Abra ambos projetos no Visual Studio (A partir do Expression Blend, clique com o botão direito na

‘Solution’ e selecione ‘Edit in Visual Studio’).

11) Em seu projeto, no arquivo ‘Page.xaml’, insira dentro do ‘LayoutRoot’ um objeto ‘MultiScaleImage’ e

chame-o de ‘msi’.

12) Adicione à seu projeto o arquivo ‘MouseWheelHelper.cs’, este se encontra no projeto criado pelo

DeepZoom.

13) Substitua o conteúdo da classe ‘Page.xaml.cs’, copiando o código gerado pelo DeepZoom no arquivo

também chamado ‘Page.xaml.cs’.

Copie de:

Point lastMousePos = new Point();

double _zoom = 1;

Até:

public void Zoom(double zoom, Point pointToZoom)

{

Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);

this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);

}

14) Tente rodar a aplicação agora. Um erro de compilação irá ocorrer devido ao fato da classe

‘MouseWheelHelper.cs’ ter sido criada com um ‘Namespace’ diferente. Você pode mudar o

‘Namespace’ da classe para o de seu projeto, ou adicionar uma referência para o ‘Namespace’

DeepZoomProject.

15) Adicione o conjunto de imagens geradas pelo DeepZoomComposer à pasta de execução do projeto

(~\bin\Debug).

16) Salve o projeto.



18) Com o êxito visual e estrutural concluído, será possível visualizar a interface em Silverlight 2.0 contendo a galeria de imagens construída no Deep Zoom Composer.

42

Considerações

Neste exercício, colocamos em prática a construção de uma galeria de imagens que contém toda a

interface desenvolvida no Microsoft Expression Blend, integrado com todos os recursos de imagens

disponibilizados pelo Deep Zoom Composer.

Auxílio


43

E- Construindo um player de vídeo e

programando ações.

Neste exemplo vamos construir um player de vídeo que contenha inúmeras funcionalidades, aliando

beleza e funcionalidade.

Considerações

1) O player de vídeo deve conter as seguintes dimensões:

Height: 464px.

Width: 572px.

2) Você deve criar uma interface funcional. 3) Programar as ações de cada botão, baseado na sua funcionalidade.

44




Height: 464px.

Width: 572px.

2) Crie, nas propriedades do projeto, uma pasta denominada vídeo e adicione um arquivo de vídeo para

integrar o projeto.

3) Crie a interface e seus respectivos botões.

4) Após a conclusão da interface adicione o vídeo ao projeto (é necessário ter instalado em sua máquina

o Windows Media Player 10 ou superior). Propriedades do Vídeo:

Source: Nome do Vídeo em seu projeto.

Stretch: Uniform, irá alongar o vídeo o máximo o possível sem distorção.

5) Após todas as ações, acima descritas, é hora de adicionar as ações de cada botão.

Programando

Para adicionar uma ação para cada botão, devemos criar um evento ao botão.

6) Selecione cada botão. 7) Vá às Propriedades do botão e clique em “Events”. 8) Selecione a opção “Click”, de um duplo clique em sua caixa de escrita. 9) Após estas ações o Microsoft Visual Studio irá carregar automaticamente. 10) Com o Microsoft Visual Studio aberto, adicione os eventos pára cada botão:

a) btnStop

private void btnStop_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.Stop();

}

b) btnPlay

45

private void btnPlay_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.Play();

}

c) btnPause

private void btnPause_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.Pause();

}

d) btnAudio

private void btnAudio_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.IsMuted = false;

}

e) btnMute

private void btnMute_Click(object sender, RoutedEventArgs e)

{

this.mediaElement.IsMuted = true;

}

f) btnExpandir

private void btnExpandir_Click(object sender, RoutedEventArgs e)

{

Application.Current.Host.Content.IsFullScreen = true;

}

11) Salve o projeto.



46

13) Com o êxito visual e estrutural concluído, será possível visualizar e realizar inúmeras ações referentes à execução do vídeo.

Considerações

Neste exercício, colocamos em prática a construção de um player de vídeo que contém inúmeros

recursos programados.

Auxílio


adotando silverlight 2.0 - v2 - handson

Documents