Simple WP7 Silverlight Application
Pada tutorial kali ini akan dibahas pembuatan aplikasi-aplikasi yang sederhana menggunakan Silverlight for Windows Phone 7. Adapun aplikasi yang akan dibuat adalah :
- Simple Web Browser
- Simple Image Viewer
- Simple Media Player
Simple Web Browser
Pada tutorial kali ini kita akan membuat sebuah Web Browser sederhana dengan menggunakan Windows Phone 7 Silverlight Application.
- Buat project Silverlight for Windows Phone dengan nama SimpleWebBrowser.
- Ubah ApplicationTitle dan PageTitle sebagai berikut:
<TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
- Tambahkan textbox dengan nama BrowserTextBox.
- Tambahkan button dengan nama BrowserButton
- Tambahkan web browser control dengan nama MyWebBrowser.
<TextBox Height="72" HorizontalAlignment="Left" Margin="6,6,0,0" Name="BrowserTextBox" Text="" VerticalAlignment="Top" Width="290" />
<Button Content="Browse" Height="72" HorizontalAlignment="Left" Margin="290,6,0,0" Name="BrowserButton" VerticalAlignment="Top" Width="160" />
<phone:WebBrowser HorizontalAlignment="Left" Margin="12,84,0,0" Name="MyWebBrowser" VerticalAlignment="Top" Width="438" Height="517" />
</Grid>
- Double click pada tombol BrowserButton kemudian tambahkan kode berikut:
Dim webUri As New Uri(BrowserTextBox.Text, UriKind.Absolute)
If Not webUri Is Nothing Then
MyWebBrowser.Navigate(webUri)
End If
End Sub
- Jalankan aplikasi pada emulator dengan menekan tombol F5, kemudian tulis alamat url pada textbox.
Simple Image Viewer
Pada tutorial kali ini kita akan membuat sebuah aplikasi image viewer sederhana menggunakan Silverlight App di Windows Phone 7.
- Buat project Silverlight for Windows Phone baru dengan nama SimpleImageViewer.
- Pada langkah selanjutnya kita akan membuat struktur data yang digunakan untuk menyimpan data image yang akan ditampilkan.
- Klik kanan pada Project di solution explorer → Add → New Item → pilih Code File → beri nama Gambar.vb.
- Tambahkan kode berikut kedalam Gambar.vb
Public Property FileName As String
Public Property FileGambar As ImageSource
End Class
- Pada MainPage.xaml tambahkan listBox kedalam ContentPanel, beri nama GambarListBox.
<ListBox Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" Name="GambarListBox" VerticalAlignment="Top" Width="438">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="150" Stretch="Uniform"
HorizontalAlignment="Center"
Source="{Binding FileGambar}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
- Klik kanan pada project – pilih Add – New Folder – beri nama images untuk folder yang dibuat.
- Klik kanan pada folder images – pilih Add – Existing Item – tambahkan 4 file image, kemudian ubah nama file image menjadi berurutan untuk memudahkan pemanggilan.
- Pada MainPage.xaml.vb tambahkan dua method yang akan digunakan untuk mengambil gambar yang ada pada folder images dan memasukannya kedalam object collection untuk ditampilkan dalam list.
Return New BitmapImage(New Uri(String.Format("images/{0}", fileName),
UriKind.Relative))
End Function
Private Function GetGambars() As ObservableCollection(Of Gambar)
Dim lstGambar As New ObservableCollection(Of Gambar) From {
New Gambar With {.FileGambar = GetGambar("1.jpg"), .FileName = "1.jpg"},
New Gambar With {.FileGambar = GetGambar("2.jpg"), .FileName = "2.jpg"},
New Gambar With {.FileGambar = GetGambar("3.jpg"), .FileName = "3.jpg"},
New Gambar With {.FileGambar = GetGambar("4.jpg"), .FileName = "4.jpg"}
}
Return lstGambar
End Function
' Constructor
Public Sub New()
InitializeComponent()
GambarListBox.ItemsSource = GetGambars()
End Sub
- Tekan F5 untuk menjalankan aplikasi pada emulator.
Simple Media Player
Pada tutorial kali ini kita akan membuat sebuah program media player sederhana untuk memainkan file video pada Windows Phone 7.
- Buat project Silverlight for Windows Phone dengan nama SimpleMediaPlayer.
- Tambahkan sebuah button dan media element control kedalam MainPage.xaml.
- Tambahkan file .wmv kedalam aplikasi anda. Klik kanan pada project – pilih Add – Existing File – masukan file .wmv (misal Wildlife.wmv).
- Tambahkan kode berikut pada event PlayButton_Click untuk menjalankan file video tersebut.
<Button Content="Play" Height="72" HorizontalAlignment="Left" Margin="143,6,0,0" Name="PlayButton" VerticalAlignment="Top" Width="160" />
<MediaElement Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MyMediaElement" VerticalAlignment="Top" Width="438" />
</Grid>
MyMediaElement.Source = New Uri("Wildlife.wmv", UriKind.Relative)
MyMediaElement.Play()
End Sub
- Tekan F5 untuk menjalankan aplikasi yang anda buat pada emulator.
Actual Training 