O Visual Studio 2010 tem diversos recursos que estão muito bem escondidos nos seus vários menus e telas de configuração, mas são acessíveis por teclas de atalho. Isso é vantajoso em diversas situações pois pode agilizar a utilização desses recursos mas também pode se tornar uma irritação ou mesmo um problema se você por acaso acionar uma dessas teclas de atalho por acidente e não souber como voltar atrás. Foi o que aconteceu com um colega no trabalho recentemente.

Por acidente esse colega acionou uma tecla de atalho do Visual Studio 2010 que ativa a exibição de caracteres ocultos (white space). Em outras palavras, o Visual studio passou a exibir todos os espaços e marcação de final de arquivo na tela. O resultado foi algo semelhante ? imagem abaixo:

Não parece ser algo muito irritante neste exemplo pois há pouco código, mas em arquivos com centenas de linhas de código e em arquivo com html esse modo de visualização é bastante irritante e chega a atrapalhar a produtividade pois polue visualmente a tela. Esse colega passou quase 2 meses trabalhando com essa configuração pois não conseguia encontrar um meio de desfazer e voltar ao modo normal de visualização. Ele chegou inclusive a reinstalar o Visual Studio mas não adiantou pois o instalador não removeu as configurações problematicas.

Hoje eu dei uma pesquisada um pouco mais a fundo e acabei encontrando a solução. A opção do menu para essa configuração se encontra em Edit > Advanced > View White Space e pode ser acionada pela tecla de atalho Ctrl+E, S (que foi o que aconteceu com meu colega).

É grande a expectativa pelos desenvolvedores .net para a chegada e comercialização do Windows Phone no Brasil, a plataforma chega bem completa e robusta, atendendo diversas necessidades dos usuários e desenvolvedore e permitindo a criação de aplicativos utilizando as mais modernas tecnologias Microsoft.
Apresentada no evento MIX 11 da Microsoft, a versão com o codinome Mango, chegou com mais de 500 novidades, são tantos recursos que não é possível cobri-los em um único artigo, podemos destacar algumas melhorias como sendo essenciais para o crescimento da plataforma, como o suporte a multitarefa, a atualização da versão do Silverlight para o Silverlight 4 e a atualização do Browser para a versão do Internet Explorer 9 com suporte ao HTML5, essas são sem dúvidas grandes mudanças tanto para o desenvolvedor como para o usuário.

Para os desenvolvedores foram diversas melhorias e para os usuários não foi diferente, houve uma melhor integração com o Skydrive, possibilitando compartilhar fotos por e-mail e SMS, podemos também compartilhar vídeos realizando o upload em background, navegar pelas pastas no Skydrive, realizar pesquisas de conteúdo, entre diversos outros recursos de integração com esse excelente serviço da Microsoft.

Outro recurso interessante é o Bing Vision, que é uma ferramenta que usa a câmera do telefone para reconhecer imagens, por exemplo, ao focar a capa de um determinado livro ele apresenta uma lista de resultados onde o livro é citado, já o Bing Áudio, é um mecanismo inteligente de busca de áudio, ele pode até reconhecer uma música que está sendo tocada e apresentar resultados sobre a música, esses são somente alguns exemplos, mas houve melhorias e atualizações em diversos HUBs, sensores e recursos do sistema operacional, além de uma forte integração com redes sociais como facebook, twitter e linkedIn.

As ferramentas de desenvolvimento para a versão Mango já estão disponíveis para download em versão Beta, muitas informações e recursos podem ficar diferentes na versão final, mas geralmente são mudanças pequenas. Com as ferramentas já é possível criar e testar todo o aplicativo com o Visual Studio 2010 e utilizar todo o poder do emulador que está integrado totalmente com o Expression Blend for Windows Phone ou com o Visual Studio 2010.

Download: Windows Phone Developer Tools 7.1 Beta tools

Os programadores Visual Basic .net agora podem criar aplicativos para o Windows Phone tanto em Silverlight como no XNA Framework, o Visual Basic é totalmente integrado com o Windows Phone Developers Tools 7.1 Beta, não sendo necessário instalar nenhuma ferramenta a parte. No Mango houve melhorias internas no sistema operacional que resultou em uma melhor performance na execução dos aplicativos em geral, alguns recursos agora rodam em threads background, deixando a interface do usuário com uma resposta mais rápida, essas melhorias são refletidas em sua aplicação e você não precisa codificar nada para usar desses benefícios, além dessas melhorias internas ouve também a inclusão de recursos essenciais para a criação de aplicações, como o suporte a OData e a inclusão de um banco de dados local.

O Windows Phone Marketplace também está em constante crescimento, com poucos meses de lançamento, a loja de aplicativos do Windows Phone 7 é constantemente atualizada com dezenas de novos aplicativos, o número de desenvolvedores e aplicativos podem aumentar significativamente com está atualização com codinome Mango, é previsto que o Marketplace esteja disponível para que os usuários possam comprar aplicativos em um total de 35 países, inclusive o Brasil e com suporte a 16 novas línguas, contando com o Português do Brasil.

Se você é um desenvolvedor da plataforma Microsoft .net e ainda não começou a desenvolver para o Windows Phone, é importante saber que a curva de aprendizado não é muito grande, principalmente se você já tem conhecimento na plataforma Silverlight ou XNA, o Windows Phone pode se tornar competitivo nos próximos anos, principalmente com a entrada e comercialização de equipamentos pelas operadoras no Brasil, somado com a recente parceria com a Nokia, umas das mais importantes empresas do setor, e a compra do Skype pela Microsoft, que vai trazer esse aguardado software para a plataforma .net, além de novas parcerias com fabricantes, tudo isso está fortalecendo a tecnologia mais recente da plataforma mobile da Microsoft.

Modelo de execução – Estado dormant

