Navigasi Halaman dengan Efek Transisi di Windows Phone

Assalamualakum agan semua,,
karna sudah lumayan lama saya tidak memposting, oleh karena itu kali ini saya ingin kembali memposting tentang Navigasi Halaman dengan Efek Transisi di Windows Phone,

Mungkin sebelumnya saya juga pernah memposting tentang Membuat Navigasi Halaman di Windows Phone, tapi pada postingan kali ini akan sedikit berbeda, karena pada postingan kali ini tidak hanya membuat navigasi halaman saja, tapi juga memberikan efek ketika berpindah halaman agar aplikasi kita terlihat lebih menarik :D. Oke langsung saja

Langkah - langkah Navigasi Halaman dengan Efek Transisi di Windows Phone

1. Buat sebuah projek Windows Phone Apps - Blank App

2.  Seperti pada tutorial sebelumnya kita perlu menambahkan Windows Phone Toolkit pada references project kita dengan cara Klik kanan pada References -> Manage NuGet Packages -> Cari Windows Phone Toolkit -> Klik Install

3. Pada file mainpage.xaml tambahkan 1 button dengan script dibawah ini

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Ke Halaman 1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,130,0,0" Width="456" Click="Button_Click"/>

        </Grid>

4. Pada bagian Inisialisasi di mainpage.xaml.cs tambahkan script dibawah ini

            // anda bisa mengganti SlideTransitionMode sesuai dengan keinginan
            NavigationInTransition navigateInTransition = new NavigationInTransition();
            navigateInTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };
            navigateInTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };

            NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
            navigateOutTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut };
            navigateOutTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut };
            TransitionService.SetNavigationInTransition(this, navigateInTransition);
            TransitionService.SetNavigationOutTransition(this, navigateOutTransition);
Sehingga menjadi

public MainPage()
        {
            InitializeComponent();

            // anda bisa mengganti SlideTransitionMode sesuai dengan keinginan
            NavigationInTransition navigateInTransition = new NavigationInTransition();
            navigateInTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideRightFadeIn };
            navigateInTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideLeftFadeIn };

            NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
            navigateOutTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideRightFadeOut };
            navigateOutTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideRightFadeOut };
            TransitionService.SetNavigationInTransition(this, navigateInTransition);
            TransitionService.SetNavigationOutTransition(this, navigateOutTransition);
        }

5. Pada event button_Click tambahkan script dibawah ini untuk berpindah ke halaman Page1.xaml

NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

6. Buat sebuah halaman baru dengan nama Page1.xaml dengan cara Click kanan pada nama Project - Add - New Item - Windows Phone Portrait Page - beri nama Page1.xaml - OK

7. Tambahkan sebuah button pada file Page1.xaml dengan script dibawah ini

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Ke Halaman 1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,130,0,0" Width="456" Click="Button_Click"/>

        </Grid>

8. Pada bagian Inisialisasi di Page1.xaml.cs tambahkan script dibawah ini

// anda bisa mengganti SlideTransitionMode sesuai dengan keinginan
            NavigationInTransition navigateInTransition = new NavigationInTransition();
            navigateInTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };
            navigateInTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };

            NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
            navigateOutTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut }; 
            navigateOutTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut };
            TransitionService.SetNavigationInTransition(this, navigateInTransition);
            TransitionService.SetNavigationOutTransition(this, navigateOutTransition);

9. Pada event button_Click tambahkan script dibawah ini untuk berpindah ke halaman MainPage.xaml

NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

10. Buka file App.xaml.cs ganti RootFrame = new PhoneApplicationFrame() menjadi RootFrame = new TransitionFrame();

11. Jalankan program tersebut dengan menekan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tetang Navigasi Halaman dengan Efek Transisi di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More

Membuat Context Menu di Wndows Phone

