Membuat Aplikasi TAB Images | Windows Phone - 29 Nov 2013

Hallow sobat A-F , kali ini A-F akan shared lagi tutorial buat kalian semua tentang Membuat Aplikasi TAB Images , kenapa hari ini A-F shared tutorial ini Karena dosen memberikan tutorial berupa video yang berisi materi tentang image control , dengan belajar image control kita bisa mengatur layout atau widget image agar lebih menarik, walaupun dengan tampilan sederhana.. , Dibawah ini saya akan membuat  contoh image control ketika di klik gambar yang ada pada grid, maka akan tampil pada tampilan utama !! 

Aplikasi Yang Kita Buat:

Download Source Code 

Untuk prakteknya kalian bisa ikutin panduan berikut ini  , Kali buat grid dengan 2 row dan 3 column dan grid itu di bungkus oleh scroll viewer.Dan memasukkan image di setiap row dan column, atur sesuai panjang dan lebar frame imagenya.Selanjutnya kita load gambar ke setiap widget image itu. Dengan cara lihat di properties source , lalu browse ke folder image yang udah kita buat. Lalu pilih gambarnya.

Coding Di  MainPage.xaml

• Coding Untuk Canvas yang berfungsi untuk menampilkan images yang kita klik nantinya di ScrollViewer

 <Canvas Grid.Row="1" Height="224" HorizontalAlignment="Left" Margin="36,31,0,0" Name="canvas1" VerticalAlignment="Top" Width="404">
            <Image Canvas.Left="24" Canvas.Top="29" Height="150" Name="view" Stretch="UniformToFill" Width="200" Source="/aplikasitap;component/images/9.jpg" />
            <TextBlock Canvas.Left="250" Canvas.Top="91" Height="29" Name="view_text" Text="Mau kesana ??" Width="148" />
 </Canvas>
        

• Coding Untuk membuat grid dengan 2 row dan 3 column dan grid itu di bungkus oleh scroll viewer Dan memasukkan image di setiap row dan column.

 <ScrollViewer Grid.Row="1" Height="287" HorizontalAlignment="Left" Margin="30,296,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="410">
            <Grid Height="284" Name="grid1" Width="417">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="134" />
                    <ColumnDefinition Width="140" />
                    <ColumnDefinition Width="143*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="99" />
                    <RowDefinition Height="110" />
                    <RowDefinition Height="75*" />
                </Grid.RowDefinitions>
                <Image Grid.RowSpan="2" Height="99" Margin="0,2,0,0" Name="image1" Source="/aplikasitap;component/images/1.jpg" Stretch="UniformToFill" Tap="image1_Tap" VerticalAlignment="Top" />
                <Image Grid.Column="1" Grid.RowSpan="2" Height="99" Margin="4,2,2,0" Name="image2" Source="/aplikasitap;component/images/2.jpg" Stretch="UniformToFill" Tap="image2_Tap" VerticalAlignment="Top" />
                <Image Grid.Column="2" Grid.RowSpan="2" Height="99" Margin="4,1,5,0" Name="image3" Source="/aplikasitap;component/images/3.jpg" Stretch="UniformToFill" Tap="image3_Tap" VerticalAlignment="Top" />
                <Image Grid.ColumnSpan="2" Grid.Row="1" Height="99" Margin="1,8,139,0" Name="image4" Source="/aplikasitap;component/images/4.jpg" Stretch="UniformToFill" Tap="image4_Tap" VerticalAlignment="Top" />
                <Image Grid.Column="1" Grid.Row="1" Height="99" Margin="5,8,1,0" Name="image5" Source="/aplikasitap;component/images/5.jpg" Stretch="UniformToFill" Tap="image5_Tap" VerticalAlignment="Top" />
                <Image Grid.Column="2" Grid.Row="1" Height="99" Margin="4,8,5,0" Name="image6" Source="/aplikasitap;component/images/6.jpg" Stretch="UniformToFill" Tap="image6_Tap" VerticalAlignment="Top" />
            </Grid>
</ScrollViewer>

Coding Di  MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;

namespace aplikasitap
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void image1_Tap(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("images/1.jpg", UriKind.Relative));
            view.Source = newimage;
            view_text.Text = " jalan - Jalan ! "; 
        }

        private void image2_Tap(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("images/2.jpg", UriKind.Relative));
            view.Source = newimage;
            view_text.Text = " Kesana ";
        }

        private void image3_Tap(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("images/3.jpg", UriKind.Relative));
            view.Source = newimage;
            view_text.Text = " Kita bereng";
        }

        private void image4_Tap(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("images/4.jpg", UriKind.Relative));
            view.Source = newimage;
            view_text.Text = " Aja  . !!";
        }

        private void image5_Tap(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("images/5.jpg", UriKind.Relative));
            view.Source = newimage;
            view_text.Text = " Yookk  . !!";

        }

        private void image6_Tap(object sender, GestureEventArgs e)
        {

            BitmapImage newimage = new BitmapImage(new Uri("images/6.jpg", UriKind.Relative));
            view.Source = newimage;
            view_text.Text = " Salam Succes";
        }
    }
}

Sekian dulua tutorial tentang Membuat Aplikasi TAB Images | Windows Phone - 22 Nov 2013 !!!