Houve uma pequena modificação no modelo de execução de aplicativos no Windows Phone Mango, nesta versão temos um novo estado da aplicação chamado dormant, para entendê-lo, vamos relembrar como funciona o ciclo de vida de uma aplicação no Windows Phone, temos quatro eventos que são acionados como apoio durante o uso do aplicativo, são eles, launching, closing, activated e deactivated, e junto com esses eventos podemos ter dois estado da aplicação, running e tombstoned, e para auxiliar com a manipulação de estados podemos utilizar os métodos OnNavigatedTo e OnNavigatedFrom. Quando você inicia uma aplicação, por exemplo, através do botão Start clicando em algum Tile, automaticamente uma nova instância do aplicativo será criada na memória, neste momento o evento Launching é acionado, ou seja, sempre que uma nova instância é criado, o evento Launching será chamado, neste evento temos que evitar a utilização de códigos que possam ser demorados e atrapalhar a experiência de uso do usuário da aplicação, além de que o Windows Phone Marketplace também informa limites de tempo para que a sua aplicação inicie. Após o evento Launching ser acionado, a sua aplicação entra em um estado chamado Running, neste momento sua aplicação está em execução e você poderá realizar tarefas e o usuário poderá navegar em sua aplicação. Neste momento se o usuário apertar o botão Start, por exemplo, ele estará acionando um evento chamado Deactivated e sua aplicação deverá salvar qualquer estado do aplicativo que você deseja restaurar caso o usuário retorne para sua aplicação através do botão Back, é neste ponto que houve um mudança com a versão Mango, agora existem dois
estados utilizados neste processo, o dormant e o tombstoned, sua aplicação entre em estado dormant antes de entrar em tombstoned, o que não acontecia na versão anterior, onde o aplicativo entrava direto em tombstoned. Quando o usuário navega para fora da sua aplicação , o Windows Phone coloca o aplicativo no estado dormant, neste momento todo o processamento, ou seja, todas as threads, são paradas, mas a aplicação ainda está na memória do aplicativo, este estado permite retornar a aplicação utilizando o máximo de performance, pois não é necessário recriar qualquer estado pois todos foram preservados. Se um aplicativo está no estado dormant e o usuário iniciar outro aplicativo, o sistema operacional vai verificar se esse novo aplicativo iniciado precisa utilizar mais memória do que o device disponibiliza como livre no momento,se isso ocorrer, a sua aplicação poderá ser escolhida para sair do estado dormant e entrar no estado tombstoned.

Mais informações : http://msdn.microsoft.com/en-us/library/ff817008(v=vs.92).aspx

Background Agents

Com os Background Agents podemos realizar algumas tarefas mesmo que a aplicação não esteja em execução, existem duas formas de realizar esse agendamento de tarefas, através de scheduled notifications ou scheduled tasks.

Uma scheduled notification é um aviso, que pode ser do tipo Alarm ou Reminder, o tipo Alarm permite que você especifique um arquivo de som para tocar quando a notificação é acionada, o tipo Reminder, você pode especificar uma URI para sua aplicação, quando o usuário clicar na notificação, a aplicação será executada e a URI será passado com parâmetro.

Já um Scheduled Task permite que você execute uma tarefa em background, mesmo quando a aplicação não está sendo executada, cada aplicação pode ter um único agente, que será registrando em sua aplicação e você pode especificar o tipo de scheduled que será executado, existem dois tipos, o PeriodicTask e o ResourceIntensiveTask, o primeiro é indicado para tarefas onde o tempo de execução será curto, como por exemplo, armazenar uma pequena quantidade de dados, e pode ser utilizado regularmente, já o ResourceIntensiveTask, tem sua utilização mais rara, pode ser utilizado para tarefas mais demoradas e que utilizam mais dos recursos do smartphone, com por exemplo a sincronização de um grande volume de dados.

File Transfers

Na versão mango temos disponíveis algumas APIs para a manipulação de uploads e downloads de arquivos no Windows Phone, esses arquivos podem ser enfileirados e executados em segundo plano (background), o Windows Phone fornece meios de verificar o status da transferência dos arquivos e ainda fornece meios de monitorar o progresso do download ou upload.

Áudio Background

Tocar um arquivo de som rodando em background, mesmo que a aplicação não esteja em foreground, se tornou uma tarefa fácil e gerenciada pelo sistema operacional, o suporte ao áudio em background é fornecido pelo namespace Microsoft.Phone.BackgroundAudio, com ele é possível acionar uma música e mesmo que o usuário inicie outros aplicativos, a música continuará em execução e o usuário ainda terá o acesso aos controles de aumentar e diminuir o volume.

Mais informações: http://msdn.microsoft.com/en-us/library/hh202978(v=vs.92).aspx

Sensores

Os smartphones estão ficando cada vez mais sofisticados e uma série de sensores estão sendo disponibilizados com esses modernos aparelhos, na versão mango temos disponível além do conhecido acelerômetro, mais dois sensores igualmente importantes, como a bússola e o giroscópio.

A bússola permite obter o ângulo pelo qual o smartphone é girado em relação ao polo magnético da terra, sua aplicação pode realizar a leitura dessas forças magnéticas e utilizar para realizar alguma ação, o sensor bussola não é um item considerado obrigatório para os fabricantes de equipamentos utilizarem com o Windows Phone, portanto se a sua aplicação for utilizar o recurso , ele precisa informa-lo e ainda verificar se o recurso está presente através de recursos do sistema operacional. Eventualmente a bussola pode ficar descalibrada, os smartphones com o sensor possuem recursos para a calibração da bussola, onde um movimento em formado de infinito é realizado.

