Membuat Secondary Tile di Windows Phone

Setelah beberapa hari yang lalu saya membahas tentang Membuat Application Bar di Windows Phone, kali ini saya akan membahas tentang  Membuat Secondary Tile di Windows Phone

Apa itu Tile ?
Tile adalah sebuah link ke aplikasi yang ada di dalam Start. Ada 2 jenis Tile yaitu Application Tiles dan Secondary Tiles
Application Tile adalah tile yang dibuat ketika pengguna pin aplikasi ke Start dengan cara menekan dan menahan icon aplikasi dalam daftar aplikasi
dan Secondary Tiles adalah Tiles yang dibuat di aplikasi berdasarkan interaksi dari pengguna.

Langkah - langkah  Menambah dan Menghapus Secondary Tile di Windows Phone

1. Buat sebuah project windows phone di visual studio, lalu tambahkan gambar ke dalam project, gambar tersebut yang akan di gunakan sebagai Tiles

2. Pada mainpage.xaml tambahkan script dibawah ini untuk membuat 2 buah button

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="btn_tambah" Click="btn_tambah_Click" Content="Tambah Tiles" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,148,0,0" Width="257"/>
            <Button x:Name="btn_hapus" Click="btn_hapus_Click" Content="Hapus Tiles" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,264,0,0" Width="257"/>

        </Grid>

3. Buat sebuah fungsi untuk menetukan Tiles Aplikasi apakah sudah ada pada Start Screen atau belum

private ShellTile FindTile(string TileUriSource)
        {
            ShellTile shelltile = ShellTile.ActiveTiles.FirstOrDefault(tile => tile.NavigationUri.ToString().Contains(TileUriSource));
            return shelltile;
        }

4. Pada event btn_tambah click tambahkan script dibawah ini

private void btn_tambah_Click(object sender, RoutedEventArgs e)
        {
            // menemukan tile apakah sudah ada di start screen atau belum
            ShellTile tile = this.FindTile("Source=SecondaryTile");
            if (tile == null) // jika belum ada di start screen
            {
                // membuat tiledata
                StandardTileData tiledata = new StandardTileData
                {
                    Title="Tutorial Koding", // judul tile
                    BackgroundImage = new Uri("/Tile.png",UriKind.Relative), // bakcgrond tile
                    Count=3, 
                    BackTitle="Back Title", // judul ketika tile dibalik
                    BackBackgroundImage = new Uri("",UriKind.Relative), // background ketika tile dibalik
                    BackContent="Contoh Tile" // content tile ketika dibalik
                };

                string tileuri = "/MainPage.xaml?Source=SecondaryTile";
                // membuat tile
                ShellTile.Create(new Uri(tileuri, UriKind.Relative), tiledata);
            }
            else
            {
                MessageBox.Show("Secondary Tile sudah ada");
            }
        }

5. Pada event btn_hapus click tambahkan script dibawah ini

        private void btn_hapus_Click(object sender, RoutedEventArgs e)
        {
            ShellTile tile = this.FindTile("Source=SecondaryTile");
            if (tile != null) // jika tile ditemukan
            {
                // menghapus tile
                tile.Delete();
                MessageBox.Show("Secondary tile dihapus");
            }
            else
            {
                MessageBox.Show("Tidak ada secondary tile ditemukan");
            }
        }

6. Jalankan aplikasi dengan menekan tombol F5 jangan lupa memilih target device ke Emulator atau ke device

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Membuat Secondary Tile di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More

Membuat Application Bar di Windows Phone

Setelah beberapa hari yang lalu saya membahas tentang Membuat Navigasi Halaman di Windows Phone, kali ini saya akan membahas tentang Membuat Application Bar di Windows Phone

Apa itu Application Bar ?

Application bar merupakan sistem kontrol yang dapat kita gunakan untuk membangun sebuah toolbar pada aplikasi windows phone.

Ada 2 jenis application bar yaitu icon button dan text menu

Ada beberapa hal yang perlu kita perhatikan dalam membuat application bar yaitu :

1. Image yang digunakan sebagai icon berwarna putih untuk foreground dan transparent menggunakan Alpha Channel.
2. Tidak perlu menambahkan lingkaran, karena lingkaran telah otomatis.
3. Ukuran icon utama adalah 26x26 dan diletakan di tengah image.
4. Jangan menggunakan icon button yang telah disediakan pada hardware button.
5. Gunakan icon button utnuk task yang utama pada aplikasi
6. Hindari lebih dari 5 icon button
7. Jika suatu task dapat direpresentasikan dengan jelas melalui icon, gunakan icon button jika tidak, gunakan text menu.
8. Ketentuan mengenai opacity : 0 (tidak akan ditampilkan dan content page akan memenuhi layar), 0.5 s.d 1 (akan tampak di layar).

Langkah - langkah Membuat Application Bar di Windows Phone

1. Buka visual studio yang anda punya buat sebuah project windows phone application baru

