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

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.

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

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)

<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="3,0" Width="184">
<!--Background-->
<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>

<!--City Name and Country -->

<TextBlock Margin="18,9,0,0"
Text="{Binding City,
Converter={StaticResource CityCountryConverter}}"
Style="{StaticResource HeaderTextBlock}" />
<!-- Attractions -->
<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.

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

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.

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

11
 <Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="598" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="64" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</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.RowDefinitions>
<RowDefinition Height="33" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</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.

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

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:

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

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>
<ControlTemplate TargetType="ListBox">
<Grid>
<ScrollViewer x:Name="ScrollViewer" BorderThickness="0"
Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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

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

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

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

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.

<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

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

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

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

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