Cerita Kuliah | Tanggal 29 - 11 - 2013

Assalamualaikum Wr Wb...................

Pada kali ini saya akan berbagi ilmu windows phone seperti biasa, kali ini kita akan mempelajari tentang Aplikasi Tap tentang Image Control. Aplikasi ini digunakan untuk mengontrol gambar dengan scroll viewer dan menampilkan gambar tersebut apabila di klik.

untuk lebih jelasnya akan dapat dilihat tampilannya dibawah ini :

gambar tampilan Image dan Textblock

ini adalah gambar galeri yang akan menggunakan scroll viewer

solution explorer beserta data gambar 

untuk lebih jelas scriptnya bisa dicopy 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 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/banner-image-plane.png", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Plane Banner ";

        }

        private void image2_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/8619591-vector-illustration-of-a-plane-silhouette-with-world-map-on-background-and-banner-for-text.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Vector Illustrator ";

        }

        private void image7(object sender, ExceptionRoutedEventArgs e)

        {

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

            view.Source = newimage;

            view_text.Text = " Skyrim ";

        }

        private void image6(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/fighter-planes-facebook-timeline-cover.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Fighter Plane ";

        }

        private void image3(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/69158-Royalty-Free-RF-Clipart-Illustration-Of-A-Pilot-Flying-A-Simple-Plane-On-A-White-Background.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Royal Plane ";

        }

        private void image8(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/t-50revisi.png", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " T - 50";

        }

        private void image9(object sender, ExceptionRoutedEventArgs e)

        {

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

            view.Source = newimage;

            view_text.Text = "Fallout";

        }

        private void image5(object sender, ExceptionRoutedEventArgs e)

        {

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

            view.Source = newimage;

            view_text.Text = "Illustrator";

        }

        private void image4(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/3308300-237381-3d-model-of-airplane-isolated-on-white-background.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = "Illustrator";

        }

    }

}

setelah script diatas diketik maka tampilannya seperti dibawah ini :

maksudnya apabila kita drag galeri gambar tersebut maka akan secara otomatis ter-scroll

ini adalah gambar element-element yang digunakan

ini adalah script didalam apliasi tersebut untuk membuat link-link dapat dikoneksikan melalui beberapa script dibawah ini :

<phone:PhoneApplicationPagex:Class="aplikasitap.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="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/><ScrollViewer><Grid Height="284" Name="grid1" Width="417" Margin="36,296,27,27" Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="134" /><ColumnDefinition Width="149" /><ColumnDefinition Width="134*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="99" /><RowDefinition Height="99" /><RowDefinition Height="86*" /></Grid.RowDefinitions><Image Height="99" Name="image1" Source="/aplikasitap;component/images/banner-image-plane.png" Stretch="Fill" Tap="image1_Tap" VerticalAlignment="Top" /><Image Grid.Column="1" Height="99" HorizontalAlignment="Left" Name="image2" Source="/aplikasitap;component/images/8619591-vector-illustration-of-a-plane-silhouette-with-world-map-on-background-and-banner-for-text.jpg" Stretch="Fill" Tap="image2_Tap" VerticalAlignment="Top" Width="149" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/69158-Royalty-Free-RF-Clipart-Illustration-Of-A-Pilot-Flying-A-Simple-Plane-On-A-White-Background.jpg" Stretch="Fill" VerticalAlignment="Top" Width="149" Grid.Column="1" Grid.Row="1" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/3308300-237381-3d-model-of-airplane-isolated-on-white-background.jpg" Stretch="Fill" VerticalAlignment="Top" Width="149" Grid.Column="2" Grid.Row="2" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/37602.jpg" Stretch="Fill" VerticalAlignment="Top" Width="149" Grid.Column="1" Grid.Row="2" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/fighter-planes-facebook-timeline-cover.jpg" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/fgfgfg.jpg" Stretch="Fill" VerticalAlignment="Top" Grid.Column="2" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/t-50revisi.png" Stretch="Fill" VerticalAlignment="Top" Grid.Column="2" Grid.Row="1" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/FalloutEventBanner1.jpg" Stretch="Fill" VerticalAlignment="Top" Grid.Row="2" /></Grid></ScrollViewer></StackPanel><!--ContentPanel - place additional content here-->
<Image Canvas.Left="24" Canvas.Top="29" Height="186" Name="view" Stretch="UniformToFill" Width="200" Margin="140,166,140,416" /><TextBlock Canvas.Left="250" Canvas.Top="91" Height="29" Name="view_text" Text="" Width="148" /></Grid></phone:PhoneApplicationPage>