Você está na página 1de 10

Brincando com mapas no

Windows Phone (C#)


POSTADO EM 20/05/2013 POR LUAN G. FAUTH

Ol pessoal, hoje iniciando os posts sobre Windows Phone, vou falar


sobre algo que a alguns dias tive uma certa dificuldade para descobrir
como funcionava, e vou trazer tudo de boa aqui pra ajudar quem
precisar.
Vamos montar um Sample App que ter as opes de voc montar uma
rota do seu local at outro ponto no mapa e tambm um mapa
customizado que colocaremos at mesmo pinpoints customizados para
deixar tudo como o chefe pede!
/*Segue link para pegar o projeto
completo:https://www.dropbox.com/sh/y1lb7zxavavg5xr/AfSR9zWzmS */
Primeiramente, crie um projeto em branco no Visual Studio;
File > New > Project
e crie um projeto Windows Phone App, o mais simples dos templates
disponveis.
Em seguida, crie dois botes no centro da Main Page, tal qual a imagem
abaixo.

Lembre-se de dar nomes aos respectivos botes:


x:Name=bingNativo
x:Name=bingCustomizado
Cada boto tendo seu respectivo nome, na tela visual, onde voc v os
botes, d dois cliques sobre eles para criarmos o evento onClick em
cada um deles. A cada evento criado, ser exibida a pgina .CS, com o

Conde Behind da MainPage.xaml, tal qual como segue print:

Aproveite tambm para criar dentro do seu projeto, um pasta chamada


Pages e dentro desta pasta uma nova pgina Windows Phone
Portrair Page, e nomeie como Mapas que ficar assim:

Tambm necessrio adicionar a referncia a DLL System.Location no


projeto. Faa assim, na janela da Solution Explorer, clique com o
boto direito em References e em seguida Add References, na
janela que abrir, procure pelo boto Browse e em seguida v ao
diretrio C:\Program Files (x86)\Reference
Assemblies\Microsoft\Framework\Silverlight\v4.0\Profile\Window
sPhone71\ e busque pela DLL System.Device.dll.
No conseguiu achar este diretrio ou a DLL?? Ento clique aqui e baixe
o SDK do Windows Phone 7.1 para obt-la!
Agora vamos comear a criar o cdigo que ir ser usado pelo boto Bing
Nativo.Inicie adicionando as referncias as DLLs na pgina MainPage.cs:
using Microsoft.Phone.Net.NetworkInformation;
using System.Device.Location;
Agora dentro do evento bingNativo_Click, crie um IF para
verificarmos se a internet do usurio est ativa:
if (!NetworkInterface.GetIsNetworkAvailable())
MessageBox.Show( *Ative sua rede Wi-Fi ou conecte com a Rede Mvel
para executar esta ao!, Alerta, MessageBoxButton.OK);
Este mtodo verifica se a wi-fi ou rede mvel do aparelho NO EST
ATIVA, caso ela no esteja ativa, mostrr a mensagem de alerta.
Crie uma variavel global do tipo GeoCoordinateWatcher e nome
watcher e em seguida no Else, seguir este cdigo:
else
{
watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.Default)
{

MovementThreshold = 20
};
watcher.PositionChanged += this.watcher_PositionChanged;
watcher.StatusChanged += this.watcher_StatusChanged;
watcher.Start();
}
Este watcher no faz nada mais do que buscar a localizao do
aparelho do usurio utilizando o GPS do seu dispositivo. Neste evento,
passamos as coordenadas que ele nos retorna para podermos dizer ao
bing maps onde o usurio est. Utilizaremos ela mais tarde em outro
evento.
Verifique que
o this.watcher_PositionChanged; e this.watcher_StatusChanged;
se apresentam com erro, antes de se desesperar, clique sobre um
destes, e espere aparecer um pequeno sinal azul logo no incio da
sentena e posicione o mouse sobre o mesmo para que possamos criar o
evento automaticamente.

Voc tambm ver que logo abaixo do evento, foram criados dois
mtodos com o mesmo
nome, watcher_StatusChanged e watcher_PositionChanged.
Agora, coloque esta referncia para podermos continuar:
using Microsoft.Phone.Tasks;
No novo mtodo criado watcher_PositionChanged vamos colocar o
seguinte cdigo:
BingMapsDirectionsTask direcao = new BingMapsDirectionsTask();
direcao.Start = new LabeledMapLocation(Minha
localizao, newGeoCoordinate(watcher.Position.Location.Latitude,
watcher.Position.Location.Longitude));
direcao.End = new LabeledMapLocation(Aeroporto de
Congonhas, newGeoCoordinate(-23.6267, -046.6596));
direcao.Show();
Veja que usamos nossa variavel watcher aqui para podermos passar a
localizao do usurio. No mtodo watcher_StatusChanged disponha
disto:
switch (e.Status)
{

case GeoPositionStatus.Disabled:
MessageBox.Show(No conseguimos realizar a busca com seu GPS,
tente novamente mais tarde., Alerta, MessageBoxButton.OK);
break;
case GeoPositionStatus.NoData:
MessageBox.Show(No conseguimos realizar a busca com seu GPS,
tente novamente mais tarde., Alerta, MessageBoxButton.OK);
break;
}
Rode o App e clique no boto para ver o que acontece!
Se acaso o tracker no conseguir achar o ponto final para lhe mostrar a
rota, por que esquecemos de alterar o ponto de inicio do emulador,
que por padro o estudio F da Microsoft nos Estados Unidos.