O Giroscópio é outro sensor disponível para o desenvolvedor utilizar em suas aplicações, com ele podemos medir a velocidade de rotação do smartphone dos eixos X, Y e X. Todos os equipamentos com Windows Phone possuem o acelerômetro como sensor obrigatório, o acelerômetro consegue medir a aceleração do smartphone em movimentos mais intensos, no caso de uma simples e leve rotação de eixos, esses valores não podem ser lidos através do acelerômetro, já com o giroscópio é possível obter os valores quanto a velocidade de rotação do celular.

Juntos, o giroscópio, acelerômetro e a bussola, forma um conjunto completo que pode ser utilizado para formar um sofisticado sensor de movimentos, para simplificar essa integração, a versão Mango disponibiliza através do Microsoft.Devices.Sensors.Motion, um conjunto de recursos que facilitam a leitura dos resultados gerados pelos sensores para que você possa utilizar em sua aplicação.

continua…

A renderização da interface gráfica do Windows Phone 7 foi projetada para buscar o máximo de performance que o smartphone pode proporcionar, a UI Thread é responsável pelo desenho da interface principal do aplicativo, quando criamos um software para o WP7, devemos evitar bloquear a UI Thread, pois ela está diretamente relacionada a performance do software e também com a experiência do usuário com o aplicativo.

Os smartphones com Windows Phone 7, tem disponível um recurso que utiliza a aceleração da GPU, aumentando consideravelmente o desempenho gráfico para algumas tarefas relacionadas a manipulação de imagens e animações, principalmente as que usam a rotação de eixos, escalas e alguns tipos de? animações que usam de Storyboard. Não é necessário acionar nada para que alguns tipos de Storyboards utilizem esse recurso, eles automaticamente usam o Composition Thread ou também chamado de Render Thread.

O Render Thread pode ser usado para animações simples utilizando DoubleAnimation ou Easing Functions, ou em propriedades? como Opacity, Render Transforms e Rectangular Clip. Habilitando o EnableRedrawRegions podemos ver quais regiões na aplicação estão sendo desenhadas no momento, visualizando? quadro a quadro:

Application.Current.Host.Settings.EnableRedrawRegions = true;

Composition Frame Rate Thread? e UI Frame Rate Thread

Quando executamos um aplicativo através do Visual Studio 2010 com o smartphone plugado no computador,? podemos visualizar alguns números no lado superior direito da tela, esses números servem para você ter como parâmetro alguns pontos sobre a renderização gráfica, memória, etc, os dois primeiros números de 3 dígitos são referente a Render Thread e a UI Thread.

O Composition Frame Rate Thread está associado a velocidade com que a tela é atualizada em uma thread separada da UI Thread, como referência, o Windows Phone 7 utiliza o valor 30 como ponto de equilíbrio, ou seja, quando for abaixo de 30, os números estarão na cor vermelha, acima de 30 ele ficará com a cor default, o valor mais próximo de uma boa performance é 60, sua aplicação deve buscar sempre se aproximar desse número.

O UI Frame Rate Thread mostra a taxa de atualização da Thread principal, enquanto a interface do usuário estiver ativa, o valor de 30 também foi definido como ponto de equilíbrio, ficando vermelho se a aplicação estiver abaixo deste valor, porém este valor deve ser acima de 20 para ter um tempo de resposta aceitável e quanto maior o valor , o tempo de resposta será mais rápido.

Exemplo prático de UI Thread VS Render Thread

Vou criar um aplicativo simples com dois elementos Ellipse na tela, um com o nome BolaVermelha e outro com BolaAzul, as duas Ellipses serão animadas na tela, a BolaAzul vai utilizar o Render Thread, pois vamos utilizar uma Storyboard com a propriedade RenderTransform, já a BolaVermelha vamos anima-lá atualizando a mesma propriedade, mas utilizando um timer DispatcherTimer para atualizar a propriedade, ou seja, não utilizaremos uma Storyboard para realizar a animação e ela estará utilizando a UI Thread.

   1:    public partial class MainPage : PhoneApplicationPage

   2:      

   3:  

   4:          DispatcherTimer timer;

   5:          RotateTransform rotateVermelho;

   6:          bool bateVolta;

   7:          int contador = 0;

   8:  ? 

   9:          public MainPage()

  10:          

  11:              InitializeComponent();

  12:              Loaded += new RoutedEventHandler(MainPage_Loaded);

  13:  ? 

  14:              Application.Current.Host.Settings.EnableRedrawRegions = true;

  15:  

  16:              this.BolaVermelha.RenderTransform =

  17:                  new RotateTransform();

  18:              this.BolaAzul.RenderTransform =

  19:               new RotateTransform();

  20:  

  21:              rotateVermelho =

  22:              BolaVermelha.RenderTransform as RotateTransform;

  23:              rotateVermelho.Angle = -50;

  24:  ? 

  25:              timer = new DispatcherTimer();

  26:              timer.Tick += new EventHandler(timer_Tick);

  27:              timer.Interval = new TimeSpan(0, 0, 0, 0, 33);

  28:              timer.Start();

  29:  ? 

  30:              bateVolta = false;

  31:  

  32:          

  33:  ? 

  34:          void MainPage_Loaded(object sender, RoutedEventArgs e)

  35:          

  36:  ? 

  37:              Storyboard storyboard = new Storyboard();

  38:              DoubleAnimation animation = new DoubleAnimation();

  39:              animation.From = 0;

  40:              animation.To = 180;

  41:              animation.Duration = new Duration(new TimeSpan(0, 0, 1));

  42:              animation.AutoReverse = true;

  43:              Storyboard.SetTarget(animation, this.BolaAzul.RenderTransform);

  44:              Storyboard.SetTargetProperty(animation, new PropertyPath("Angle"));

  45:              storyboard.Children.Add(animation);

  46:              storyboard.RepeatBehavior = RepeatBehavior.Forever;

  47:              storyboard.Begin();

  48:  

  49:          

  50:  ? 

  51:          void timer_Tick(object sender, EventArgs e)

  52:          

  53:              if (rotateVermelho .Angle == 120)

  54:              

  55:                  bateVolta = true;

  56:              

  57:              if (rotateVermelho.Angle == -50)

  58:              

  59:                  bateVolta = false;

  60:              

  61:  ? 

  62:              if (bateVolta == true)

  63:              

  64:                  rotateVermelho.Angle -= 1;

  65:              

  66:              else

  67:              

  68:                  rotateVermelho.Angle += 1;

  69:              

  70:  ? 

  71:              contador++;

  72:  ? 

  73:              if (contador == 600)

  74:              

  75:                  MessageBox.Show("Parando a UI Thread");

  76:                  Thread.Sleep(1000);

  77:              

  78:  ? 

  79:              if (contador == 1000)

  80:              

  81:                  MessageBox.Show("Inserindo BitmapCache");

  82:                  BitmapCache cache = new BitmapCache();

  83:                  BolaVermelha.CacheMode = cache;

  84:  ? 

  85:              

  86:  ? 

  87:          }

  88:  ? 

  89:      }

