Assalamu'alaikum Wr. Wb
bertemu kembali bersama saya...... oke, pada kesempatan ini saya akan memberikan tutorial mengenai Image Control. aplikasi ini bermaksud untuk membuat atau melihat picture-picture yang kita klik, sehingga akan muncul pada main picturenya. :D oke langsung saja kita ke TKP.
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 agan-agan 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 yang kita isi gambar bisa terlihat dengan jelas. dan jangan lupa beri nama pada setiap element gambar.
cara memasukkan gambar pada element image adalah yang pertama agan-agan membuat ata me Add Newfolder pada Project ImageControl klik kanan -----> Pilih Add ----> pilih new folder setelah itu beri nama folder tersebut "Image" atau terserah agan-agan 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 agan-agan 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("Images/1.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 1";
}
private void Image2(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/2.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 2";
}
private void Image3(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/3.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 3";
}
private void Image4(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/4.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 4";
}
private void Image5(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/5.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 5";
}
private void Image6(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/6.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 6";
}
private void Image7(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/7.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 7";
}
private void Image8(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/8.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.Text = "Image 8";
}
private void Image9(object sender, GestureEventArgs e)
{
BitmapImage newimage = new BitmapImage(new Uri("Images/9.jpg", UriKind.Relative));
myImage.Source = newimage;
MyTeksBlock.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 apabila agan-agan masih bingung di koding pada MainPage.xaml berikut ini saya berikan koding pada MainPage.xaml ini dia lihat dibawah ini.
<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="K-ON!" 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="196" Name="myImage" Stretch="Fill" Width="210" Source="/Images/10.jpg" Margin="127,0,119,411" />
<ScrollViewer Margin="0,0,0,-117" >
<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="150" />
<RowDefinition Height="111" />
<RowDefinition Height="39"/>
<RowDefinition Height="75" />
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
<Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/1.jpg" Tap="Image1" ImageFailed="image1_ImageFailed" Grid.ColumnSpan="2" />
<Image Grid.Column="1" Height="150" Name="image2" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/2.jpg" Tap="Image2" ImageFailed="image2_ImageFailed" />
<Image Grid.Column="2" Height="150" HorizontalAlignment="Left" Name="image3" VerticalAlignment="Top" Width="150" Source="/Images/3.jpg" Tap="Image3" ImageFailed="image3_ImageFailed" Stretch="UniformToFill" Margin="0,0,-17,0" Grid.ColumnSpan="2" />
<Image Grid.Row="1" Height="150" Name="image4" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/4.jpg" Tap="Image4" ImageFailed="image4_ImageFailed" Margin="0,0,134,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<Image Grid.Column="1" Grid.Row="1" Height="150" HorizontalAlignment="Left" Name="image5" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/5.jpg" Tap="Image5" ImageFailed="image5_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Grid.Row="1" Height="150" HorizontalAlignment="Left" Name="image6" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/6.jpg" Tap="Image6" Margin="0,0,-17,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<Image Grid.Row="3" Height="150" HorizontalAlignment="Left" Name="image7" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/7.jpg" Tap="Image7" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Image Grid.Column="1" Grid.Row="3" Height="150" HorizontalAlignment="Left" Name="image8" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/8.jpg" Tap="Image8" Grid.RowSpan="2" />
<Image Grid.Column="2" Grid.Row="3" Height="150" HorizontalAlignment="Left" Name="image9" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/Images/9.jpg" Tap="Image9" Margin="0,0,-17,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="MyTeksBlock" 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 aplikasinya akan seperti gambar dibawah ini.
Mungkin hanya segitu yang dapat saya sampaikan kepada agan-agan sekalian, mohon maaf apabila ada kata-kata yang kurang berkenan. sampai bertemu pada tutorial-tutorial selanjutnya.
Wassalamu'alaikum Wr. Wb
0 komentar:
Posting Komentar