Tutorial Koding

Windows 10 Universal App : Navigasi Halaman

Selamat pagi agan & sista semua, pada kali ini saya akan share masih seputar <a href="http://www.tutorialkoding.id/search/label/Windows%2010%20Universal%20App">Windows 10 Universal App</a>, jika sebelumnya saya sudah share tentang <a href="http://www.tutorialkoding.id/2016/02/windows-10-universal-app-hello-world.html">Hello World</a>, sekarang saya akan membahas bagaimana cara navigasi antar halaman pada <a href="http://www.tutorialkoding.id/search/label/Windows%2010%20Universal%20App">Windows 10 Universal App</a> ini.<br />
<br />
Navigasi adalah bagian penting dari sebuah aplikasi, dalam membuat aplikasi kecil mungkin anda dapat menggunakan hanya satu halaman saja sudah cukup, namun ada kalanya juga kita perlu beberapa halaman, jadi untuk aplikasi yang memiliki halaman lebih dari 1, anda harus membuat navigasi antar halaman ini.<br />
<br />
Oke langsung saja<br />
<ol>
<li>Buka visual studio anda, klik New Project<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyJO29l3W0kyFmPzG1QSV1JJqDByHAQIrvCRMGgqiN5BMS698QGGD8lwqfdgxbg4R7FWvUAIJgho1rlRUWz7JnDHCK_o7Mu5qB-UkZesFn212m1ZZTDsSDifLxBROEoW5R9hdac0Lzars/s1600/Screenshot_2.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyJO29l3W0kyFmPzG1QSV1JJqDByHAQIrvCRMGgqiN5BMS698QGGD8lwqfdgxbg4R7FWvUAIJgho1rlRUWz7JnDHCK_o7Mu5qB-UkZesFn212m1ZZTDsSDifLxBROEoW5R9hdac0Lzars/s320/Screenshot_2.png" title="Windows 10 Universal App : Navigasi Halaman" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Membuat Project Baru</td></tr>
</tbody></table>
</li>
<li>Pilih Universal -> Blank App<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyJO29l3W0kyFmPzG1QSV1JJqDByHAQIrvCRMGgqiN5BMS698QGGD8lwqfdgxbg4R7FWvUAIJgho1rlRUWz7JnDHCK_o7Mu5qB-UkZesFn212m1ZZTDsSDifLxBROEoW5R9hdac0Lzars/s1600/Screenshot_2.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyJO29l3W0kyFmPzG1QSV1JJqDByHAQIrvCRMGgqiN5BMS698QGGD8lwqfdgxbg4R7FWvUAIJgho1rlRUWz7JnDHCK_o7Mu5qB-UkZesFn212m1ZZTDsSDifLxBROEoW5R9hdac0Lzars/s320/Screenshot_2.png" title="Windows 10 Universal App : Navigasi Halaman" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Blank App</td></tr>
</tbody></table>
</li>
<li>Desain halaman mainpage.xaml seperti gambar dibawah ini<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhu2cXb7hR9zFl9BR-TApflamWHtmcqflNd3qFJencdC2O9CmLn5xXvEe_zdA4Zyzyu0VrdxGiJQNFjrshUgpauG5VuOH3m2KAVlqrvQBl25bCe38RrbEE5Pq4HXu79BZx8Q9dwZsH0ES/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhu2cXb7hR9zFl9BR-TApflamWHtmcqflNd3qFJencdC2O9CmLn5xXvEe_zdA4Zyzyu0VrdxGiJQNFjrshUgpauG5VuOH3m2KAVlqrvQBl25bCe38RrbEE5Pq4HXu79BZx8Q9dwZsH0ES/s1600/Screenshot_1.png" title="Windows 10 Universal App : Navigasi Halaman" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan MainPage.xaml</td></tr>
</tbody></table>
atau bisa juga menggunakan script dibawah ini<br />
<pre class="brush:html"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Halaman Utama" HorizontalAlignment="Center" FontSize="30" VerticalAlignment="Center"/>
        <Button Grid.Row="1" HorizontalAlignment="Center" Name="btn_page2" Content="Ke Halaman 2" Click="btn_page2_Click"/>
    </Grid></pre>
