WPF :: Teknik Switching Usercontrol

by DEWA


Kali ini saya membedah teknik switching usercontrol pada pembangunan aplikasi dengan menggunakan teknologi WPF. Teknik switching usercontrol digunakan untuk mengganti usercontrol yang sedang dimuat oleh active window ke usercontrol selanjutnya yang akan dimuat. Aplikasi hanya membutuhkan satu window  yang memiliki usercontrol dan usercontrol tersebut akan diganti-ganti sesuai usercontrol yang kita hendaki untuk ditampilkan. Dengan menggunakan teknik ini, pemakaian memory aplikasi kita menjadi lebih efisien.

Inti dari teknik ini adalah pemanfaatan static class dan static attribute sebagai object yang dapat diakses oleh class manapun. Tiap kali kita melakukan switch usercontrol, kita bisa langsung memanggil object static tersebut.

Agar lebih komprenhensif memahami teknik ini, ikuti petunjuk – petunjuk berikut :

  1. Buka Microsoft Visual Studio 2010
  2. Buat project WPF baru
  3. Buat class baru bernama Switcher
  4. Ubah class Switcher menjadi static class dan hapus fungsi constructor-nya , seperti pada code berikut :
    namespace TutorialSwitching
    {
      public static class Switcher
      {
    
      }
    }
  5. Isi static class Switcher dengan atribut-atribut seperti code di bawah ini:
    namespace TutorialSwitching
    {
      public static class Switcher
      {
        public static MainWindow pageSwitcher;
    
        public static void Switch( UserControl newPage)
        {
           pageSwitcher.Navigate( newPage );
        }
      }
    }
  6. Pada MainWindow.xaml buat sebuah usercontrol baru di dalamnya. Usercontrol tersebut nantinya akan menjadi usercontrol yang memuat usercontrol yang ditampilkan. Namai usercontrol tersebut dengan MyUserControl.
  7. Pada MainWindow.xaml.cs buat fungsi Navigate seperti code di bawah ini. Fungsi ini berguna untuk mengganti content dari MyUserControl dengan usercontrol yang dipassing-kan melalui fungsi.
    public void Navigate( UserControl nextPage )
    {
      MyUserControl.Content = nextPage;
    }
  8. Pada fungsi constructor MainWindow tambahi baris code di bawah ini. UserControl Baru merupakan UserControl yang akan ditampilkan pada MainWindow
    Switcher.pageSwitcher = this;
    Switcher.Switch(new UserControlBaru());
  9. Dengan demikian MainWindow.xaml.cs berisi code berikut :
    public partial class MainWindow : Window
    {
       public MainWindow()
       {
         InitializeComponent();
         Switcher.pageSwitcher = this;
         Switcher.Switch(new UserControlBaru());
       }
    
       public void Navigate( UserControl nextPage )
       {
         MyUserControl.Content = nextPage;
       }
    }
  10. Pada event tertentu, untuk mengganti usercontrol yang akan ditampilkan, secara mudah hanya memanggil fungsi berikut :
    private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
    {
      Switcher.Switch(new UserControl1());
    }

Dengan menggunakan teknik swithing usercontrol, kita akan lebih mudah dan terstruktur dalam mengembangkan aplikasi WPF yang berskala besar atau menengah. Semoga tulisan ini bermanfaat. Amin.