Windows Phone Tutorial - Membuat Horizontal Menu Seperti di Android

Terkadang ketika kita membuat aplikasi mobile, kita ingin meniru gaya design aplikasi mobile lain. Dalam postingan ini saya ingin share bagaimana caranya kita bisa membuat menu horizontal Android seperti di bawah ini. Caranya gampang ko, hanya menggunakan Data Binding. Ikuti saja ya. :)

Buka Visual Studio dan buat projek baru, namanya HorizontalMenu.
Pada Solution Explorer, buatlah suatu folder bernama Image, kemudian masukkan gambar ini, pastikan namanya tempIcon.png dan ukurannya 100x100 pas kalian masukkin ke dalam folder Image ya.

tempIcon.png

Pada LayoutRoot sampai ContentPanel, ubah kodingan XAML-nya menjadi seperti ini.

Pada Solution Explorer, klik kanan pada projek kita, kemudian pilih Add - Class.. Beri nama ItemModel.cs
Kodingannya adalah sebagai berikut:

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace HorizontalMenu
{
    public class ItemModel
    {
        public string Nama { get; set; }
        public string gambarImg { get; set; }
        public string Desc { get; set; }
    }
}

Tambahkan class baru bernama ItemViewModel.cs. Kodingannya adalah sebagai berikut:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace HorizontalMenu
{
 public class ItemViewModel
 {
        public ObservableCollection item{get; set;}
        

  public ItemViewModel()
  {
   // Insert code required on object creation below this point.
            item = new ObservableCollection();
            getItem();
  }

        private void getItem()
        {
            item.Add(new ItemModel { Nama = "temp1", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi" });
            item.Add(new ItemModel { Nama = "temp2", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi2" });
            item.Add(new ItemModel { Nama = "temp3", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi3" });
            item.Add(new ItemModel { Nama = "temp4", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi4" });
            item.Add(new ItemModel { Nama = "temp5", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi5" });
            item.Add(new ItemModel { Nama = "temp6", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi" });
            item.Add(new ItemModel { Nama = "temp7", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi2" });
            item.Add(new ItemModel { Nama = "temp8", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi3" });
            item.Add(new ItemModel { Nama = "temp9", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi4" });
            item.Add(new ItemModel { Nama = "temp10", gambarImg = "Image/tempIcon.png", Desc = "abcdefghi5" });   
        }
 }
}

Kemudian pada MainPage.xaml.cs, masukkan kodingan berikut di dalam class MainPage

        public ItemViewModel avm;

        public MainPage()
        {
            InitializeComponent();
            avm = new ItemViewModel();
            this.DataContext = avm;
        }

        private void changeItem(object sender, SelectionChangedEventArgs e)
        {
            ItemModel am = ((sender as ListBox).SelectedItem as ItemModel);
            MessageBox.Show(am.Desc);
        }

Tekan F5 untuk melihat hasilnya :)

Horizontal Menu

Dan kalau misalkan saya klik Item temp3, hasilnya adalah sebagai berikut.. :)

Hasil Item temp3 Click