</li>
<li>Buat halaman baru dengan cara klik menu Project -> Blank Page beri nama halmaan_2.xaml<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDfsd5_0WNHQ4NqgcaDd-q9JFJEfI-tQb4AI4A9swhrN9YUg_vsTnUZz6V3fVumJ35SH6D-4n9QXBtQHf5G2DDO6i_yUkM5q0Dp3sKtoPRe3rQtnfNZxjRhDmRdGPyIxzd3Py2MDU42hut/s1600/Screenshot_2.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDfsd5_0WNHQ4NqgcaDd-q9JFJEfI-tQb4AI4A9swhrN9YUg_vsTnUZz6V3fVumJ35SH6D-4n9QXBtQHf5G2DDO6i_yUkM5q0Dp3sKtoPRe3rQtnfNZxjRhDmRdGPyIxzd3Py2MDU42hut/s320/Screenshot_2.png" title="Windows 10 Universal App : Navigasi Halaman" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Blank Page</td></tr>
</tbody></table>
</li>
<li>Desain halaman halaman_2.xaml seperti gambar dibawah ini<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nupsRbbbsensGcsgOlSVIH8izwMzYmBjXjo5p8HukWZIHSI0ZDG0svQxTaf2uvCbyy_8CBHRWArKgJ0VF3L2dODIQtsK65c1y-lLkkKMCEts6g6UPF5XdWNBEvRzExo0YFxKQTw75NoP/s1600/Screenshot_3.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nupsRbbbsensGcsgOlSVIH8izwMzYmBjXjo5p8HukWZIHSI0ZDG0svQxTaf2uvCbyy_8CBHRWArKgJ0VF3L2dODIQtsK65c1y-lLkkKMCEts6g6UPF5XdWNBEvRzExo0YFxKQTw75NoP/s1600/Screenshot_3.png" title="Windows 10 Universal App : Navigasi Halaman" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">halaman_2.xaml</td></tr>
</tbody></table>
atau bisa juga menggunakan script dibawah ini<br />
<pre class="brush:html"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Halaman Kedua" HorizontalAlignment="Center" FontSize="30" VerticalAlignment="Center"/>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="Website : " FontSize="20"/>
            <TextBlock Name="txt_nama"  FontSize="20" Margin="5,0,0,0"/>
        </StackPanel>
    </Grid></pre>
</li>
<li>Kembali ke mainpage.xaml tambahkah event click dan tambahkan script dibawah ini<br />
<pre class="brush:html">private void btn_page2_Click(object sender, RoutedEventArgs e)
        {
            // untuk navigasi ke halaman_2.xaml, serta mengirimkan parameter string yang 
            //berisi www.tutorialkoding.id
            Frame.Navigate(typeof(halaman_2), "www.tutorialkoding.id");
        }</pre>
</li>
<li>Buka file halmaan_2.xaml.cs tambahkan script dibawah ini untuk override fungsi OnNavigatedTo, event ini berguna untuk menghandle event ketika halaman active<br />
<pre class="brush:html">protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            // manampilkan parameter yang dikirim dari MainPage ke txt_nama
            txt_nama.Text = e.Parameter as string;
        }

</pre>
</li>
<li>Pada bagian construct halaman_2 tambahkan script dibawah ini guna membuat animasi ketika halaman berganti<br />
<pre class="brush:html">        private void SetUpPageAnimation()
        {
            TransitionCollection collection = new TransitionCollection();
            NavigationThemeTransition theme = new NavigationThemeTransition();

var info = new ContinuumNavigationTransitionInfo();

theme.DefaultNavigationTransitionInfo = info;
            collection.Add(theme);
            this.Transitions = collection;
        }

public halaman_2()
        {
            this.InitializeComponent();
            SetUpPageAnimation();
        }</pre>