?

Na linha 71 criei um contador, quando chegar a 600, ele vai bloquear a UI Thread, na linha 76, a UI Thread é bloqueada propositalmente utilizando Thread.Sleep, neste momento você irá notar que a animação da? BolaVermelha irá parar com base no tempo definido em Sleep, pois a sua Thread está bloqueada, mas a BolaAzul continuará a se movimentar.

Quando o contador chegar a 1000,? vou adicionar um BitmapCache na propriedade CacheMode da BolaVermelha, em alguns casos onde não estamos utilizando a Render Thread, podemos criar um cache, ou seja, colocar os bitmaps na memória, e com isso aproveitar da aceleração da GPU, com performance semelhante a Composition Thread, porém a BolaVermelha continuará na UI Thread,? uma simples mensagem na tela utilizando um MessageBox irá bloquear a UI Thread enquanto a BolaAzul continuará em movimento.

Conclusão

UI Thread e Composition Thread são recursos fundamentais que o Windows Phone 7 utiliza para apresentar a interface gráfica, conhecendo essas Threads você poderá melhorar a perfomance da sua aplicação, os smartphones são equipamentos limitados se comparado a um PC, conhecer quando utilizar determinado recurso pode fazer muita diferença, existem diversos outros pontos a serem considerados quanto ao monitoramento da aplicação com objetivo de melhorar a perfomance, neste artigo somente apresentei uma introdução sobre o assunto.

Alguns recursos podem não funcionar como esperado no emulador, pois depende de diversos fatores como o suporte a DirectX pela placa de video, neste link você encontra mais informações:

WP7/Silverlight Graphics Performance

Mais informações sobre Bitmap Cache : Bitmap Cache

Mais informações sobre performance: Performance Considerations in Applications for Windows Phone

O evento MIX 2011, realizado pela Microsoft em Las Vegas nos dias 12, 13 e 14 de Abril, apresentou uma série de novidades, algumas delas foram divulgadas ao vivo através do site http://live.visitmix.com .

O Fernando Martin  ( @fernandomartin ) acompanhou o MIX 11 em Las Vegas e twittou alguns links que acho interessante divulgar para quem está querendo começar ou testar o Silverlight 5 !

Silverlight 5 Tools for Visual Studio  http://bit.ly/gjdloV 

Expression Blend Preview for Silverlight 5  http://bit.ly/dW49Nk

Silverlight 5 SDK CHM   http://bit.ly/dPIzRv

Visual Studio 2010 SP1  http://go.microsoft.com/fwlink/?LinkID=186892

Visual Web Developer Express 2010 SP1    http://www.microsoft.com/express/Web/

No MIX11, Scott Guthrie anunciou a disponibilização da versão beta do Silverlight 5 para download. Abaixo estão alguns link para os downloads relacionados a essa versão beta:

• Visual Studio 2010 SP1 ou Visual Web Developer Express 2010 SP1 (é necessário ter o Service Pack 1 do Visual Studio para poder usar o Silverlight 5)
• Silverlight 5 Tools for Visual Studio
• Expression Blend Preview for Silverlight 5
• Silverlight 5 SDK CHM
• Runtime de desenvolvimento: Windows ed Mac – não é necessário se você instalar o tools. Só é necessário se for testar aplicações feitas em Silverlight 5 em computadores sem o tools do SL5 instalado.
• Silverlight 5 SDK – para servidores de build. O tools já instala o sdk no computador do desenvolvedor
• Documento de mudanças (breaking changes)

A Microsoft liberou o Training Kit para estudos sobre o Visual Studio 2010 e .NET Framework 4 totalmente gratuito.

O kit Inclui apresentações, testes práticos e demonstrações, além de englobar uma série de tecnologias entre elas:

Clique aqui para acessar o Training Kit – Visual Studio 2010 e .NET Framework 4 e fazer o download do pacote.

Neste tutorial vou criar uma pequena aplicação utilizando o Expression Blend 4,  será implementado o básico para quem está começando com o desenvolvimento de projetos para o Windows Phone 7 utilizando o Expression Blend 4.

No artigo anterior, vimos como preparar o ambiente gratuito de desenvolvimento para criar aplicações mobile utilizando o Windows Phone 7, o Expression Blend é instalado junto com o Windows Phone Developer Tools, saiba mais em Introdução ao Windows Phone 7.

Se você ainda não conhece o Expression Blend 4, talvez tenha uma dúvida, quando utilizar o Visual Studio 2010 e quando utilizar o Expression Blend ?

