Windows Phone 7 Tutorial (VB) Part 2

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:
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <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.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <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:
Private Sub BrowseButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles BrowserButton.Click
    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.

image

 

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.

image

  • Tambahkan kode berikut kedalam Gambar.vb
Public Class Gambar
    Public Property FileName As String
    Public Property FileGambar As ImageSource
End Class

    • Pada MainPage.xaml tambahkan listBox kedalam ContentPanel, beri nama GambarListBox.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <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.

image

    • 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.
Private Function GetGambar(ByVal fileName As String) As ImageSource
    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.

image

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.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <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>

    • 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.
Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles PlayButton.Click
    MyMediaElement.Source = New Uri("Wildlife.wmv", UriKind.Relative)
    MyMediaElement.Play()
End Sub

  • Tekan F5 untuk menjalankan aplikasi yang anda buat pada emulator.

image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s