<br />
</li>
<li>Jalankan program dengan memilih target ke local machine, emulator atau device<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNUmIOdey21fjfBWYi7WxdbVwXsjUuy7ZUMgdzHTC05eS9cIytJTMfPHQVuHIRoVtkaBhTHntW5kH05f_NnDeUsigwe2Dbv-ibu1pHsPjhX1Dyl0w5myuLmvetMj7dOSItAPQdZa8NmQ3/s1600/Screenshot_9.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNUmIOdey21fjfBWYi7WxdbVwXsjUuy7ZUMgdzHTC05eS9cIytJTMfPHQVuHIRoVtkaBhTHntW5kH05f_NnDeUsigwe2Dbv-ibu1pHsPjhX1Dyl0w5myuLmvetMj7dOSItAPQdZa8NmQ3/s320/Screenshot_9.png" title="Windows 10 Universal App : Navigasi Halaman" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menjalankan Program</td></tr>
</tbody></table>
<pre class="brush:html"></pre>
</li>
<li>Berikut adalah beberapa gambar hasil dari program yang telah dibuat<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxlqLCkGTV10RCeOv3PNKtjNoEG8KDoiJcJI-KCM_E9Ohtg8YJYh5DkK7Eu6bJGoKxSpYceduselWdihQ7jaMmxhkZuuOjjnVjNbgE6xLVuPiCbIF3_2qe0dhU7ytTszpC3QpJuTSLHzs/s1600/Screenshot_5.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxlqLCkGTV10RCeOv3PNKtjNoEG8KDoiJcJI-KCM_E9Ohtg8YJYh5DkK7Eu6bJGoKxSpYceduselWdihQ7jaMmxhkZuuOjjnVjNbgE6xLVuPiCbIF3_2qe0dhU7ytTszpC3QpJuTSLHzs/s320/Screenshot_5.png" title="Windows 10 Universal App : Navigasi Halaman" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Halaman Utama</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxh2pke-s9PTy02P7HjFPS81gYa0FvGQC1QH_XYl89FGn-aVRgnxkFKhD8EuiO0Mln5AtRjkFxg-Nna1YwaqvvifvY1NnVBbxohyphenhyphenxKFl32-8V-XoVVKp88Kwj3J8Qs1VPJCMgDjknfUeN/s1600/Screenshot_6.png" imageanchor="1" style="text-align: center;"><img alt="Windows 10 Universal App : Navigasi Halaman" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxh2pke-s9PTy02P7HjFPS81gYa0FvGQC1QH_XYl89FGn-aVRgnxkFKhD8EuiO0Mln5AtRjkFxg-Nna1YwaqvvifvY1NnVBbxohyphenhyphenxKFl32-8V-XoVVKp88Kwj3J8Qs1VPJCMgDjknfUeN/s320/Screenshot_6.png" title="Windows 10 Universal App : Navigasi Halaman" width="320" /></a></div>
</li>
</ol>
<div>
<blockquote class="tr_bq">
Source Code : <a href="https://github.com/shlappdev/UWP_Page_Navigation">https://github.com/shlappdev/UWP_Page_Navigation</a></blockquote>
Bagimana? menarik bukan ? saya akan membuat lagi tutorial yang lebih menarik dari ini :D tetap kunjungi blog ini ya :D<br />
<br />
Jika ada yang ingin ditanyakan silahkan tanya melalui komentar dibawah ini. dan juga ada kritik atau saran juga bisa di tambahkan melalui komentar atau melalui email, saya terima kasih telah berkunjung </div>

Windows 10 Universal App : Navigasi Halaman

Selamat pagi agan & sista semua, pada kali ini saya akan share masih seputar Windows 10 Universal App , jika sebelumnya saya sudah share...

Wednesday, February 24, 2016

Windows 10 Universal App : Hello World