Tudo que é produzido em XAML pelo Expression Blend também pode ser reproduzido no Visual Studio 2010, porém, a criação de aplicativos visualmente ricos com as novas tecnologias trouxe novas possibilidades ao programador, como o suporte a elementos multimídias e animações, a possibilidade de modificar como as informações são apresentadas nos elementos visuais e outros diversos recursos, com isso houve a necessidade de ter uma ferramenta voltada ao designer da aplicação, onde o foco seria a camada visual.

O Expression Blend chegou para suprir essa necessidade, dessa forma o designer da aplicação tem uma ferramenta com recursos mais sofisticados e visuais, com o Blend a maioria das tarefas são executadas de forma visual, sem que seja necessário digitar dezenas de códigos, por exemplo, o Expression Blend tem total suporte a criação de animações, possuindo uma timeline, onde o designer poderá acionar a animação e gravar todos os movimentos que fizer com o mouse na aplicação, quando finalizar, todo o código XAML é gerado automaticamente pelo Blend, esse é somente um exemplo do qual a ferramenta gera produtividade quanto à criação visual da interface.

O Expression Blend é totalmente integrado ao Visual Studio 2010, é possível trabalhar com as duas ferramentas abertas com o mesmo projeto, que as modificações são atualizadas em cada ferramenta.

Criando uma aplicação no Expression Blend

A aplicação do tutorial vai listar algumas urls em um ListBox, quando o usuário clicar em um item, a aplicação será redirecionada para outra página em XAML, essa página vai  conter um browser e receberá o link a ser carregado.

Inicie o Expression Blend e crie uma aplicação do tipo Windows Phone Application, Figura 1, na aba Projects, temos os arquivos iniciais da aplicação gerados pelo Expression Blend, a aplicação tem três arquivos de imagens, e dois arquivos do tipo XAML, o XAML (eXtensible Application Markup Language), é uma marcação similar a marcação XML, é utilizada no Silverlight tanto para aplicações WEB como para o WP7, e também é utilizada para criar aplicações desktop com o WPF para o ambiente Windows.

Com a marcação XAML podemos criar layouts de telas separadas do código da linguagem de programação C#, possibilitando assim, um menor acoplamento entre o design e a programação, dessa forma um designer poderia trabalhar no design das telas utilizando somente o XAML, enquanto o programador faz o modelo da aplicação.

Resumidamente o arquivo App.xaml é usado pela aplicação silverlight para declarar recursos compartilhados no projeto, já o arquivo MainPage.xaml é o arquivo principal da aplicação, sua representação visual é a que aparece no centro da tela, mostrando uma interface com um layout inicial de um aplicativo WP7.

Figura 1 – Windows Phone Application

Layout Control

Na aba Objects and Timeline, temos a hierarquia dos elementos visuais da aplicação, em nosso projeto, inicialmente vemos 3 itens, o PhoneApplicationiPage, que é a pagina principal do layout, onde todos os elementos serão inseridos, o ApplicationBar, é uma área reservada para um barra onde podemos personalizar botões e menus para serem usados na aplicação, em seguida temos o LayoutRoot, este é o nome dado ao Layout Control Grid da aplicação default.

Um Layout Control serve para auxiliar no posicionamento de elementos na tela, existem vários controles de layout disponíveis em Silverlight, cada layout control tem sua utilidade dependendo do objetivo, o layout control Grid é um dos mais flexíveis, semelhante a uma tabela HTML, esse controle permite que seja criado linhas e colunas,  além de definir o tamanhos e a altura de cada linha e coluna.

Abaixo segue os tipos de Layouts disponíveis para serem utilizados no Windows Phone 7:

• Grid – Layout mais flexível , é possível inserir os elementos dentro de linhas e colunas.
• Canvas – permite posicionar os elementos em posições fixas dentro do Layout Control, ou seja, você pode definir uma posição exata que o elemento deve ficar no Canvas, fornecendo suporte ao posicionamento absoluto dos elementos filhos.
• StackPanel – Adiciona os elementos em uma pilha, com orientação vertical ou horizontal.
• ScrollViewer – Habilita barras de rolagens vertical e horizontal
•  Border – Insere uma borda em um único elemento interno.

 Veja neste link os Layout Controls na prática, para facilitar o entendimento eu digitei o código XAML abaixo da tela principal, refletindo as modificações, conforme digitadas. (video wmv ).

Conhecendo o MainPage.xaml

A tela inicial da aplicação contém um layout Grid principal, chamado de LayoutRoot , com um fundo transparente. Em seguida temos a definição de duas linhas dentro do layout. Dentro do layout control Grid chamado LayoutRoot temos outro layout control do tipo StackPanel, note que o StackPanel está definido na linha zero do Layout Control Grid acima, utilizando a propriedade Grid.Row = ”0”. Dentro do Stackpanel temos três elementos, um TextBlock chamado ApplicationTitle, onde na propriedade Text você poderá modificar o nome da aplicação para qualquer nome que desejar , em seguida temos outro TextBlock com nome de PageTitle, onde podemos também na propriedade Text  modificar o título da página. O Terceiro elemento é outro Layout Control do tipo Grid com o nome de ContentPanel, é nele que o conteúdo da sua aplicação será criado no projeto.

Listagem 1. XAML do código default

Mas tudo isso não é uma regra, em nossa aplicação de exemplo queremos aproveitar o máximo da tela do Windows Phone 7, vamos remover todo o conteúdo do primeiro layout Grid, o LayoutRoot, em seguida troque o tipo de layout, para isso, selecione com o botão direito do mouse no layout control e em Objects and Timeline, clique em Change Layout Type, Figura 3, e altere para um StackPanel. Adicione um ListBox no StackPanel,  o código completo está na Listagem 2.

Vamos também remover a barra do system tray do WP7, onde aparece o nível da bateria, sinal e hora, para isso, selecione o item PhoneApplicationPage na aba Objects and Timeline e nas propriedades, remova o checkbox Show SystenTray, Figura 2, com isso temos todo o espaço disponível da tela para utilizar em uma aplicação.