Assalamualakum semuanya,,
pada malam hari ini, untuk mengisi waktu luang saya ingin memposting tentang Membuat Context Menu di Wndows Phone.
Apa itu Context Menu ?
Context Menu adalah menu-menu yang akan muncul ketika kita menekan sebuah tombol atau item pada sebuah list

Langkah - langkah Membuat Context Menu di Wndows Phone.

1. Buat sebuah Windows Phone Project Baru

2.  Seperti pada tutorial sebelumnya kita perlu menambahkan Windows Phone Toolkit pada references project kita dengan cara Klik kanan pada References -> Manage NuGet Packages -> Cari Windows Phone Toolkit -> Klik Install

3. Tambahkan script dibawah ini pada bagian atas file mainpage.xaml

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

4. Tambahkan 1 buat button dan juga ContextMenuService dengan script dibawah ini

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Tutorial Koding" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Context Menu" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="btn" Content="Tampilkan Context Menu" Grid.Row="0" Click="btn_Click" Margin="59,254,42,268">
                <toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu x:Name="MyContextMenu">
                        <toolkit:MenuItem x:Name="menu_tambah" Header="Tambah" Click="menu_tambah_Click" />
                        <toolkit:MenuItem x:Name="menu_hapus" Header="Hapus" Click="menu_hapus_Click" />
                    </toolkit:ContextMenu>
                </toolkit:ContextMenuService.ContextMenu>
            </Button>
        </Grid>

    </Grid>

5. Tambahkan script dibawah ini pada file mainpage.xaml.cs untuk menghandle event ketika tombol tampilkan di klik dan menu-menu lainnya di klik

private void menu_tambah_Click(object sender, RoutedEventArgs e)
        {
// memunculkan pesan ketika context menu tambah ditekan
            MessageBox.Show("Menu Tambah di Tekan");
        }

        private void menu_hapus_Click(object sender, RoutedEventArgs e)
        {
// memunculkan pesan ketika context menu hapus ditekan
            MessageBox.Show("Menu Hapus ditekan");
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
// menampilkan context menu
            MyContextMenu.IsOpen = true;
        }

6. Jalankan program tersebut dengan menekan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Membuat Context Menu di Wndows Phone.

Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More

Menampilkan Lokasi Device di Map Secara Real Time di Windows Phone

Assalamualaikum semua,, Setelah beberapa hari yang lalu saya memposting tentang Menampilkan Lokasi Device di Map di Windows Phone, kali ini saya akan memposting hal yang tidak jauh beda,
Hanya saja pada postingan yang kali ini Lokasi Device yang di tampilkan di map akan secara Real Time, jadi ketika lokasi device berpindah maka Lokasi yang di map juga akan berubah secara langsung sesuai dengan koordinat yang baru. Hal ini biasanya digunakan jika kita ingin membuat sebuah GPS atau yang lainnya.

Langkah - langkah Menampilkan Lokasi Device di Map Secara Real Time di Windows Phone

1. Buat sebuah project Windows Phone App baru

2. Seperti pada tutorial sebelumnya kita perlu menambahkan Windows Phone Toolkit pada references project kita dengan cara Klik kanan pada References -> Manage NuGet Packages -> Cari Windows Phone Toolkit -> Klik Install

3. Buka Capabilities pada file WMAppManifest.xml centang ID_CAP_MAP dan ID_CAP_LOCATION

4. Tambahkan 1 Map, 6 Textblock dan 1 Button atau anda bisa mengcopy script dibawah ini

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Lokasi Real Time" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="50"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,1,12,-1">
            <Button x:Name="btn_start" Content="Mulai Melacak" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,564,0,0" Width="446" Click="btn_start_Click"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Latitude :" VerticalAlignment="Top" Margin="28,497,0,0"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Longitude :" VerticalAlignment="Top" Margin="28,532,0,0" FontSize="20"/>
            <TextBlock x:Name="txt_longitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="158,532,0,0"/>
            <TextBlock x:Name="txt_latitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="158,497,0,0"/>
            <TextBlock x:Name="lbl_status" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="158,465,0,0"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Status :" VerticalAlignment="Top" Margin="27,465,0,0"/>

            <maps:Map x:Name="map" HorizontalAlignment="Left" VerticalAlignment="Top" Height="465" Width="446" ZoomLevel="14">
                <toolkit:MapExtensions.Children>
                    <toolkit:Pushpin x:Name="pushpinlokasi" Content="Posisi Saya"/>
                </toolkit:MapExtensions.Children>
            </maps:Map>
        </Grid>
    </Grid>

