Windows Phone 29 November 2013
Seep… postingan kali ini kita akan mencoba membuat aplikasi tentang photo di Windows Phone. Kebetulan saya mendapat materi kuliah tentang Image Control.
Nah disini kita akan membuat aplikasi yang mengatur sebuah photo dimana photo tersebut bisa berubah sesuai dengan photo yang kita klik.
Ok sudah lihat gambarnya kan ? pasti udah sedikit pahamlah tentang kerja aplikasi yang nantinya kita akan buat ini. Yaitu ketika kita klik sebuah photo yang ada di bawah maka photo itu akan muncul di atas yaitu dif ram yang besar itu.. nah gitu… ok paham ?.
Seperti biasa yang pertama kita buat project baru terlebih dahulu namanya bebaslah.. terserah tapi saya disini beri nama project saya dengan nama Image control.
Selanjutnya sedikit lebih ribet yaitu pengaturan layout untuk tata letak photo…
Di situ kita langsung memasukan photo utama
Pertama drag element Grid untuk fram photo utama..
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="246" HorizontalAlignment="Left" Margin="134,31,0,0"
Name="myimage" Stretch="Fill"
VerticalAlignment="Top" Width="202"
Source="/ImageControl1;component/images/wpap1.jpg"
/>
Dan yang kedua kita akan membuat
untuk layout photo yang kecil – kecil
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="246" HorizontalAlignment="Left" Margin="134,31,0,0"
Name="myimage" Stretch="Fill"
VerticalAlignment="Top" Width="202"
Source="/ImageControl1;component/images/wpap1.jpg" />
<ScrollViewer Margin="0,0,0,-144">
<Grid Height="400" 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="136" />
<RowDefinition Height="142" />
<RowDefinition Height="130" />
</Grid.RowDefinitions>
<Image Height="134" HorizontalAlignment="Left" Margin="26,6,0,0"
Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="96"
Source="/ImageControl1;component/images/wpap1.jpg" Tap="image1_Tap" Grid.RowSpan="2"
/>
<Image Height="134" HorizontalAlignment="Left" Margin="30,6,0,0"
Name="image2" Stretch="Uniform" VerticalAlignment="Top" Width="104" Grid.Column="1"
Source="/ImageControl1;component/images/wpap2.jpg" Tap="image2_Tap" Grid.RowSpan="2"
/>
<Image Height="134" HorizontalAlignment="Left" Margin="8,6,0,0"
Name="image3" Stretch="Uniform" VerticalAlignment="Top" Width="104" Grid.Column="2"
Source="/ImageControl1;component/images/wpap3.jpg" Tap="image3_Tap" Grid.RowSpan="2"
/>
<Image Height="134" HorizontalAlignment="Left" Margin="26,8,0,0"
Name="image4" Stretch="Uniform" VerticalAlignment="Top" Width="96" Grid.Row="1"
Source="/ImageControl1;component/images/wpap4.JPG" Tap="image4_Tap"/>
<Image Height="134" HorizontalAlignment="Left" Margin="30,8,0,0"
Name="image5" Stretch="Uniform" VerticalAlignment="Top" Width="104" Grid.Column="1" Grid.Row="1"
Source="/ImageControl1;component/images/wpap5.jpg" Tap="image5_Tap"/>
<Image Height="134" HorizontalAlignment="Left" Margin="8,8,0,0"
Name="image6" Stretch="Uniform" VerticalAlignment="Top" Width="104" Grid.Column="2" Grid.Row="1"
Source="/ImageControl1;component/images/wpap6.jpg" Tap="image6_Tap"/>
<Image Height="134" HorizontalAlignment="Left" Margin="25,0,0,0"
Name="image7" Stretch="Uniform" VerticalAlignment="Top" Width="96" Grid.Row="2"
Source="/ImageControl1;component/images/wpap7.jpg" Tap
="image7_Tap"/>
<Image Height="134" HorizontalAlignment="Left" Margin="32,0,0,0"
Name="image8" Stretch="Uniform" VerticalAlignment="Top" Width="102" Grid.Column="1" Grid.Row="2"
Source="/ImageControl1;component/images/wpap8.jpg" Tap="image8_Tap"
/>
<Image Height="134" HorizontalAlignment="Left" Margin="8,0,0,0"
Name="image9" Stretch="Uniform" VerticalAlignment="Top" Width="104" Grid.Column="2" Grid.Row="2"
Source="/ImageControl1;component/images/wpap9.jpg" Tap="image9_Tap"
/>
<TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0"
Name="myTB" Text="" VerticalAlignment="Top" Width="202" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Bisa di pahami ? bisa dong
langsung masukan photonya ya.. oh iya gemana cara masukin photonya ? begini
Klik kanan pada nama projeck klik
add – folder. Dah langsung ada folderkan ? oh iya beri nama Images selanjutnya
klik kanan pada folder yang udah kita buat tadi lalu pilih add – Exiting Item –
pilih gambar yang ingin kita masukan…
Oh ada yang kelupaan di dalam
grid layout tadi masukan element Image.
Lalu di file xaml.cs –nya
private void image1_Tap(object sender, GestureEventArgs
e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap1.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " WPAP Finding Srimulat
";
}
private void
image2_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap2.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Exis ";
}
private void
image3_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap3.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Curhat ";
}
private void
image4_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap4.JPG",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Keren ";
}
private void image5_Tap(object sender, GestureEventArgs
e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap5.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo :) ";
}
private void
image6_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap6.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Alay ";
}
private void
image7_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap7.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Gelisah ";
}
private void
image8_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap8.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Rajin ";
}
private void
image9_Tap(object sender, GestureEventArgs e)
{
BitmapImage newimage = new
BitmapImage(new
Uri("images/wpap9.jpg",
UriKind.Relative));
myimage.Source = newimage;
myTB.Text = " Danbo Smile ";
}
private void
PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
}
}
}
Komentar