Figura 2 – Removendo o SystemTray

Figura 3 – Alterando o Layout Control

Listagem 2. XAML da aplicação

Inserindo dados de exemplo

Para criar o nosso exemplo seria necessário carregar informações de algum provedor de dados, o designer da aplicação não precisa conhecer como esses dados serão implementados, pois o ideal é que eles sejam ligados de forma menos acopladas possível, ou seja, que cada camada tenha suas responsabilidades bem definidas, para facilitar essa tarefa ao designer, e para auxiliar nos testes de dados em interfaces XAML, o Expression Blend disponibiliza uma forma de criar dados de exemplo,  deixando ainda os elementos visuais corretamente ligados as objetos que contém os dados.

Para criar uma coleção de dados de exemplo e ligar ao ListBox , clique na aba Data e no ícone Create Sample Data, digite o nome do DataSource, clique nas propriedades e modifique conforme desejar, depois arraste e solte a coleção para dentro do ListBox e você terá uma ListBox ligada a uma coleção de dados. Como esse passo é 100% visual no Expression Blend, veja neste vídeo rápido o processo passo a passo.

 ( video wmv) – Create Sample Data

Figura 4 – ListBox com dados de exemplo

Navegação de Páginas

Para finalizar o exemplo, vamos inserir um evento SelectionChanged no ListBox, assim quando o usuário selecionar um item no Listbox vai abrir outra página com o link selecionado carregado no browser, para inserir o evento, selecione o ListBox, na aba properties, clique  no ícone Events e dê um duplo click no evento SelectionChanged, Figura 5.

Figura 5 – ListBox – Criando um evento SelectionChanged

Dentro do evento SelectionChanged do ListBox,  primeiro vamos obter o item selecionado no ListBox através da propriedade SelectedItem, depois através do recurso NavigationService.Navigate, vamos navegar até a outra página, passando como parâmetro a url que será carregado no Browser, Listagem 3. Adicione uma página em seu projeto com o nome de PhonePageBrowser, adicione um elemento WebBrowser e o método onNavigatedTo, esse método será responsável por obter a url e carregar o browser com o link passado, Listagem 4.

Listagem 3. XAML da aplicação

Listagem 4. XAML da aplicação

Conclusão

O Expression Blend é um poderoso aliado para a criação de aplicativos para o Windows Phone 7 com Silverlight,  vimos de forma superficial como criar uma aplicação na ferramenta, além de conhecer um pouco sobre os layout controls, sample data e navegação de páginas.

Neste artigo será apresentada uma pequena introdução ao desenvolvimento de projetos mobile com o Windows Phone 7, o Windows Phone 7 ou WP7, é o mais recente sistema operacional da Microsoft para a plataforma mobile, foi projetado para proporcionar ao desenvolvedor a criação de aplicativos com recursos interativos e ricos, seu visual é simples, agradável e moderno. Para o desenvolvimento de aplicativos para essa plataforma a Microsoft investiu praticamente no Microsoft Silverlight e no Framework XNA.

O Silverlight pode ser utilizado para diversas finalidades, mas sua força está na criação de aplicativos de negócios em geral, utilizando a plataforma .net. Além do WP7 é possível utilizar o Silverlight para criar projetos web , rodando no browser ou até mesmo criar projetos Silverlight que rodam instalados fora do browser.

O XNA é um framework completo para o desenvolvimento de games, tanto para PCs com o Windows, como para o XBOX 360 e o Windows Phone 7, é possível criar jogos com o Silverlight , mas como o XNA foi concebido com esse propósito ele tem um suporte melhor para a criação de games mais complexos.

Se você já programa em C# .net ou até em Silverlight, você poderá aproveitar e aplicar seus conhecimentos para criar aplicativos para o WP7, neste artigo será apresentado como preparar o ambiente de desenvolvimento para você iniciar a criação de aplicativos para o Windows Phone 7 com Silverlight utilizando o Visual Studio 2010 ou com o Expression Blend.

O Ambiente de desenvolvimento para o WP7 é totalmente gratuito, você poderá utilizar o Visual Studio 2010 Express, o Visual Studio é a principal IDE da Microsoft para o desenvolvimento de aplicativos para a plataforma .net, neste artigo vou usar a versão Premium do Visual Studio 2010 , mas você poderá utilizar os mesmos conceito na versão Express (gratuita).

Uma ferramenta muito interessante e com total suporte ao Windows Phone 7 é o Expression Blend 4, o Blend é uma ferramenta completa para a criação de layouts aprimorados, com suporte ao Windows Phone, nela diversas tarefas são realizadas com a ajuda do mouse, os códigos XAML são gerados automaticamente conforme você manipula visualmente o layout das telas, além de praticidade e produtividade ele também possui um emulador do Windows Phone e diversos recursos para o designer da aplicação. 

Ambiente de desenvolvimento – Windows Phone 7 Developer Tools

Para iniciar o desenvolvimento com o WP7 você vai precisar instalar o Windows Phone Developer Tools  RTW , ele está disponível para o Windows Vista e Windows 7, o programa inclui os seguintes aplicativos:

Para outras informações sobre o ambiente gratuito de desenvolvimento para o WP7 clique aqui.

Inicie a instalação do Windows Phone Developer Tools RTW, se você tiver alguma versão incompatível instalada,  o software vai alertá-lo, a primeira etapa é aceitar a licença do programa, em seguida aparecerá uma tela com o botão “Install Now”, clique  para iniciar a instalação, você poderá neste momento alterar o diretório de instalação, Figura 1, se clicar no botão Customize.

