Adotando Silverlight 2.0 - V2 - Handson

  • Uploaded by: Rodrigo Peçanha
  • 0
  • 0
  • May 2020
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Adotando Silverlight 2.0 - V2 - Handson as PDF for free.

More details

  • Words: 8,147
  • Pages: 47
Hands-On Adotando o Silverlight 2.0 [IL400]

1

Í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

2

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.

3

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!

4

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 . 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 5

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.

6



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.

7

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.

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. <StackPanel Orientation="Horizontal" />

8



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)

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.

9

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="clrnamespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"



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



Adicione diversos TabItems colocando o código abaixo dentro do TabControl. <presentation:AttractionsCanvas />

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.

10

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.



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.



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 *). 11





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”.



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”.



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”.



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.

12



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.

13

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.

14

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 15

“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.

16

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: <StackPanel Orientation="Horizontal" Margin="8,2,0,2">

17

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> <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="{TemplateBinding Padding}">

18

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.

19

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.

20

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” propriedade ImagePath do Tour vinculado usando o código abaixo:

para a

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 21



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

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 listBoxes = new List();



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);

22

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. 23



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!

24

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.

25

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); }



Modifique o html do sub-navigation html para chamar a função JavaScript quando estiver clicando com o mouse.
  • Wonders
  • Beer Breweries
  • Classical Art


    • 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.

    26

    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">

    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 = "
    "; 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);

    27

    } //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.


    width:

    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 28

    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.

    29

    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.

    30

    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) 10) 11) 12) 13)

    Selecione o botão. Vá até Propriedades do botão e clique em “Events”. Selecione a opção “Click”, de um duplo clique em sua caixa de escrita. Após estas ações o Microsoft Visual Studio irá carregar automaticamente. 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 }

    31

    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.

    32

    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. 33

    4) Programar os eventos de cada botão.

    Construindo o Projeto 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). 3) Adicione todo o conteúdo visual e descritivo no “LayoutRoot”. 4) Crie um layout padrão com diferentes estados para o botão. 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, 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).  Adicione um novo “StoryBoard” e salve como anime_2.  Baseado nas propriedades e posições de cada objeto defina uma animação para a primeira imagem (design.png).  Adicione um novo “StoryBoard” e salve como anime_3.  Baseado nas propriedades e posições de cada objeto defina uma animação para a primeira 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) 10) 11) 12)

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

    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) { HtmlPage.Window.Navigate(new Uri("http://www.microsoft.com/expression/products/Overview.aspx?key=design"), "__blank"); } else { HtmlPage.Window.Navigate(new 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. 35

    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 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 Este exemplo, acima proposto, encontra-se completo para consulta.

    36

    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.

    Construindo o Projeto 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.

    37

    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 Este exemplo, acima proposto, encontra-se completo para consulta.

    38

    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.

    39

    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 5) 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: 633px.  Width: 983px. 6) Adicione todo o conteúdo visual e descritivo no “LayoutRoot”. 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). 8) Depois de adicionar todos os elementos necessários, certifique-se que todos os objetos estão presentes no “LayoutRoot”. 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.

    40

    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.

    Concluindo o Projeto 17) Retorne para o Microsoft Expression Blend e execute a aplicação. 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.

    41

    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 Este exemplo, acima proposto, encontra-se completo para consulta.

    42

    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.

    43

    Construindo o Projeto 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: 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) 7) 8) 9) 10)

    Selecione cada botão. Vá às Propriedades do botão e clique em “Events”. Selecione a opção “Click”, de um duplo clique em sua caixa de escrita. Após estas ações o Microsoft Visual Studio irá carregar automaticamente. 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

    44

    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.

    Concluindo o Projeto 12) Retorne para o Microsoft Expression Blend e execute a aplicação.

    45

    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 Este exemplo, acima proposto, encontra-se completo para consulta.

    46

    47

    Related Documents

    Adotando Silverlight 2.0 - V2 - Handson
    May 2020 4
    Adotando Silverlight 2.0 - V1 - Exercicios
    May 2020 8
    Silverlight
    December 2019 8
    Silverlight Notes.docx
    June 2020 1
    Silverlight Chinese
    October 2019 13
    Refworks 20 July 2009 V2
    May 2020 0

    More Documents from "Daren Mansfield"

    [free-scores.com]_giuliani-mauro-giuliani-op107-variaciones-de-un-tema-de-handel-gp-57416.pdf
    June 2020 7
    Sistema Digestivo De Equinos Y Suinos. (prof. Carolina Maldonado)
    June 2020 5
    Les Verbes En Re
    June 2020 16
    Light Pollution.docx
    October 2019 30
    May 2020 10
    Luis_emilio_recabarren_teatro_y_desdicha.pdf
    October 2019 38

    Copyright © 2024 PDFCOKE.