Conforme a imagem acima, abra a janela de ferramentas adicionais do


emulador, e v para a aba Location e em seguida posicione um pinpoint
no local que deseja que seja o ponto de partida. Pode ser qualquer local
do Brasil. Aps isso, fecha a janela de Aditional Tools. e teste novamente
o evento.
Com este mtodo, podemos utiliz-lo para realizar uma busca do tipo,
sair de onde estou at um endereo especfico que o usurio informa
atravs de um formulrio onde quer chegar.
Basta ai ento, colocar no local do texto Aeroporto de Congonhas o
endereo que o usurio digitou, e nas coordenadas, deixe 0,0 mesmo
que o tracker encontrar o endereo especificado ou dar uma sugesto
de o que possa ter dito.
(No reproduzirei este exemplo, pois no acho necessrio)
Agora vamos para o mapa customizado este sim interessante!
Na pgina MainPage.cs (Code behind) v ao
evento bingCustomizado_Click e comearemos da mesma forma que o
evento anterior:

if (!NetworkInterface.GetIsNetworkAvailable())
MessageBox.Show( *Ative sua rede Wi-Fi ou conecte com a Rede Mvel
para executar esta ao!, Alerta, MessageBoxButton.OK);
else
NavigationService.Navigate(new Uri(/Pages/Mapa.xaml, UriKind.Relativ
e));
Caso esteja tudo certo no dispositivo do usurio, seremos movidos a
pgina Mapas.xaml que criamos no inicio do Sample.
Agora abra a pgina Mapas.xaml e primeiramente crie uma
referncia para o namespace Microsoft.Phone.Controls.Maps que
ficar assim:
xmlns:my=clrnamespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.C
ontrols.Maps
Feito isto, agora dentro do grid LayoutRoot, crie uma tag my:Map assim:
<Grid x:Name=LayoutRoot Background=Transparent>
<my:Map Mode=AerialWithLabels x:Name=meuMapa Height=Auto
/>
</Grid>
Agora, precisamos novamente adicionar a referncia da
DLL Microsoft.Phone.Controls.Mapsno nosso projeto. Novamente na
janela da Solution Explorer, clique com o boto direito em
References e em seguida Add References, na janela que abrir,
procure pelo boto Browse e em seguida v ao diretrio
C:\Program Files (x86)\Microsoft SDKs\Windows
Phone\v7.1\Libraries\Silverlight\ e busque pela DLL
Microsoft.Phone.Controls.Maps.dll.
Antes de irmos para o Code Behind, precisaremos criar um token de
acesso ao bing maps, voc poder criar uma conta de desenvolvedor e
pedir seu token gratuitamente clicando aqui.
V agora para o code behind da pgina Mapa.
Insira as seguintes referncias antes de tudo:
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;

using System.Windows.Media;
using System.Windows.Media.Imaging;
Crie as seguintes variaveis:
GeoCoordinate coordenadas;
GeoCoordinateWatcher watcher;
private ApplicationBar appbar;
ApplicationBarIconButton btn1, btn2;
bool trava = true;
Abaixo da chamada InitializeComponent(); dentro do construtor da
classe, atribua seu cdigo ao CredentialProvider do nosso mapa o seu
token, atribua um modo de visualizao ao mapa, adicione um evento ao
termino da inicializao da pgina e faa a chamada a um mtodo desta
forma:
meuMapa.CredentialsProvider
= new ApplicationIdCredentialsProvider(Seu token vem aqui);
meuMapa.Mode = new RoadMode();
Loaded += new RoutedEventHandler(MapPage_Loaded);
MeuLocal();
Gere os eventos MeuLocal e MapPage_Loaded:

No mtodo MeuLocal()adicione o seguinte cdigo:


watcher = new GeoCoordinateWatcher(GeoPositionAccuracy.Default)
{
MovementThreshold = 20
};
watcher.PositionChanged += this.watcher_PositionChanged;
watcher.StatusChanged += this.watcher_StatusChanged;
watcher.Start();
Como antes de vir para a pgina Mapas.xaml verificamos se o usurio
tinha internet, no h necessidade de realizar esta verificao
novamente.
Crie os

eventos watcher_PositionChanged e watcher_StatusChanged mais


