 |
| Go To Download Page |
Merhaba, bu yazımızda Windows Phone 7 cihazımızda (emulator ile) 'Silverlight Bing Map' i incelemeye çalışacağız. Uygulamalarımızda oldukça sık ihtiyaç duyulabilecek harita üzerinde yer göstermek, bu yere raptiye (pushpin) ekleyerek belirtmek ve belirttiğimiz yer üzerine bir not düşmek, belirli bir noktadan, bir diğer noktaya yolun rotasını gösterebilmek gibi konular için bing map bulunmaz bir araç.
Örnek bir uygulama geliştirmeden önce, bir takım ön hazırlıklar yapmamız gerekiyor. İşe Bing Map Sdk'yı bilgisayarımıza kurarak başlayabiliriz. Tabii bu sdk'dan da önce pc'mizde VS 2010 ve phone developer tools'un kurulu olduğunu varsayalım.
Bing Map Silverlight Control SDK'yı buradan indirebilirsiniz. Bing Map'i çok daha yakından, silverlight (xaml ve cs) örnek source kodlarıyla birlikte incelemek isteyenler de buradan (Interactive SDK) erişebilirler.
Bilgisayarımıza map sdk'yı da kurduğumuzu varsaydıktan sonra, şimdi de sıra MS Live acount'umuzu kullanarak bir bing map ID'si almaya geldi. Bunun için microsoft'un Maps Account Center portal adresine gitmemiz gerekiyor. Accout adrese buradan (http://www.bingmapsportal.com/) erişilebilir.
Maps Accout Portal'a gittiğimizde ise karşımıza şöyle bir ekran görüntüsü çıkacaktır;
App.xaml dosyası cs editörümüzü açarak aşağıdaki gibi bing map portal'dan elde ettiğimiz Key'imizi Id adıyla diğer sayfalardan erişilebilecek şekilde tanımlayalım.
public partial class App : Application {
internal const string Id = "
Sdk kurulumundan sonra aşağıdaki resimde de görüleceği gibi pek çok kontrolün eklendiğini göreceğiz.
| MainPage.xaml |
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="Enlem : Boylam" FontSize="26"/> <TextBlock x:Name="PageTitle" Text="Lat. : Long. " FontSize="22" /> StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Microsoft_Phone_Controls_Maps:Map
x:Name="myMap" d:LayoutOverrides="Width, Height" CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" TargetViewChanged="myMap_TargetViewChanged"> <Microsoft_Phone_Controls_Maps:Map.Mode> <Microsoft_Phone_Controls_Maps:AerialMode ShouldDisplayLabels="True" /> Microsoft_Phone_Controls_Maps:Map.Mode>
Microsoft_Phone_Controls_Maps:Map> Grid> Grid>
<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri="/icons/reload_alt1_18x21.png" Text="Change Map Mode" Click="btnChangeMode_Click"/> <shell:ApplicationBarIconButton IconUri="/icons/plus_alt_32x32.png" Text="Zoom In" x:Name="btnZoomIn" Click="btnZoomIn_Click" />
<shell:ApplicationBarIconButton IconUri="/icons/minus_24x6.png" Text="Zoom Out" x:Name="btnZoomOut" Click="btnZoomOut_Click"/> <shell:ApplicationBarIconButton IconUri="/icons/home_24x24.png" Text="Home" x:Name="btnCenter" Click="btnCenter_Click"/> shell:ApplicationBar> phone:PhoneApplicationPage.ApplicationBar> |
Pushpin myPushpin_1 = new Pushpin();
myPushpin_1.Location = new GeoCoordinate(38.3744951212275, 26.8655549034000);
myPushpin_1.Content = "Günlük taze balık alınabilir..";
myPushpin_1.Background = new SolidColorBrush(Colors.Red);
MainPage.cs sınıfımızın son halini de aşağıdaki gibi tamamlayalım.
| C# |
public partial class MainPage : PhoneApplicationPage { private const double DefaultZoomLevel = 17.0; private readonly CredentialsProvider _credentialsProvider = new ApplicationIdCredentialsProvider(App.Id); private static readonly GeoCoordinate DefaultLocation = new GeoCoordinate(38.3744951212275, 26.8655549034000);
public MainPage() { InitializeComponent(); Loaded += MainPage_Loaded; }
private void MainPage_Loaded(object sender, RoutedEventArgs e) {
myMap.CredentialsProvider = _credentialsProvider;
Pushpin myPushpin_1 = new Pushpin(); myPushpin_1.Location = new GeoCoordinate(38.3744951212275, 26.8655549034000); myPushpin_1.Content = "Günlük taze balık alınabilir.."; myPushpin_1.Background = new SolidColorBrush(Colors.Red);
myMap.Children.Add(myPushpin_1);
myMap.Center = DefaultLocation; myMap.ZoomLevel = DefaultZoomLevel;
}
private void changeMapMode() { if (myMap.Mode is AerialMode) { myMap.Mode = new RoadMode(); } else { myMap.Mode = new AerialMode(true); } }
private void btnChangeMode_Click(object sender, EventArgs e) { changeMapMode(); }
private void btnZoomIn_Click(object sender, EventArgs e) { myMap.ZoomLevel = myMap.ZoomLevel + 1; }
private void btnZoomOut_Click(object sender, EventArgs e) { myMap.ZoomLevel = myMap.ZoomLevel - 1; }
private void btnCenter_Click(object sender, EventArgs e) { myMap.Center = DefaultLocation; myMap.ZoomLevel = DefaultZoomLevel; }
private void myMap_TargetViewChanged(object sender, MapEventArgs e) { // Enlem ve Boylam PageTitle.Text = string.Format("{0} : {1}", myMap.Mode.TargetCenter.Latitude, myMap.Mode.TargetCenter.Longitude); } } |
ZoomIn, ZoomOut, Map Mode ve Map Center özellikleri için Application Bar icon butonlarından faydalanabiliriz. Her bir icon button için o özelliğe uygun iconlar set ediyoruz.
F5 ile projemizi çalıştırarak emulatör ile haritamız üzerinde gezebiliriz. Map.Center özelliğini kullandığımız için haritamız ilk açılışında enlem ve boylam coordinatlarını verdiğimiz yere konumlanacaktır.
Haritamız üzerinde gezerken enlem ve boylam koordinat bilgilerini de aynı anda görebilmek haritamızın TargetViewChanged event'ını kullandık ve bu değerleri ekranımızın üst kısmındaki textblock'larına yazdırmış olduk.
private void myMap_TargetViewChanged(object sender, MapEventArgs e) {
// Enlem ve Boylam
PageTitle.Text = string.Format("{0} : {1}", myMap.Mode.TargetCenter.Latitude, myMap.Mode.TargetCenter.Longitude);
}
Haritamız üzerinde yapabileceklerimiz tabiki bunlarla sınırlı değil, örneğin aramak istediğimiz bir yeri adına göre arayabilir veya iki nokta arasındaki yolu (ya da rotayı) da haritamız üzerinde gösterebiliriz.
Yer arama ya da rota belirtme gibi işlemler için Bing Map'in SOAP servislerini kullanabiliriz. Bu servislerin erişim adresleri aşağıdaki gibidir. Projemiz'e service referans olarak ekledikten sonra kullanıma hazır durumda olacaktır.
http://dev.virtualearth.net/webservices/v1/geocodeservice/GeocodeService.svc
http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc
http://dev.virtualearth.net/webservices/v1/searchservice/searchservice.svc
 |
<configuration>
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding name="BasicHttpBinding_IGeocodeService" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="None" />
binding>
<binding name="BasicHttpBinding_IRouteService" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="None" />
binding>
<binding name="BasicHttpBinding_ISearchService" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="None" />
binding>
basicHttpBinding>
bindings>
<client>
<endpoint address="http://dev.virtualearth.net/webservices/v1/geocodeservice/GeocodeService.svc"
binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IGeocodeService"
contract="service.geocode.IGeocodeService" name="BasicHttpBinding_IGeocodeService" />
<endpoint address="http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc"
binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IRouteService"
contract="service.route.IRouteService" name="BasicHttpBinding_IRouteService" />
<endpoint address="http://dev.virtualearth.net/webservices/v1/searchservice/searchservice.svc"
binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_ISearchService"
contract="service.search.ISearchService" name="BasicHttpBinding_ISearchService" />
client>
system.serviceModel>
configuration>
Yukarıdaki gibi servislerimizi ekledikten sonra, örneğin iki nokta arasındaki yolu (rotayı) gösterebilmek için öncelikle GeocodeService'i kullanıp GeocodeResult nesnesini result olarak elde ettikten sonra (GeocodeResult içerisinde bulunan iki yere ait location (coordinat) bilgileri yer alacaktır) RouteService ile bu noktaların oluşturduğu rotaya harita üzerinde konumlanlanılacaktır. RouteServis çağrısı sonucunda RouteResponce nesnesi olarak geri dönecek ve RouteResponce.RoutePath içerisinde iki nokta arasındaki yolu oluşturan noktalar yer alacaktır. Noktalar elimize geçtikten sonra, bu noktalar ile MapPolyLine kontrolünü oluşturabiliriz. Oluşturduğumuz MapPolyLine kontrolünüde Map kontrolü içine ekleyerek, rotamızı harita üzerinde gösterebileceğiz.
Tabii bu servisleri de kullanabilek için Bing Map Portal'dan aldığımız Key'imizi servis request nesnelerinin, credential'ına set etmemiz gerekmektedir.
Silverlight Bing Map'in Search, Route v.s. gibi özelliklere ait tüm source code'larına aşağıdaki adresden ulaşılabileceğini bir kere daha hatırlatarak makalemizi burada sonlandıralım.( http://www.microsoft.com/maps/isdk/silverlight/#MapControlInteractiveSdk.Tutorials.Services.Route )
| Yerleşim Türü (SIP Layout) | Enum | Açıklama |
| Default | Default | Standart olarak açılan QWERTY klavye |
| Text | Text | Standart text bilgi giriş alanları için otomatik doğrulama desteği. |
| Web | URL | Kullanıcının Url girişleri yaptığı durumlarda |
| E-Mail Address | EMailSmtpAddress | E-Posta girişleri için |
| E-Mail name or Address | EMailNameOrAddress | E-Posta veya Adres girişlerinde |
| Maps | Maps | Harita üzerinden arama yapılırken kullanılır |
| Phone Number | TelephoneNumber | Telefon girişleri için |
| Search | Search | Bir kriter ile arama yapılırken |
| SMS contact | NameOrPhoneNumber | Kullanıcı SMS alanında iken kullanılır. |
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,20,0,0" Name="txt" Text="" VerticalAlignment="Top" Width="438" />
<RadioButton Content="Default" Height="72"
HorizontalAlignment="Left" Margin="25,98,0,0"
Name="radioButton1" VerticalAlignment="Top"
Width="377" GroupName="group1"
IsChecked="True" Checked="setDefaultSIP"/>
<RadioButton Content="EMail" Height="72"
HorizontalAlignment="Left" Margin="25,176,0,0"
Name="radioButton2" VerticalAlignment="Top"
GroupName="group1" Checked="setEmailSIP" />
<RadioButton Content="Web URL Address" Height="72"
HorizontalAlignment="Left" Margin="25,254,0,0"
Name="radioButton3" VerticalAlignment="Top"
GroupName="group1" Checked="setURLAddressSIP" />
<RadioButton Content="Phone Number" Height="72"
HorizontalAlignment="Left" Margin="25,332,0,0"
Name="radioButton4" VerticalAlignment="Top"
GroupName="group1" Checked="setPhoneNumberSIP" />
Grid>
private void setSIPType(InputScopeNameValue inputScopeNameValue) {
if (txt != null) {
InputScope inputScope = new InputScope();
InputScopeName inputScopeName = new InputScopeName();
inputScopeName.NameValue = inputScopeNameValue;
inputScope.Names.Add(inputScopeName);
txt.InputScope = inputScope;
}
}
Ana Ekranımıza eklediğimiz radio butonlarımızın Checked event'ları altına da aşağıdaki C# kod satırlarımızı ekleyelim.
C#private void setDefaultSIP(object sender, RoutedEventArgs e) {
setSIPType(InputScopeNameValue.Default);
}
private void setEmailSIP(object sender, RoutedEventArgs e) {
setSIPType(InputScopeNameValue.EmailNameOrAddress);
}
private void setURLAddressSIP(object sender, RoutedEventArgs e) {
setSIPType(InputScopeNameValue.Url);
}
private void setPhoneNumberSIP(object sender, RoutedEventArgs e) {
setSIPType(InputScopeNameValue.TelephoneNumber);
}
Event'larımızın altında setSIPType methodumuzu da çağırdıktan sonra F5 ile uygulamamızı çalıştırarak sonuçları görelim.
Veri giriş alanlarımızdaki ihtiyacımıza göre ilgili SIP türünü kolaylıkla belirlememiz mümkün.Örneğin bir Url adresini kullanıcıya girdirmek için kullanıcıyı yormadan '.com' butonuyla eriştirebiliyoruz, kullanıcı bu noktadan sonra ilgili uzantıya '.com' a basılı tutarak ya da direk .com'u tuşlayarak da erişiebilecektir. Eğer '.com' a basılı tuttulursa da diğer yaygın olan uzantılara (.org, .edu, .net) erişmemiz mümkün olacak. Örnek olarak yalnızca 4 farklı SIP
'VS 2010 / File / New Project / Silverlight For Windows Phone / Windows Phone Application' projesi ekleyerek örneğimizi hazırlamaya başlayalım.
| XAML |
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Panaroma and Pivot Control Main Page" Margin="10" FontSize="24"/>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button x:Name="btnPanaroma" Content="Panaroma Control" Height="72"HorizontalAlignment="Left" Margin="62,74,0,0" VerticalAlignment="Top" Width="321" Click="btnPanaroma_Click" /> <Button x:Name="btnPivot" Content="Pivot Control" Height="72" HorizontalAlignment="Left" Margin="62,150,0,0" VerticalAlignment="Top" Width="321" Click="btnPivot_Click" /> Grid> Grid> C# private void btnPanaroma_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative)); }
private void btnPivot_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative)); } |
Eklediğimiz windows phone projesi üzerine sağ tıklayarak, projemize Panorama ve Pivot kontrollerimizi ekleyelim. 'Proje Sağ Click / Add New Item / Windows Phone Panorama Page'.
Panorama Control
<Grid x:Name="LayoutRoot">
<controls:Panorama Title="Balçova'dan İzmir Manzarası" FontSize="16">
<controls:Panorama.Background>
<ImageBrush ImageSource="/PanaromaAndPivotApp;component/Images/izmir_balcova_tarafindan.png" />
controls:Panorama.Background>
<controls:PanoramaItem Header="Özet Bilgi" Orientation="Horizontal">
<Grid>
<StackPanel>
<TextBlock Text="Balçova doğa yürüyüşü." FontSize="22"/>
<TextBlock Text=" "/>
<TextBlock Text="Toplam Uzunluk 20 km, Toplam Zaman 7 saat" FontSize="22" TextWrapping="Wrap"/>
StackPanel>
Grid>
controls:PanoramaItem>
<controls:PanoramaItem Header="Getirilmesi Gerekenler" FontSize="14" Orientation="Horizontal">
<Grid>
<StackPanel>
<TextBlock Text="1- Sırtta taşınabilir bir çanta" FontSize="22"/>
<TextBlock Text="2- Ağzı vidalı Su Taşıma Kabı" FontSize="22"/>
<TextBlock Text="3- Kuru Üzüm – Kayısı ve/veya çikolata" FontSize="22"/>
<TextBlock Text="4- Ana Mola için hafif yiyecekler" FontSize="22"/>
<TextBlock Text="5- Taşta Sucuk Molası için 1 kangal sucuk/" FontSize="22"/>
StackPanel>
Grid>
controls:PanoramaItem>
<controls:PanoramaItem Header="KURALLAR:" FontSize="14" Orientation="Horizontal">
<Grid>
<StackPanel>
<TextBlock Text="Bu etkinlik her türlü hava koşulunda gerçekleştirilecektir." FontSize="18"/>
<TextBlock Text="Yürüyüşe katılan her bir kişi rehberin talimatlarına uymak zorundadır." FontSize="18"/>
<TextBlock Text="Yürüyüşe katılan kişiler rehberi geçmemelidir." FontSize="18"/>
<TextBlock Text="Yürüyüşçü yürüyüşün bir yarış olmadığını daima hatırlamalıdır." FontSize="18"/>
<TextBlock Text="" FontSize="22"/>
StackPanel>
Grid>
controls:PanoramaItem>
controls:Panorama>
Grid>
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot Title="KİTAPÇI">
<controls:PivotItem Header="Kitap Özeti">
<Grid>
<StackPanel Margin="10">
<TextBlock Text="Adı"/>
<TextBlock Text=" "/>
<TextBlock Text="Microsoft Mobile Development Handbook" TextWrapping="Wrap" />
<TextBlock Text=" "/>
<TextBlock Text="Özet"/>
<TextBlock Text="This Book is for new and existing mobile application developers who already have some experience developning applications using the .Net Framework" TextWrapping="Wrap" />
StackPanel>
Grid>
controls:PivotItem>
<controls:PivotItem Header="Yazar">
<Grid>
<StackPanel Margin="10">
<TextBlock Text="YAZARI"/>
<TextBlock Text=" "/>
<TextBlock Text="Andy Wigley"/>
<TextBlock Text="Daniel Moth"/>
<TextBlock Text="Peter Foot"/>
StackPanel>
Grid>
controls:PivotItem>
<controls:PivotItem Header="Detaylar">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
Grid.RowDefinitions>
<Image Grid.Row="0" Margin="10" Source="/PanaromaAndPivotApp;component/Images/kitap_kapagi.png" />
<TextBlock Text="PUBLISHED BY Microsoft Press A Division Of Ms Corporation Redmond, Washington... " Grid.Row="1" Margin="10" TextWrapping="Wrap" />
Grid>
controls:PivotItem>
controls:Pivot>
Grid>
Xaml kodlarımızı da tamamladıktan sonra ana sayfadaki Pivot Control butonuna tıkladığımız aşağıdaki gibi pivot kontrolleri ve item'larımızı göreceğiz.