Selamat malam agan dan sista semua, sudah lama sekali saya tidak memposting :D<br />
malam kali ini saya akan memposting hal baru yang belum pernah saya posting sebelumnya<br />
yaitu tentang Windows 10 Universal App (UWP)<br />
<br />
Apa itu Windows 10 Universal App ?<br />
Windows 10 Universal App adalah aplikasi yang bisa berjalan di berbagai perangkat berbasis windows 10 tersebut. universal app didukung oleh berbagai sarana yang memungkinkan aplikasi menyesuaikan diri di berbagai perangkat. antara lan: tampil antar-muka (Interface) yang bisa disesuaikan (Adaptive user interrace), beragam input pengguna (keyboard, mouse dll) satu SDK, satu bursa dan satu developer center.<br />
<br />
Tools yang diperlukan.<br />
Tools yang diperlukan untuk membuat Windows 10 Universal App adalah<br />
<br />
<ol>
<li>Visual Studio 2015 </li>
<li>Windows 10 SDK</li>
<li>Windows 10 Emulator (Opsional karena bisa langsung menggunakan smartphone and<br />
</li>
</ol>
Untuk lebih lengkapnya silahkan kunjungi link ini <a href="https://dev.windows.com/en-us/downloads">https://dev.windows.com/en-us/downloads</a> . Jiika semua yang sudah diperlukan sudah didownload dan diinstall. sekarang saatnya untuk memulai membuat aplikasi<br />
<ol>
<li>Buka Visual Studio yang sudah terinstall masuk menu File -> New -> Project<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYREiBJZhTc-5RFhDWv8cv8IpngknVH7asepMxN7yM4ooNmQZYoqriM4KmAqJHnSzgtByGiYU8VYdieyreNUVf5IrYobpT0httQ79l-cg_wc-f39vqN2Mwmo7pSGxqo7C-qg8kp4WiBzw/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYREiBJZhTc-5RFhDWv8cv8IpngknVH7asepMxN7yM4ooNmQZYoqriM4KmAqJHnSzgtByGiYU8VYdieyreNUVf5IrYobpT0httQ79l-cg_wc-f39vqN2Mwmo7pSGxqo7C-qg8kp4WiBzw/s320/Screenshot_1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li>Pilih Visual C# -> Universal -> Blank App (Universal Wndows) serta ketikan juga nama projectnya, klik tombol OK<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aYBj6M8hvPBKfKmxD2zL_x0To7YFhzcX1UWn2UlkkH3ipg8sa4lMCzr1ebXTLFMEim0eb0Doir0sckM_XrArU29z8Kng9gK10G_LHAf74XafLza7bLcobOZWRFwdLpj_XWFEbVDFOTvI/s1600/Screenshot_2.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aYBj6M8hvPBKfKmxD2zL_x0To7YFhzcX1UWn2UlkkH3ipg8sa4lMCzr1ebXTLFMEim0eb0Doir0sckM_XrArU29z8Kng9gK10G_LHAf74XafLza7bLcobOZWRFwdLpj_XWFEbVDFOTvI/s320/Screenshot_2.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li>Buka file MainPage.xaml, lalu desain form seperti gambar dibawah ini<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQNF4MvH5SaaJH43BZQobRwnTE9zJmfY0CWsob4bqhpZ0NN5F8p63gqP_6ka6GkLXnNlmqKxw0vbe7YflZ4g-gGGGC0qreJAQeuOJIIGFgH4jF3dWVvk3NSSCJywQOqHBK1g3hmaFuUft/s1600/Screenshot_4.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQNF4MvH5SaaJH43BZQobRwnTE9zJmfY0CWsob4bqhpZ0NN5F8p63gqP_6ka6GkLXnNlmqKxw0vbe7YflZ4g-gGGGC0qreJAQeuOJIIGFgH4jF3dWVvk3NSSCJywQOqHBK1g3hmaFuUft/s320/Screenshot_4.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />Atau bisa bisa juga ketikan script dibawah ini<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLc8SxenelJ_CgUs44HGCiR_2Mhtai0ihveulpX17PkEBZmtC4TM4DqgEBbmRq5v_zEqY6VMiW5pUc0Y0IBCDgCLOsPgX4dw2Ex1fR2egh02JipPkQm34PKemmlKKN0x4_6SRsqfwbKFNO/s1600/Screenshot_5.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLc8SxenelJ_CgUs44HGCiR_2Mhtai0ihveulpX17PkEBZmtC4TM4DqgEBbmRq5v_zEqY6VMiW5pUc0Y0IBCDgCLOsPgX4dw2Ex1fR2egh02JipPkQm34PKemmlKKN0x4_6SRsqfwbKFNO/s320/Screenshot_5.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li>Klik tombol Hello pilih pada bagian Event pada bagian Properties klik 2 kali pada kolom Click<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUgTkAxrzK1atrldPquA4MKYl-6JELrzt2i_MOG-BofSthdlRPWXIHwfw0raTdcvbT_vVOlHWn335vEPWJLIyCHfYpeI1TGL3z0sz_qL4zofz26hmx2lktqRza0aXDzz7KFp4qEZykRigB/s1600/Screenshot_6.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUgTkAxrzK1atrldPquA4MKYl-6JELrzt2i_MOG-BofSthdlRPWXIHwfw0raTdcvbT_vVOlHWn335vEPWJLIyCHfYpeI1TGL3z0sz_qL4zofz26hmx2lktqRza0aXDzz7KFp4qEZykRigB/s320/Screenshot_6.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li> Ketikan script dibawah ini<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiItfRQjJS20QCb1xQUWlhSIEEmlFVqr5r-TbS7Y3NFQiBrEy_gR3sceyroVO7AwAPNK3XzlzSN2Fa9k4RLe2jNWYqgBtlm5kAgd3lAL0Dp0z6JtOdpDh0qRIJ3f1GiWRVQcukTIBnTfUEj/s1600/Screenshot_8.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiItfRQjJS20QCb1xQUWlhSIEEmlFVqr5r-TbS7Y3NFQiBrEy_gR3sceyroVO7AwAPNK3XzlzSN2Fa9k4RLe2jNWYqgBtlm5kAgd3lAL0Dp0z6JtOdpDh0qRIJ3f1GiWRVQcukTIBnTfUEj/s320/Screenshot_8.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li>Jika terjadi error tambahkan script dibawah ini pada bagian header,<br />namespace Windows.UI.Popups berguna ketika kita menggunakan class MessageDialog<br />untuk lebih detailnya silahkan klik link berikut <a href="https://msdn.microsoft.com/en-us/library/windows/apps/br230602.aspx">https://msdn.microsoft.com/en-us/library/windows/apps/br230602.aspx</a><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3N6mhhBxHr7CTBfXT8CzOsITzgee8EM6TbT8qaL2bBIPV_YZt8FqAX_CiDoxuIa396-6aj_v9JwUTaUPmpc5uLZk7T83jbGZb6wnz7kwR4nbiuHW7q30A7RCv1ZET7C9k5aOmM1rDdCR/s1600/Screenshot_7.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3N6mhhBxHr7CTBfXT8CzOsITzgee8EM6TbT8qaL2bBIPV_YZt8FqAX_CiDoxuIa396-6aj_v9JwUTaUPmpc5uLZk7T83jbGZb6wnz7kwR4nbiuHW7q30A7RCv1ZET7C9k5aOmM1rDdCR/s1600/Screenshot_7.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li>Jika sudah silahkan jalankan program tersebut dengan cara memilih target Devicenya apakah akan menggunakan Emulator atau menggunakan Local Machine<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7BFku48mDxz2kCrP9HzwGdmfcFEAGMXpup2lPnEdkK0ZOJ5OGPsz_Y8whAsC7EPKDS29NgozZ5jKPOJ7jjhDj4uhF1x4GV_GnbKFuroxqNNUVB6K3jFAdpI06wAa4XQm-i9GklPghL5p/s1600/Screenshot_9.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk7BFku48mDxz2kCrP9HzwGdmfcFEAGMXpup2lPnEdkK0ZOJ5OGPsz_Y8whAsC7EPKDS29NgozZ5jKPOJ7jjhDj4uhF1x4GV_GnbKFuroxqNNUVB6K3jFAdpI06wAa4XQm-i9GklPghL5p/s320/Screenshot_9.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</li>
<li>Gambar dibawah ini adalah hasil dari program yang telah dibuat<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2HbmnTvPStyS8M7eBzS2FDQSMaG59w2LRbsJwc4x3fefT9cH-RcPUxoSLow81hMyc-G1-gvzGk6c25Jp45KAXcihDIKnplvFgiJq-C1mhGMkJMxeqkAVdmPg_IcID8zxfttH1P2W_2qd/s1600/Screenshot_10.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2HbmnTvPStyS8M7eBzS2FDQSMaG59w2LRbsJwc4x3fefT9cH-RcPUxoSLow81hMyc-G1-gvzGk6c25Jp45KAXcihDIKnplvFgiJq-C1mhGMkJMxeqkAVdmPg_IcID8zxfttH1P2W_2qd/s320/Screenshot_10.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan pada local Machine</td></tr>
</tbody></table>
<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAUXEGjt2q-REkpvaPUax2o2z9c9JendYjfAIce1UXYmmTGOY8ssodEosQ_esCzGNCrnXRqw4RM36lgt7x_LDfR8lfaSe65tXWvYNxjp4V7cGeT0jZklFya8Z2BH14Mwf82cXLTlwdjAZ/s1600/Screenshot_11.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAUXEGjt2q-REkpvaPUax2o2z9c9JendYjfAIce1UXYmmTGOY8ssodEosQ_esCzGNCrnXRqw4RM36lgt7x_LDfR8lfaSe65tXWvYNxjp4V7cGeT0jZklFya8Z2BH14Mwf82cXLTlwdjAZ/s320/Screenshot_11.png" width="164" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan pada emulator</td></tr>
</tbody></table>
</li>
</ol>
<blockquote class="tr_bq">
Source Code : <a href="https://github.com/shlappdev/UWP_Hello_World">https://github.com/shlappdev/UWP_Hello_World</a></blockquote>
Bagimana? menarik bukan ? saya akan membuat lagi tutorial yang lebih menarik dari ini :D tetap kunjungi blog ini ya :D<br />
<br />
Jika ada yang ingin ditanyakan silahkan tanya melalui komentar dibawah ini. dan juga ada kritik atau saran juga bisa di tambahkan melalui komentar atau melalui email saya terima kasih telah berkunjung<br />
<br />