Mengenal WPF (Windows Presentation Foundation)

Apa itu WPF?

WPF (Windows Presentation Foundation) adalah teknologi baru yang dirilis oleh Microsoft bersamaan dengan .NET Framework 3.0 (versi sekarang adalah 3.5). Selain WPF .NET 3.0 juga menyertakan beberapa teknologi baru yaitu WF (Workflow Foundation) untuk pemodelan dan WCF (Windows Communication Foundation) yang merupakan pengembangan dari Web Services.

WPF merupakan next generation graphic platform yang memungkinkan anda membuat advance UI (User Interface) yang memadukan document, media, 2D dan 3D, dan animation yang memiliki kemiripan dengan pemrograman web. WPF dapat digunakan pada platform windows seperti Win XP, Vista, dan Windows Server 2003 / 2008.

Sebelum ada teknologi WPF untuk mengembangkan aplikasi windows anda harus menggunakan beberapa teknologi yang berbeda, misalnya untuk menambahkan form user control seperti button kedalam aplikasi anda harus menggunakan komponen Windows Form, untuk menambahkan 2D Graphic anda harus menggunakan library GDI+, untuk 3D Graphic anda harus menggunakan library DirectX atau OpenGL.

WPF didesain untuk menyediakan solusi yang utuh untuk pengembangan aplikasi, WPF menyediakan integrasi dari teknologi yang berbeda, dengan WPF anda dapat menggabungkan komponen vector graphic, complex animation, dan media kedalam aplikasi. Fitur yang baru dalam WPF (.NET 3.5) adalah fitur 3D Graphic yang sudah built-in berbasis pada teknologi DirectX.

Apa saja yang harus diinstall?

Untuk menggunakan teknologi ini anda memerlukan beberapa software yang harus diinstall yaitu:

· Visual Studio 2008 / Visual C# Express 2008 (bagi pengguna C#) / Visual Basic 2008 Express (bagi pengguna vb). Visual Studio 2008 menggunakan .NET Framework 3.5 yang sudah support WPF yang terbaru saat ini. Vesi express edition dapat anda download di http://www.microsoft.com/express/download

· Microsoft Expression Blend 2.5 June 2008 Preview, anda juga dapat mendownload preview edition secara gratis.

XAML (Extensible Application Markup Language)

WPF menggunakan XAML untuk merepresentasikan UI dan user interaction. XAML dibangun dari XML dan penulisanya mirip dengan XHTML yang sering anda gunakan dalam membuat aplikasi berbasis web. XAML juga mendukung prinsip code-behind seperti pada aplikasi ASP.NET. Dengan menggunakan XAML, designer dan programmer dapat bekerja bersama dalam mengembangkan aplikasi, pertama designer membuat design UI kemudian programmer melanjutkan dengan menambah kodenya dalam bahasa yang disupport oleh .NET seperti C# / VB.NET.

Program sederhana menggunakan WPF

Setelah mengenal sekilas apa itu teknologi WPF, pada sesi ini anda akan mencoba membuat aplikasi sederhana menggunakan WPF. Anda dapat membuat aplikasi WPF langsung dari Visual Studio 2008, namun untuk membuat kreasi graphic yang lebih menarik anda dapat menggunakan Microsoft Expression Blend untuk membuat tampilan graphicnya baru kemudian diteruskan dengan menambahkan kode C# / VB.NET menggunakan Visual Studio 2008.

Langkah pertama buka Microsoft Blend Expression, klik File – New Project – Pilih WPF Application – beri nama projectnya “Kalkulator”, pilih bahasa pemrograman sesuai selera anda (C# atau VB).

Design tampilannya sesuai dengan selera anda, karena saya bukan seorang graphic designer maka saya kurang bisa membuat tampilan yang menarik, contoh ini hanya menunjukan kepada anda bahwa anda bisa mendesign tampilan dengan lebih leluasa dengan menggunakan Expression Blend sama sepert anda menggunakan Macromedia Flash atau Adobe Photoshop.

clip_image002

Tampilan yang anda design akan secara otomatis dikonversi kedalam format XAML, jika anda ingin melihat kode XAML klik di tab XAML disebelah kanan, maka akan tampak kode sebagai berikut (kode yang saya tulis pada listing dibawah ini hanya sebagian).

   1: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   2:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   3:     x:Class="Kalkulator.Window1" x:Name="Window" Title="Window1" Width="362" Height="416">
   4: <Grid x:Name="LayoutRoot">
   5: <Image Margin="105.577,17,97.68,0" Source="actuallogo.png" Stretch="Fill" Height="60.66" VerticalAlignment="Top"/>
   6: <Image Margin="21,17,0,0" Source="erick.jpg" Stretch="Fill" Height="77.621" VerticalAlignment="Top" Width="79.333" HorizontalAlignment="Left"/>
   7: <Label Margin="21,111,57.107,0" VerticalAlignment="Top" Height="34" Content="SAMPLE KALKULATOR " FontSize="24" FontWeight="Bold">
   8: <Label.Foreground>
   9: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  10:         <GradientStop Color="#FF2662CA" Offset="0"/>
  11:         <GradientStop Color="#FFF81717" Offset="1"/>
  12:     </LinearGradientBrush>
  13: </Label.Foreground>
  14: </Label>
  15:     </Grid>
  16: </Window>

Jika anda perhatikan kode XAML yang digenerate oleh Expression Blend hampir mirip dengan XHTML yang biasa anda gunakan dalam membangun websites.

Setelah selesai mendesign tampilan di Expression Blend sekarang saatnya untuk menambahkan code-behind pada Visual Studio 2008. Buka aplikasi yang barusan anda buat dengan menggunakan Visual Studio, pilih New – Open Project – Kalkulator – kemudian isi property Name dari masing-masing property yang ada.

image

Kemudian tambahkan kode pada saat tombol diklik (event onClick). Tambahkan kode sebagai berikut:

clip_image004

   1: private void btnHitung_Click(object sender, RoutedEventArgs e)
   2:        {
   3:            int intBil1 = 0, intBil2 = 0, intHasil = 0;
   4:            intBil1 = Convert.ToInt32(txtBil1.Text);
   5:            intBil2 = Convert.ToInt32(txtBil2.Text);
   6:
   7:            if (rdTambah.IsChecked == true)
   8:            {
   9:                intHasil = intBil1 + intBil2;
  10:                MessageBox.Show("Hasil Penjumlahannya :" + intHasil.ToString());
  11:            }
  12:            else
  13:            {
  14:                intHasil = intBil1 + intBil2;
  15:                MessageBox.Show("Hasil Pengurangan : " + intHasil.ToString());
  16:            }
  17:        }

Untuk mencoba menjalankan aplikasinya tekan Ctrl+F5.

clip_image006

Contoh aplikasi diatas hanya merupakan contoh aplikasi yang sangat sederhana yang bisa dibangun menggunakan WPF. Aplikasi WPF juga dapat digunakan untuk mengembangkan aplikasi 3D graphic dan game.

6 thoughts on “Mengenal WPF (Windows Presentation Foundation)

  1. Pingback: test

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