5. Tambahkan script dibawah ini pada file .xaml.cs

// Namespace yang diperlukan
using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Microsoft.Phone.Maps.Toolkit;
using Microsoft.Phone.Maps.Controls;

6. Tambahkan script dibawah ini di atas constructor mainpage.xaml.cs

// deklarasi variable
Geolocator geolocator = null;
bool lacak = false;

7. Pada event btn_start_Click Tambahkan script dibawah ini

private void btn_start_Click(object sender, RoutedEventArgs e)
        {
            if (lacak == false)
            {
                geolocator = new Geolocator();
                // menentukan akurasi
                geolocator.DesiredAccuracy = PositionAccuracy.High;
                // jarak perpindahan dalam satuan meter
                geolocator.MovementThreshold = 20;
                
                geolocator.StatusChanged += geolocator_StatusChanged;
                geolocator.PositionChanged += geolocator_PositionChanged;

                lacak = true;
                btn_start.Content = "Berhenti Melacak"; 
            }
            else
            {
                // menghapus event handler
                geolocator.PositionChanged -= geolocator_PositionChanged;
                geolocator.StatusChanged -= geolocator_StatusChanged;
                
                geolocator = null;

                lacak = false;
                btn_start.Content = "Mulai Melacak";
            }
        }

8. Buat event untuk menghandle geolocator_PositionChanged dan geolocator_StatusChanged

        void geolocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
        {
            Dispatcher.BeginInvoke(() =>
            {
                // menampilkan koordinat yang baru
                txt_latitude.Text = args.Position.Coordinate.Latitude.ToString();
                txt_longitude.Text = args.Position.Coordinate.Longitude.ToString();

                // memindahkan pushpin berdasarkan koordinat yang baru
                Pushpin pushpin = (Pushpin)this.FindName("pushpinlokasi");
                pushpin.GeoCoordinate = new System.Device.Location.GeoCoordinate(args.Position.Coordinate.Latitude,args.Position.Coordinate.Longitude);
                map.Center = new System.Device.Location.GeoCoordinate(args.Position.Coordinate.Latitude, args.Position.Coordinate.Longitude);
            });
        }

        void geolocator_StatusChanged(Geolocator sender, StatusChangedEventArgs args)
        {
            string status = "";
   
            switch (args.Status)
            {
                case PositionStatus.Disabled:
                    status = "Lokasi dinonaktifkan pada pengaturan telepon";
                    break;
                case PositionStatus.Initializing:
                    status = "Menginisialisasi";
                    break;
                case PositionStatus.NoData:
                    status = "Gagal mendapatkan lokasi";
                    break;
                case PositionStatus.Ready:
                    status = "Lokasi telah di dapatkan";
                    break;
            }
            // menampilkan status pada label status
            Dispatcher.BeginInvoke(() =>
            {
                lbl_status.Text = status;
            });
        }

9. Jalankan program dengan menekan F5 maka akan seperti gambar dibawah ini

Ketka pertama kali dijalankan

Menemukan lokasi device

Ketika lokasi device berpindah maka pushpin akan ikut berpindah

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Menampilkan Lokasi Device di Map Secara Real Time di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More

Menampilkan Lokasi Device di Map di Windows Phone

