Image Control || Windows Phone - 29 November 2013

Selamat pagi jumaaaaaaattttt~

Seperti hari hari biasa nya, setiap kali kita diabsensi selalu ada keywordnya…. Daaaannnn.. keyword kali ini adalah film yang paling memotivasi kamu… Do you know what ? masa ada yang jawab film “Zombie” aneh banget kan… ahahahaha entah sisi sebelah mananya yang paling memotivasi si dia…… kita sebut saja dia bunga…. Ahahahaha

Dan saat nama aku dipanggil, aku jawab, “Film korea… Judul nya Miracle of Giving Full” soalnya film ini lah yang memotivasi aku buat sayang sama ade aku ehehehe… keliatan bgt kan sebelumnya ga sayang sama ade ehehehe

Oke…….. kita Lanjut aja langsung ke materi latihannya yaaaaaaaa…

Latihan kali ini kita disuruh bikin foto yang berjajar dan bisa kita pilih… kaya gini nih….

Penasaran ? ikuti langkah-langkah nya……

Seperti biasa sediakan semua alat untuk membuat sebuah project yang berupa
MS.visual studio 2010 express for windows phone
• File- new project
• installed templates –visual c# – windows phone application
Name : ControlImage
Location : c:\users\administrator\documents\visual studio 2010\Projects
Solution name : ControlImage

Check list :create directory for solution
Ok

• select the windows phone platform : windows phone os 7.1 – ok
o jika anda manggunakan software Ms.windows phone versi lain anda dengan platform yang lebih tinggi ,maka disaran kan untuk anda agar tetap memilih windows phone os 7.1 karena o.s 8.0 belum support dengan os yang lama

• sebelum ke menu desain kamu bisa menambahkan folder baru pada bagian atas,add-new folder-rename =image-add –existing item –pilih gambar 1 – 9 gambar.

• pada bagian MainPage.xaml buat sbagai berikut :

Tarik grid nya….. bikin 9 bagian…

Masukin 9 gambar itu dimasing-masing grid nya…

<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="page name" 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">

            <Image Height="210" HorizontalAlignment="Left" Margin="134,31,0,0" Name="myimage" Stretch="Fill" VerticalAlignment="Top" Width="202" Source="/ImageControl1;component/images/doratop.jpg" />

            <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="356,31,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" />

            <ScrollViewer>

            <Grid Height="284" HorizontalAlignment="Left" Margin="33,291,0,0" Name="grid1" VerticalAlignment="Top" Width="417">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="134" />

                    <ColumnDefinition Width="149" />

                    <ColumnDefinition Width="134*" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="99" />

                    <RowDefinition Height="110" />

                    <RowDefinition Height="75*" />

                </Grid.RowDefinitions>

                <Image Height="93" HorizontalAlignment="Left" Margin="1,3,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="120" Source="/ImageControl1;component/images/Doraemon-Akira.jpg" ImageFailed="image1_ImageFailed" Tap="image1_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="14,2,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="1" Source="/ImageControl1;component/images/Doraemon01.jpg" ImageFailed="image2_ImageFailed" Tap="image2_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="6,4,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="2" Source="/ImageControl1;component/images/doraemon1.jpg" Tap="image3_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="2,8,0,0" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Row="1" Source="/ImageControl1;component/images/doraemon1024.jpg" Tap="image4_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="14,8,0,0" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="1" Source="/ImageControl1;component/images/Doraemon38a.jpg" Tap="image5_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="8,8,0,0" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="2" Grid.Row="1" Source="/ImageControl1;component/images/doratop.jpg" Tap="image6_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="1,0,0,0" Name="image7" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Row="2" Source="/ImageControl1;component/images/uchull.jpg" Tap="image7_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="14,4,0,0" Name="image8" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="1" Grid.Row="2" Source="/ImageControl1;component/images/Doraemon-Akira.jpg" Tap="image8_Tap" />

                <Image Height="93" HorizontalAlignment="Left" Margin="8,6,0,0" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="120" Grid.Column="2" Grid.Row="2" Source="/ImageControl1;component/images/Doraemon01.jpg" Tap="image9_Tap" />

                    <TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="MyTeksBlock" Text="" VerticalAlignment="Top" Width="202" />

                </Grid>

            </ScrollViewer>

        </Grid>

        <Button Content="Button" Height="72" Margin="368,31,0,0" Name="button1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="160" Click="button1_Click" Grid.Row="1" />

    </Grid>

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 ImageControl1

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/uchull.jpg", UriKind.Relative));

            myimage.Source = newimage;

            button1.Visibility = Visibility.Collapsed;

            button2.Visibility = Visibility.Visible;

        }

        private void button2_Click(object sender, RoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/doratop.jpg", UriKind.Relative));

            myimage.Source = newimage;

            button2.Visibility = Visibility.Collapsed;

            button1.Visibility = Visibility.Visible;

        }

        private void image1_ImageFailed(object sender, ExceptionRoutedEventArgs e)

        {

        }

        private void image1_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/Doraemon-Akira.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 1";

        }

        private void image2_ImageFailed(object sender, ExceptionRoutedEventArgs e)

        {

        }

        private void image2_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/Doraemon01.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 2";

        }

        private void image3_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/doraemon1.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 3";

        }

        private void image4_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/doraemon1024.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 4";

        }

        private void image5_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/Doraemon38a.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 5";

        }

        private void image6_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/doratop.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 6";

        }

        private void image7_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/uchull.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 7";

        }

        private void image8_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/Doraemon-Akira.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 8";

        }

        private void image9_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/Doraemon01.jpg", UriKind.Relative));

            myimage.Source = newimage;

            MyTeksBlock.Text = "Aku doraemon 9";

        }

    }

}

 

oke deh... finish.........

Inilah ceritaku….. apa ceritamu ?