uma vez tal qual como na MainPage.cs.
watcher_StatusChanged:
switch (e.Status)
{
case GeoPositionStatus.Disabled:
MessageBox.Show(No conseguimos realizar a busca com seu GPS,
tente novamente mais tarde., Alerta, MessageBoxButton.OK);
break;
case GeoPositionStatus.NoData:
MessageBox.Show(No conseguimos realizar a busca com seu GPS,
tente novamente mais tarde., Alerta, MessageBoxButton.OK);
break;
}
watcher_PositionChanged:
coordenadas = e.Position.Location;
Pushpin pusPin = new Pushpin();
pusPin.Background = new SolidColorBrush(Colors.Red);
pusPin.Foreground = new SolidColorBrush(Colors.White);
pusPin.BorderBrush = new SolidColorBrush(Colors.Black);
pusPin.BorderThickness = new Thickness(1);
pusPin.Content = Minha localizao;
pusPin.Name = EuAqui;
pusPin.Location = new GeoCoordinate(coordenadas.Latitude,
coordenadas.Longitude);
meuMapa.SetView(new GeoCoordinate(coordenadas.Latitude,
coordenadas.Longitude, 100), 14);
if (trava)
{
meuMapa.Children.Add(pusPin);
trava = false;
}
Agora, dentro do evento MapPage_Loaded faa uma chamada a
outro mtodo chamado AddPushPins();, gere o mtodo, e vamos
comear a trabalhar com os pushPins que adicionaremos no mapa.
Adicione estas trs imagens ao seu projeto dentro de uma pasta
chamada Imgs.

Como as imagens so arquivos existentes, vez de add > New item


v em add > Existent files ao clicar com o boto direito sobre a
pasta Imgs.
Dentro do mtodo AddPushPins(), adicione este cdigo:
appbar = new ApplicationBar();
appbar.Mode = ApplicationBarMode.Default;
appbar.BackgroundColor = Color.FromArgb(200, 255, 255, 255);
appbar.ForegroundColor = Colors.Black;
appbar.IsVisible = true;
appbar.Opacity = 0.7;
btn1
= new ApplicationBarIconButton(new Uri(/imgs/location.png, UriKind.R
elative)) { Text = Meu local };
btn2 =
new ApplicationBarIconButton(new Uri(/imgs/back.png, UriKind.Relativ
e)) { Text = Voltar };
btn1.Click += new EventHandler(MeuLocal_Click);
btn2.Click += new EventHandler(Voltar_Click);
appbar.Buttons.Add(btn1);
appbar.Buttons.Add(btn2);
this.ApplicationBar = appbar;
Pushpin pushPin = new Pushpin();
pushPin.Style = this.Resources[PushpinStyle] as Style;
pushPin.BorderBrush = new SolidColorBrush(Colors.Black);
pushPin.BorderThickness = new Thickness(1);
pushPin.Foreground = new SolidColorBrush(Colors.Blue);
pushPin.Location

= new GeoCoordinate(watcher.Position.Location.Latitude 0.0200,


watcher.Position.Location.Longitude 0.0200);
Pushpin pushPin2 = new Pushpin();
pushPin2.Style = this.Resources[PushpinStyle] as Style;
pushPin2.BorderBrush = new SolidColorBrush(Colors.Black);
pushPin2.BorderThickness = new Thickness(1);
pushPin2.Foreground = new SolidColorBrush(Colors.Blue);
pushPin2.Location
= new GeoCoordinate(watcher.Position.Location.Latitude 0.0100,
watcher.Position.Location.Longitude 0.0100);
meuMapa.Children.Add(pushPin);
meuMapa.Children.Add(pushPin2);
Feito isso, volte ao Mapas.xaml para adicionarmos a referncia ao
PushpinStyle que damos a propriedade style dos PushPins. Adicione o
seguinte cdigo antes do grid LayoutRoot:
<phone:PhoneApplicationPage.Resources>
<Style TargetType=my:Pushpin x:Key=PushpinStyle>
<Setter Property=Template>
<Setter.Value>
<ControlTemplate TargetType=my:Pushpin>
<Image Source=/Imgs/location.png Stretch=Uniform MaxHeight=8
0/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Agora rode o App novamente e teste!
Resultado esperado:

P.S.: No fiz reviso, so 01:25!! E amanh disponibilizo link para baixar


o cdigo fonte.
About
these
ads
SHARE
THIS:

Twitter

Facebook1

POSTADO EM BINGMAPS CUSTOMIZADO PARA WINDOWS PHONE, BINGMAPS PARA WINDOWS PHONE, WINDOWS
PHONE | MARCADO BING MAPAS, BING WINDOWS PHONE, BINGMAPS,MICROSOFT, MICROSOFT VISUAL
STUDIO, NOKIA, WI-FI, WINDOWS PHONE, WINDOWS PHONE 8