Assalamualaikum semua, setelah kemarin saya memposting tentang Menampilkan Map Berdasarkan Latitude dan Longitude.
Pada malam hari ini saya ingin membahas tentang Menampilkan Lokasi Device di Map di Windows Phone, pertama-tama kita perlu mendapatkan koordinat dari device kita, lalu kita menambahkan sebuah pushpin ke map berdasarkan koordinat dari device kita.
oke langsung saja

Langkah  - Langkah Menampilkan Lokasi Device di Map di Windows Phone

1. Buat sebuah Windows Phone App project baru

2. Tambahkan references Windows Phone Toolkit dengan cara klik kanan references > Manage Nuget Packages > cari Windows Phone Toolkit > Install

3. Tambahkan 1 button, 1 map dan 4 textblock, atau anda dapat mengcopykan script dibawah ini ke dalam file .xaml anda

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Tutorial Koding" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Lokasi Device" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <maps:Map x:Name="map" HorizontalAlignment="Left" VerticalAlignment="Top" Height="438" Width="446"/>
            
            <Button x:Name="btn_temukan" Content="Temukan Lokasi Device" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,525,0,0" Width="446" Click="btn_temukan_Click"/>
            <TextBlock x:Name="txt_latitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="133,448,0,0"/>
            <TextBlock x:Name="txt_longitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="133,488,0,0"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Longitude :" VerticalAlignment="Top" Margin="10,488,0,0"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Latitude :" VerticalAlignment="Top" Margin="10,443,0,0"/>

        </Grid>

    </Grid>

 maka tampilannya kan seperti gambar dibawah ini

4. Buka Capabilities pada file WMAppManifest.xml centang ID_CAP_MAP dan ID_CAP_LOCATION

 
5. Import 4 namespace dibawah ini pada file .xaml anda

using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Microsoft.Phone.Maps.Toolkit;
using Microsoft.Phone.Maps.Controls;
using System.Windows.Media;