O Windows Phone Developer Tools iniciará a instalação dos programas e você verá a tela da Figura 2 assim que a instalação de todos os programas for completada.

Figura 1. Customizando a Instalação do Windows Phone Developer Tools

Figura 2. Instalação concluída do Windows Phone Developers Tools

Os programadores Visual Basic tem um Windows Phone Developers Tools específico neste link Visual Basic for Windows Phone Developer Tools – RTW.

Criando uma aplicação no Visual Studio 2010

Abra o Microsoft Visual Studio 2010 e clique em File->New->Project, cinco opções são apresentadas como modelos de projetos para o Windows Phone, o primeiro é o Windows Phone Application, nele temos um projeto básico com o mínimo necessário para criar uma aplicação WP7, a segunda opção é a Windows Phone Databound, que permite criar uma aplicação baseada em um modelo capaz de trabalhar com uma lista de dados e com controle de navegação,  a terceira opção é a Windows Phone Class Library, onde é possível criar uma biblioteca para o Windows Phone, em seguida temos o Windows Phone Panorama Application, que cria um projeto com um modelo de navegação muito comum no Windows Phone, onde é possível através do toque na tela andar pela aplicação e navegar em suas listas de dados e por ultimo temos o Windows Phone Pivot Application, onde está disponível um controle Pivot para ser usado na aplicação.

Figura 3. Tipo de projetos para Windows Phone no Visual Studio 2010

Como o foco do artigo não é a criação de uma aplicação para o Windows Phone 7 e sim somente dar uma introdução ao desenvolvimento para a plataforma, vamos criar um projeto do tipo Windows Phone Panorama Application e modificar somente em dois pontos e em seguida visualizar as alterações.

No código fonte da aplicação (XAML), vamos modificar o título da aplicação e o cabeçalho do primeiro item do controle panorâmico, localize o controle  Panorama e modifique o parâmetro Title para um nome qualquer, em seguida faça o mesmo com a propriedade Header do controle PanoramaItem, veja a Figura 4.

Figura 4. Modificando o fonte do projeto Windows Phone Panorama Application

Agora clique no play do Visual Studio 2010 para executar a aplicação e visualizar o emulador do Windows Phone 7, Figura 5 e 6.

Figura 5. Executando a aplicação no emulador do Windows Phone 7

Figura 6. Emulador do Windows Phone 7 no Visual Studio 2010

Abrindo a aplicação no Expression Blend 4

O Expression Blend é um aplicativo que auxiliar na parte gráfica da aplicação, com ele temos uma ferramenta gráfica e com recursos específicos para essa finalidade, um bom exemplo e a criação de animações em sua aplicação, vamos supor que você queira animar um determinado elemento, seja uma imagem ou um botão, por exemplo,a vantagem de utilizar o Blend nesta tarefa é a possibilidade de gravar toda a animação na tela e ele automaticamente gera todo o código XAML, poupando dezenas de linhas de códigos que seriam digitadas no Visual Studio 2010.

O Microsoft Expression Blend for Windows Phone é um dos aplicativos instalados pelo Windows Phone Developers Tools, existe também uma versão para uso do Silverlight  que é a que estou usando neste artigo, chamada de Expression Blend 4, que faz parte do pacote do Expression Studio 4, integrado com o Visual Studio 2010 e que também funciona para programar para o Windows Phone 7.

Saiba mais sobre o Expression Studio 4 neste artigo da .net Magazine.

O Expression Blend é integrado ao Visual Studio 2010, basta clicar no seu projeto com o botão direito do mouse e clicar em Open in Expression Blend, Figura 7, qualquer modificação feita nas ferramentas já é atualizado na outra assim que uma é acionada.

Figura 7. Emulador do Windows Phone 7 no Visual Studio 2010.

Figura 8. Expression Blend 4.

App Hub

Os aparelhos com o Windows Phone 7 ainda não chegaram ao Brasil, o jeito é aguardar ou adquirir um aparelho importado, depois que você já preparou o ambiente de desenvolvimento e já está desenvolvendo aplicativos com a tecnologia Silverlight ou XNA, você vai querer testar o aplicativo no próprio aparelho e ainda começar a ganhar dinheiro enviando sua aplicação para o Windows Phone Marketplace, o Windows Phone Marketplace é onde você pode testar e comprar aplicativos, jogos, músicas para o seu Windows Phone 7.

O Windows Phone Marketplace já está aberto para que os desenvolvedores possam enviar seus aplicativos, para que você possa criar aplicações e vender no Marketplace você vai precisar desbloquear o equipamento e criar uma conta no site App Hub, vamos ver agora passo a passo como realizar esse procedimento.

1. Acesse o site http://create.msdn.com/en-US .
2. Clique em Sig-in .
3. Entre com o seu Window Live ID .
4. Selecione o tipo de conta: Company (Empresas), Individual (desenvolvedor individual) ou Student (estudante que participa do projeto DreamSpark) .

As contas do tipo Company e Individual tem um custo anual de $99, se você é estudante, participe do projeto DreamSpark, atualmente o Dreamspark é a única forma de participar do App Hub sem custos, no meu caso eu selecionei um conta de desenvolvedor individual.

Figura 8. Tipo de conta no App Hub

5. O próximo passo é digitar algumas informações pessoais como nome, endereços e email, no campo Publisher Name, você informará o nome que aparecerá no Windows Phone Marketplace.
6. Selecione a imagem que será apresentada quando você participar de fóruns do App Hub.

Figura 9. Imagem que será apresentada nos fóruns.

7. Se você não selecionou o tipo Student (Dreamspark), será necessário pagar uma taxa anual para enviar aplicativos para o Windows Phone Marketplace, está disponível atualmente o pagamento via cartão de crédito VISA e MASTERCARD.

