IMAGE CONTROL WINDOWS PHONE 2

Oke pada kesempatan kali ini kita akan membahas tentang Imaage Control.
aplikasi ini bermaksud untuk membuat atau melihat picture-picture yang kita klik, sehingga akan muncul pada main picturenya

1. Buatlah Sebuah Project dengan nama "ImageControl"
2. pilih lokasi dimana agan-agan akan menyimpan project agan masing-masing
3. lalu klik OK dan pilih Emulator 7.1 lalu tekan OK kembali

Setelah keluar MainPage.xaml buat sebuah scrollviewer, lalu buat sebuah Grid dengan 3 Column dan 3 Row. lalu buat di dalam setiap column isi dengan element Image agar setiap column gambar bisa terlihat dengan jelas. dan jangan lupa beri nama pada setiap element gambar.

Kebetulan saya hobi nya sama Girls Generation . Jadi pakek foto SNSD aja yah , hahahah
Cara memasukkan gambar pada element image adalah yang pertama membuat data me Add Newfolder pada Project ImageControl klik kanan -----> Pilih Add ----> pilih new folder setelah itu beri nama folder tersebut "Image" atau bebas mau memberikan nama apa, namun pada tutorial ini saya sarankan menggunakan nama yang sama. setelah membuat folder lalu Klik kanan pada folder tersebut dan pilih Add -------> existing item ----> pilih 10 gambar yang agan-agan ingin tampilkan pada aplikasi ini.

 lalu masukkan gambar yang tadi masukkan pada folder "Image" kedalam setiap Element Image yang agan buat tadi. setelah dimasukkan klik 2x pada setiap element Image dan masuk ke MainPage.xaml.cs

dan ketikkan koding seperti pada gambar dibawah ini.


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 ImageControl2
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void image1_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {

        }

        private void Image1(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/snsd.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 1";
        
        }

        private void Image2(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/jessica.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 2";

        }

        private void Image3(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/seohyun.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 3";

        }

        private void Image4(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/sooyong.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 4";

        }

        private void Image5(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/sunny.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 5";

        }

        private void Image6(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/taeyeon.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 6";

        }

        private void Image7(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/tifany.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 7";

        }

        private void Image8(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/yoona.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 8";

        }

        private void Image9(object sender, GestureEventArgs e)
        {
            BitmapImage newimage = new BitmapImage(new Uri("/ImageControl2;component/Images/hyoyeon.jpg", UriKind.Relative));
            outputIMG.Source = newimage;
            outputTB.Text = "Image 9";

        }

        private void image2_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {

        }

        private void image3_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {

        }

        private void image4_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {

        }

        private void image5_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {

        }

        private void myImage_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {

        }



       
    }

}

Dan kalo masih bingung di main page nya . Bisa di Mainpage.xaml nya

<phone:PhoneApplicationPage 
    x:Class="ImageControl2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--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 x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Glory MU" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="84" Width="430" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Height="196" Name="outputIMG" Stretch="Fill" Width="210" Source="/ImageControl2;component/Images/turi.jpg" Margin="127,0,119,411" />
            <ScrollViewer Margin="5,0,1,-146" Height="787" VerticalAlignment="Bottom">
                <Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67*" />
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="65*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="87" />
                        <RowDefinition Height="63" />
                        <RowDefinition Height="111" />
                        <RowDefinition Height="39" />
                        <RowDefinition Height="75" />
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>
                    <Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/snsd.jpg" Tap="Image1" ImageFailed="image1_ImageFailed" Grid.ColumnSpan="2" Grid.RowSpan="2" />
                    <Image Grid.Column="1" Height="150" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/jessica.jpg" Tap="Image2" ImageFailed="image2_ImageFailed" Grid.RowSpan="2" />
                    <Image Grid.Column="2" Height="150" HorizontalAlignment="Left" Name="image3" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/seohyun.jpg" Tap="Image3" ImageFailed="image3_ImageFailed" Stretch="Fill" Grid.RowSpan="2" />
                    <Image Grid.Row="2" Height="150" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/sooyong.jpg" Tap="Image4" ImageFailed="image4_ImageFailed" Margin="0,0,134,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
                    <Image Grid.Column="1" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/sunny.jpg" Tap="Image5" ImageFailed="image5_ImageFailed" Grid.RowSpan="2" />
                    <Image Grid.Column="2" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/taeyeon.jpg" Tap="Image6" Grid.RowSpan="2" />
                    <Image Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image7" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/tifany.jpg" Tap="Image7" Grid.ColumnSpan="2" Grid.RowSpan="2" />
                    <Image Grid.Column="1" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image8" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/yoona.jpg" Tap="Image8" Grid.RowSpan="2" />
                    <Image Grid.Column="2" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="126" Source="/ImageControl2;component/Images/hyoyeon.jpg" Tap="Image9" Grid.RowSpan="2" />
                    <TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="outputTB" Text="" VerticalAlignment="Top" Width="202" />
                </Grid>
            </ScrollViewer>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->


</phone:PhoneApplicationPage>

Dan hasil aplikasi nya seperti  berikut ini