6. Tambahkan script dibawah ini pada event btn_temukan_Click

        private async void btn_temukan_Click(object sender, RoutedEventArgs e)
        {
            Geolocator geolocator = new Geolocator();
            geolocator.DesiredAccuracyInMeters = 50;

            try
            {

                Geoposition geoposition = await geolocator.GetGeopositionAsync(
                    maximumAge: TimeSpan.FromMinutes(5),
                    timeout: TimeSpan.FromSeconds(10)
                    );


                // Windows Phone 8.1
                //Geoposition position = await geolocator.GetGeopositionAsync();
                //txt_latitude.Text = position.Coordinate.Point.Position.Latitude.ToString();
                //txt_longitude.Text = position.Coordinate.Point.Position.Longitude.ToString();

                double latitude = geoposition.Coordinate.Latitude;
                double longitude = geoposition.Coordinate.Longitude;

                txt_latitude.Text = latitude.ToString();
                txt_longitude.Text = longitude.ToString();

                // menandai map
                Pushpin pushpin = new Pushpin();
                pushpin.Content = "Lokasi Saya";
                pushpin.Background = new SolidColorBrush(Colors.Blue);
                // Menambahkan pushpin ke MapOverlay
                MapOverlay overlay = new MapOverlay();
                overlay.Content = pushpin;
                overlay.GeoCoordinate = new System.Device.Location.GeoCoordinate(latitude, longitude);
                overlay.PositionOrigin = new Point(0, 0.5);

                // menyesuaikan koorinate MapOverlay
                MapLayer layer = new MapLayer();
                layer.Add(overlay);
                // Menambahkan MapLayer ke map
                map.Layers.Add(layer);
                // Mengatur posisi tengah map
                map.Center = new System.Device.Location.GeoCoordinate(latitude, longitude);
                map.ZoomLevel = 14;
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }

5. Jalankan program tersebut dengan menekan F5 lalu tekan tombol Temukan Lokasi Device maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Menampilkan Lokasi Device di Map di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More

Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone

Assalamukum agan semua,,,
untuk mengawali hari pertam di tahun 2015 ini :D, saya ingin memposting tentang Windows Phone lagi, kali ini tentang bagaimana cara Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone,
biaasanya cara ini digunakan jika kita ingin membuat tempat pariwisata ataupun yang lainnya..

Langkah - langkah Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone

1. Buat sebuah Project Windows Phone App baru

2. Tambahkan references Windows Phone Toolkit dengan cara klik kanan references > Manage Nuget Packages > Cari Windows Phone Toolkit > Install

2. Tambahkan 1 map, 2 textbox dan textblock dan buat sebuah application bar

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Tutorial Koding" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Map" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map x:Name="mymap" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Height="404" Width="456"/>
            <TextBlock HorizontalAlignment="Left" Margin="10,429,0,0" TextWrapping="Wrap" Text="Longitude" VerticalAlignment="Top"/>
            <TextBox x:Name="txt_longitude" HorizontalAlignment="Left" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="340" Margin="116,404,0,0"/>
            <TextBlock HorizontalAlignment="Left" Margin="10,486,0,0" TextWrapping="Wrap" Text="Latitude" VerticalAlignment="Top"/>
            <TextBox  x:Name="txt_latitude" HorizontalAlignment="Left" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="340" Margin="116,461,0,0"/>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1" IsMenuEnabled="True" IsVisible="True">
            <shell:ApplicationBarIconButton x:Name="cari" Text="Cari" IconUri="/Assets/AppBar/feature.search.png" Click="cari_Click"/>
            <shell:ApplicationBarIconButton x:Name="zoommore" Text="Zoom In" IconUri="/Assets/AppBar1/add.png" Click="zoommore_Click"/>
            <shell:ApplicationBarIconButton x:Name="zoomless" Text="Zoom Out" IconUri="/Assets/AppBar2/minus.png" Click="zoomless_Click"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

3. Buka Capabilities pada file WMAppManifest.xml centang ID_CAP_MAP

4. Import 4 namespace dibawah ini pada file .xaml anda

using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Microsoft.Phone.Maps.Toolkit;
using Microsoft.Phone.Maps.Controls;
using System.Windows.Media;

5. Pada event cari_Click tambahkan script dibawah ini

private void cari_Click(object sender, EventArgs e)
        {
            // Membuat Pushpin
            Pushpin mypushpin = new Pushpin();
            mypushpin.Content = "Lokasi";

            // Menambahkan pushpin ke MapOverlay
            MapOverlay myoverlay = new MapOverlay();
            myoverlay.Content = mypushpin;
            // menyesuaikan koorinate MapOverlay
            myoverlay.GeoCoordinate = new System.Device.Location.GeoCoordinate(Convert.ToDouble(txt_latitude.Text), Convert.ToDouble(txt_longitude.Text));
            myoverlay.PositionOrigin = new Point(0, 0.5);
            
            // tambahkan MapOverlay ke MapLayer
            MapLayer mylayer = new MapLayer();
            mylayer.Add(myoverlay);

            // Menambahkan MapLayer ke map
            mymap.Layers.Add(mylayer);
            // Mengatur posisi tengah map
            mymap.Center = new System.Device.Location.GeoCoordinate(Convert.ToDouble(txt_latitude.Text), Convert.ToDouble(txt_longitude.Text));
            mymap.ZoomLevel = 14;
        }

6. Pada event zoommore_Click dan zoomless_Click tambahkan script dibawah ini

        private void zoommore_Click(object sender, EventArgs e)
        {
            // memperbesar map
            mymap.ZoomLevel = Math.Min(mymap.ZoomLevel + 1, 20);
        }

        private void zoomless_Click(object sender, EventArgs e)
        {
            // memperkecil map
            mymap.ZoomLevel = Math.Max(mymap.ZoomLevel - 1, 1);
        }

7. Jalankan Aplikasi tersebut dengan menekan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini. . .

Read More