8. A última etapa e a confirmação do email e de sua identidade, no caso da conta individual, ambos são feitos por e-mail. Você receberá uma e-mail alguns dias após o cadastro para validar a sua identidade, no caso de desenvolvedor individual é necessário enviar uma cópia da sua carteira de motorista ou passaporte.

Figura 10. Conclusão do cadastro no App Hub.

Na página do App Hub, no link Devices, aparecerão os aparelhos que você vai desbloquear e poderá realizar o deploy no Visual Studio 2010 antes de publicar no Windows Marketplace. 

Zune

O Zune é o software que irá fazer a sincronização da sua aplicação no Visual Studio 2010 e o equipamento, para mais informações sobre o Zune veja no blog do MSDN.

Faça o Download da última versão do Zune no site oficial.

Desconecte o seu aparelho do computador, caso esteja conectado, feche todos os aplicativos abertos e inicie a instalação, a primeira etapa é aceitar a licença do ZUNE, em seguida o software é instalado. Quando você receber a mensagem de “INSTALAÇÃO DO SOFTWARE DO ZUNE CONCLUÍDA”, clique em fechar, uma tela será apresentada com as etapas de configurações do ZUNE, a primeira configuração e a tela abaixo onde você vai inserir o nome que o equipamento vai ter no software do ZUNE, no equipamento e no site.

Figura 11. Nome do telefone no ZUNE

Conecte o seu celular via USB e deixe o windows realizar a instalação dos drivers, agora você já tem o seu aparelho sincronizado com o ZUNE.

Figura 12. Dados do aparelho sincronizado

Registrando o aparelho no Windows Phone Developer

Este é o último passo antes de você iniciar o deploy com o Visual Studio 2010 e enviar sua aplicação ao Marketplace, vamos agora registrar a conta como desenvolvedor, no menu iniciar do Windows, localize o menu Windows Phone Developer Tools e clique em Windows Phone Developer Registration.

Figura 13. Registro de desenvolvedor

Deploy no Visual Studio 2010

No menu do Visual Studio 2010, localize o combo onde está escrito Windows Phone 7 Emulator e altere para Windows Phone 7 Device, selecione o projeto no Solution Explorer do Visual Studio com o botão  direito do mouse e clique em deploy. O Zune deverá sempre estar ativo para realizar a sincronização com o equipamento.

Figura 14. Deploy no Visual Studio 2010

Conclusão

Com a evolução dos aparelhos de celulares e smartphones, o mercado mobile está crescendo assustadoramente a cada ano, os novos equipamentos estão recheados de novos recursos e com isso a necessidade de que tenha um sistema operacional capaz de aproveitar ao máximo tudo que as novas tecnologias estão oferecendo, é neste cenário que a Microsoft apresenta o seu Windows Phone 7.

O Windows Phone Marketplace está recheado de aplicativos e games, o potencial do sistema operacional da Microsoft é muito positivo, particularmente eu acho o sistema operacional fantástico e de incrível liberdade de desenvolvimento para os desenvolvedores .net, principalmente pela produtividade e pelo fato de aproveitar os conhecimentos já adquiridos em C#, Visual Basic, XNA e Silverlight, enquanto o Windows Phone ainda não está disponível aqui no Brasil , podemos criar aplicações com as ferramentas gratuitas da Microsoft.

Links Interessantes:

http://winphoneblog.com.br/ 

http://channel9.msdn.com/Series/Windows-Phone-7-Development-for-Absolute-Beginners

http://www.devmedia.com.br/post-17986-Windows-Phone-7-e-Silverlight-4.html

http://www.charlespetzold.com/phone/

http://www.devmedia.com.br/post-18740-Animacoes-no-Windows-Phone-7.html

http://blogs.msdn.com/b/jpclementi/archive/2011/02/02/links-mais-importantes-para-o-windows-phone-7.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clementi+%28Falando+de+novidades+e+tecnologias+Microsoft%29

http://www.microsoft.com/showcase/en/us/related?video=bda22419-a49e-4ef6-973d-f9c6d59aa525

FAQ

Os duendes das estatísticas do WordPress.com analisaram o desempenho deste blog em 2010 e apresentam-lhe aqui um resumo de alto nível da saúde do seu blog:

O Blog-Health-o-Meter™ indica: Uau.

Números apetitosos

Um Boeing 747-400 transporta 416 passageiros. Este blog foi visitado cerca de 12,000 vezes em 2010. Ou seja, cerca de 29 747s cheios.

?

Em 2010, escreveu 23 novo artigo, aumentando o arquivo total do seu blog para 80 artigos. Fez upload de 2 imagens, ocupando um total de 85kb.

O seu dia mais activo do ano foi 16 de agosto com 110 visitas. O artigo mais popular desse dia foi C#.

De onde vieram?

Os sites que mais tráfego lhe enviaram em 2010 foram social.msdn.microsoft.com, google.com.br, devmedia.com.br, rederia.net e pt-br.wordpress.com

Alguns visitantes vieram dos motores de busca, sobretudo por exemplo de aplicação desktop c# vs 2010, flavia moreira, sites super interessantes, video aula silverlight e reconhecimento de voz c#

Atracções em 2010

Estes são os artigos e páginas mais visitados em 2010.

C# novembro, 2008
3 comentários

Sobre mim agosto, 2008
54 comentários

Sites super interessantes agosto, 2008
3 comentários

Populando Datagrid usando LINQ TO SQL em Silverlight agosto, 2008
16 comentários

WPF E RECONHECIMENTO DE VOZ março, 2009
4 comentários

Nesta vídeo aula vamos começar a aprender a trabalhar com Business application Silverlight e WCF RIA SERVICE.  

Conteúdo:

Introdução ao WCF RIA SERVICE 

Primeira Aplicação em Silverlight Business application 

Ado. Entity Data Model 

Veja..

Abraços

Flávia Moreira