2. Pada file MainPage.xaml tambahkan script dibawah ini tepat di atas </phone:PhoneApplicationPage>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
        <!-- Application bar icon button -->
        <shell:ApplicationBarIconButton x:Name="btn_simpan" IconUri="/Assets/AppBar/save.png" Text="simpan" Click="btn_simpan_Click"/>
        <shell:ApplicationBarIconButton x:Name="btn_bagikan" IconUri="/Assets/AppBar/share.png" Text="bagikan" Click="btn_bagikan_Click"/>
            
        <!-- Application bar text menu -->
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="btn_pengaturan" Text="Pengaturan" Click="btn_pengaturan_Click"/>
            <shell:ApplicationBarMenuItem x:Name="btn_tentang" Text="Tentang" Click="btn_tentang_Click"/>
         </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

3. Anda juga bisa membuat application bar melalui behind code dengan cara tambahkan script dibawha ini pada file MainPage.xaml.cs

            ApplicationBar appbar = new ApplicationBar();
            appbar.IsMenuEnabled = true;
            appbar.Opacity = 1.0;
            appbar.Mode = ApplicationBarMode.Default;
            appbar.IsVisible = true;
            
            // icon button
            ApplicationBarIconButton btn_simpan = new ApplicationBarIconButton();
            btn_simpan.Text = "simpan";
            btn_simpan.IconUri = new Uri("/Assets/AppBar/save.png", UriKind.Relative);
            appbar.Buttons.Add(btn_simpan);
            btn_simpan.Click += new EventHandler(btn_simpan_Click);

            ApplicationBarIconButton btn_bagikan = new ApplicationBarIconButton();
            btn_bagikan.Text = "bagikan";
            btn_bagikan.IconUri = new Uri("/Assets/AppBar/share.png", UriKind.Relative);
            appbar.Buttons.Add(btn_bagikan);
            btn_bagikan.Click += new EventHandler(btn_bagikan_Click);


            // text menu
            ApplicationBarMenuItem btn_pengaturan = new ApplicationBarMenuItem();
            btn_pengaturan.Text = "Pengaturan";
            appbar.MenuItems.Add(btn_pengaturan);
            btn_pengaturan.Click += new EventHandler(btn_pengaturan_Click);

            ApplicationBarMenuItem btn_tentang = new ApplicationBarMenuItem();
            btn_tentang.Text = "Tentang";
            appbar.MenuItems.Add(btn_tentang);
            btn_tentang.Click += new EventHandler(btn_tentang_Click);

            this.ApplicationBar = appbar;

4. Pada file MainPage.xaml.cs tambahkan script dibawah ini untuk menghandle event pada icon button dan text menu pada application bar

private void btn_bagikan_Click(object sender, EventArgs e)
{
    MessageBox.Show("Icon Button Bagikan ditekan");
}

private void btn_simpan_Click(object sender, EventArgs e)
{
     MessageBox.Show("Icon Button Simpan ditekan");
}

private void btn_pengaturan_Click(object sender, EventArgs e)
{
     MessageBox.Show("Text menu pengaturan ditekan");
}

private void btn_tentang_Click(object sender, EventArgs e)
{
     MessageBox.Show("Text menu tentang ditekan");
}

5. Jalankan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Membuat Application Bar di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More

Membuat Navigasi Halaman di Windows Phone

Malam semua, pada kesempatan kali ini saya ingin memposting tentang Windows Phone, karena saya sedang belajar tentang windows phone, sekalian juga saya ingin share tutorial tentang windows phone ini :D

Pertama - tama yang perlu dipersiapkan adalah Visual Studio 2012/2013

Langkah - langkah Membuat Navigasi Halaman di Windows Phone 8

1. Buka Visual Studio yang sudah anda punya (disini saya menggunakan Visual Studio 2013), Pilih File - New - Project - Visual C# pilih Windows Phone

2. Tambahkan sebuah button pada grid ContentPanel

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,519">
    <Button x:Name="btn_hal2" Content="Ke halaman 2" Width="400" Height="80" Click="btn_hal2_Click"/>
</Grid>

3. Buka file MainPage.xaml.cs tambahkan script dibawah ini untuk berpindah ke hal2.xaml ketika tombol btn_hal2 di klik

private void btn_hal2_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Hal2.xaml", UriKind.Relative));
}

4. Buat 1 halaman dengan cara klik Menu Project - Add New Item - Windows Phone Portrait Page beri nama hal2.xaml

5. Tambahkan sebuah button pada grid ContentPanel

<Grid x:Name="ContentPanel" Margin="12,151,12,10" Grid.RowSpan="2">
      <Button x:Name="btn_kembali" Content="Kembali ke halaman sebelumnya" Width="400" Height="80" Click="btn_kembali_Click"/>
</Grid>

6. Buka file hal2.xaml.cs tambahkan script dibawah ini untuk kembali ke halaman yang sebelumnya

private void btn_kembali_Click(object sender, RoutedEventArgs e)
{
     NavigationService.GoBack();
}

7. Jalankan program tersebut dengan cara menekan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Membuat Navigasi Halaman di Windows Phone 8

Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini

Read More