Pustaka Pemograman Ribbon di Windows Presentation Foundation

ID Artikel: 2625343 - Melihat produk di mana artikel ini berlaku.
Perbesar semua | Perkecil semua

Tentang Penulis

Perkecil tabel iniPerbesar tabel ini
Perkecil gambar iniPerbesar gambar ini
MVP RidiF
Artikel ini dibuat oleh MVP Ridi Ferdiana.Microsoft berterimakasih kepada para MVP yang secara proaktif telah membagi pengetahuan mereka dengan para pengguna lainnya.

Pengantar

Ribbon adalah antarmuka yang cukup dikenal semenjak hadirnya Office Fluent UI. Sebagai suatu antarmuka yang berorientasi konteks. Ribbon merubah paradigma pemograman yang berorientasi pada menu tarik, menjadi berorentasi pada menu berbasis ikon, seperti pada Ribbon. Penggunaan Ribbon sangat memudahkan pengguna awam untuk melakukan pekerjaan yang berorentasi tugas dan menyingkat proses belajar aplikasi melalui Konsep konteks yang sesuai nalar. Kemudahan yang dijanjikan Ribbon sayangnya saat ini hanya dibatasi oleh pengguna Office.

Resolusi

Artikel ini akan membahas salah satu komponen gratis yang dapat memudahkan pengembang untuk membuat solusi dengan antarmuka navigasi menggunakan model Ribbon. Artikel ini akan menyampaikan lima langkah mudah untuk membuat aplikasi WPF dengan menggunakan antarmuka Ribbon yaitu:

  1. Mengunduh dan memasang komponen Ribbon untuk WPF
  2. Membuat Proyek WPF yang berorientasi pada Ribbon
  3. Mendesain dan Memahami Struktur Ribbon pada WPF
  4. Mengintegrasikan Ribbon dan Events
  5. Mendeploy Ribbon dalam Aplikasi
Mengunduh dan Memasang Ribbon

Komponen Ribbon dapat diunduh secara gratis di http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=11877 . WPF Ribbon bukanlah barang baru karena sudah dibahas di blog MSDN http://blogs.msdn.com/b/wpf/archive/2010/08/03/introducing-microsoft-ribbon-for-wpf.aspx dan juga dokumentasi MSDN di http://msdn.microsoft.com/en-us/library/ff799534.aspx . Dokumen ini akan merangkum ke dua sumber tersebut dengan pendekatan langkah-demi-langkah.

Perkecil gambar iniPerbesar gambar ini
2625334


Gambar 1. Unduh Instalasi WPF Ribbon
Perkecil gambar iniPerbesar gambar ini
2625335

Gambar 2. Pasang Instalasi WPF Ribbon

WPF Ribbon (pada saat tulisan ini ditulis adalah versi Oktober 2010) akan memasangkan dua komponen utama yakni template proyek dan sekumpulan kontrol yang bermanfaat bagi pengembang dalam mengembangkan aplikasi dengan antarmuka Ribbon.

Membuat Aplikasi WPF dengan Ribbon WPF

Pada saat Ribbon WPF telah terpasang maka yang dapat dilakukan pembuatan aplikasi WPF dengan antarmuka Ribbon dengan langkah sebagai berikut.

  1. Buat Proyek Baru dengan File, New Project
  2. Pada installed template pilih bahasa pemograman Anda (Penulis dalam hal ini Memilih Visual C#, Windows, WPF Ribbon Application.
  3. Template pada nomor dua hanya ada apabila pustaka Ribbon WPF terpasang.
  4. Beri nama proyek dan tekan Ok untuk mengkonfirmasi pembuatan proyek berdasar pada template WPF Ribbon Application
    Perkecil gambar iniPerbesar gambar ini
    2625336

Gambar 3. Template Proyek Ribbon WPF

Mendesain dan Memahami Struktur Project Ribbon WPF

Cara termudah dalam memahami struktur proyek Ribbon WPF adalah dengan melihat jendela designer dan juga XAML document outline pada Visual Studio.


Perkecil gambar iniPerbesar gambar ini
2625337

Gambar 4. XAML Document outline dan Designer Windows

Secara visual, jendela designer secara eksplisit menampilkan antarmuka Ribbon. Setidaknya ada tiga bagian dasar dari Ribbon yang umum digunakan yakni Ribbon Button, Ribbon Tab, dan Ribbon Menu. Tiga bagian dasar tersebut secara eksplisit bisa dipahami dengan melihat XAML document outline.

Pengembang dapat memodifikasi kode yang ada dengan langsung memodifikasi kode XAML atau dapat pula dengan melakukan drag and drop melalui Toolbox.


Perkecil gambar iniPerbesar gambar ini
2625338

Gambar 5. Kode XAML untuk Ribbon


Perkecil gambar iniPerbesar gambar ini
2625339

Gambar 6. Control Toolbox Ribbon pada Visual Studio

Desain utama yang umum dilakukan adalah dengan memahami konteks pada Ribbon. Ribbon pada umumnya dikembangkan pada aplikasi berorientasi panel-panel layaknya Microsoft Office. Untuk memahami pola dan tata-cara mendesain Ribbon yang baik, penulis selalu menyarankan Anda membaca dokumen UI Style Guide for Ribbon , sebuah petunjuk desain Ribbon pada aplikasi seperti Office.

Hal yang harus Anda pahami adalah Ribbon yang mengikuti gaya pemograman XAML di WPF. Pada kode berikut kita membuat sebuah kode sederhana yang menampilkan antarmuka Rich Text Editor (komponen pihak ketiga) dalam Ribbon.


Perkecil gambar iniPerbesar gambar ini
2625340

Gambar 7. Desain Antarmuka Ribbon dan Komponen WPF lain

Cuplikan kode berikut menampilkan struktur susunan Ribbon pada WPF
<ribbon:RibbonWindow xmlns:dxre="http://schemas.devexpress.com/winfx/2008/xaml/richedit" x:Class="MyFirstRibbon.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

Title="MainWindow"

x:Name="RibbonWindow"

Width="640" Height="480">

<Grid x:Name="LayoutRoot">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<ribbon:Ribbon x:Name="Ribbon">

<ribbon:Ribbon.ApplicationMenu>

<ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">

<ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"

x:Name="MenuItem1"

ImageSource="Images\LargeIcon.png"/>

</ribbon:RibbonApplicationMenu>

</ribbon:Ribbon.ApplicationMenu>

<ribbon:RibbonTab x:Name="HomeTab"

Header="Home">

<ribbon:RibbonGroup x:Name="Group1"

Header="Menu Utama">

<ribbon:RibbonButton x:Name="Button1"

LargeImageSource="Images\LargeIcon.png"

Label="Recommendation" />

<ribbon:RibbonButton x:Name="Button2"

SmallImageSource="Images\SmallIcon.png"

Label="Find Expert" />

<ribbon:RibbonButton x:Name="Button3"

SmallImageSource="Images\SmallIcon.png"

Label="Find Book" />

</ribbon:RibbonGroup>

<ribbon:RibbonGroup x:Name="groupCari" Header="Pencarian Judul">

<ribbon:RibbonTextBox x:Name="rbnSearchBox" Height="23" VerticalAlignment="Top" Width="150" Text="cari disini.." />

<ribbon:RibbonButton x:Name="btnSearch"

SmallImageSource="Images\SmallIcon.png"

Label="Find Thesis Title" Click="btnSearch_Click" />

</ribbon:RibbonGroup>

</ribbon:RibbonTab>

</ribbon:Ribbon>

<StackPanel Grid.Row="1" Height="300" Margin="0,0,0,-245">

<dxre:RichEditControl x:Name="myEditControl" Height="300" />

</StackPanel>

</Grid></ribbon:RibbonWindow>

Hal yang umum dilakukan tentu dengan mengubah ikon standard dengan ikon yang layak. Secara umum terdapat dua jenis ikon yakni ikon berukuran besar dengan dimensi 32x32 dan ikon berukuran kecil dengan dimensi 24x24. Anda dapat dengan mudah mencari ikon dengan ukuran tersebut dengan menggunakan Bing.com

Perkecil gambar iniPerbesar gambar ini
2625341

Gambar 8. Icon ribbon yang ada di aplikasi WPF Ribbon

Mengintegrasikan dengan Event

Integrasi Ribbon dengan event dilakukan layaknya pemograman Event Handler di WPF. Hal yang harus dilakukan adalah dengan cukup menambahkan event handler seperti klik pada radio button.

<ribbon:RibbonButton x:Name="btnSearch" SmallImageSource="Images\SmallIcon.png"Label="Find Thesis Title" Click="btnSearch_Click" />

Pada kode bisa ditambahkan berbagai hal yang hendak anda lakukan seperti layaknya kode berikut.

private void btnSearch_Click(object sender, RoutedEventArgs e)

{

myEditControl.Text = string.Format("Melakukan Pencarian terhadap kata kunci {0}", rbnSearchBox.Text);

}

Perkecil gambar iniPerbesar gambar ini
2625342

Gambar 9. Aplikasi WPF dengan Ribbon

Ringkasan

Informasi lebih lanjut tentang solusi WPF ini dapat Anda akses melalui Situs Komunitas WPF


Perkecil gambar iniPerbesar gambar ini
Community Solutions
SANGGAHAN KONTEN SOLUSI KOMUNITAS


MICROSOFT CORPORATION DAN/ATAU MASING-MASING PENYUPLAINYA TIDAK MEMBUAT PERNYATAAN-PERNYATAAN TENTANG KESESUAIAN, KEBENARAN, ATAU KEAKURASIAN INFORMASI DAN GRAFIS TERKAIT YANG TERKANDUNG DI DALAMNYA. SEMUA INFORMASI DAN GRAFIS TERKAIT TERSEBUT DIBERIKAN ""APA ADANYA"" TANPA JAMINAN DALAM BENTUK APA PUN. MICROSOFT DAN/ATAU MASING-MASING PENYUPLAINYA DENGAN INI MENYANGGAH SEMUA JAMINAN DAN SYARAT-SYARAT BERKENAAN DENGAN INFORMASI DAN GRAFIS TERKAIT INI, TERMASUK SEMUA JAMINAN DAN SYARAT-SYARAT TERSIRAT MENGENAI KELAYAKAN JUAL, KELAYAKAN UNTUK TUJUAN TERTENTU, UPAYA YANG SELAYAKNYA DIKERJAKAN, HAK, DAN KEADAAN TIDAK MELANGGAR HAK KEKAYAAN INTELEKTUAL PIHAK LAIN. ANDA KHUSUSNYA SETUJU BAHWA MICROSOFT DAN/ATAU PARA PENYUPLAINYA TIDAK PERNAH BERTANGGUNGJAWAB, DALAM KEADAAN APAPUN, ATAS SEGALA BENTUK KERUGIAN YANG BERSIFAT LANGSUNG, TIDAK LANGSUNG, GANTI KERUGIAN SEBAGAI UANG PAKSA, INSIDENTAL, KHUSUS, DAN KERUGIAN KONSEKUENSIAL, ATAUPUN KERUGIAN APA PUN TERMASUK, NAMUN TIDAK TERBATAS PADA, KERUGIAN AKIBAT HILANGNYA KESEMPATAN UNTUK MENGGUNAKAN, HILANGNYA DATA ATAU KEUNTUNGAN, YANG TIMBUL AKIBAT ATAU YANG BERHUBUNGAN DALAM CARA APAPUN DENGAN PENGGUNAAN ATAU KETIDAKMAMPUAN UNTUK MENGGUNAKAN INFORMASI DAN GRAFIS TERKAIT YANG TERKANDUNG DI DALAMNYA, BAIK BERDASARKAN KONTRAK, PERBUATAN MELAWAN HUKUM, KELALAIAN, TANGGUNG JAWAB MUTLAK ATAS KERUGIAN, ATAU LAINNYA, WALAUPUN JIKA MICROSOFT ATAU SALAH SATU PENYUPLAINYA TELAH DIBERITAHU MENGENAI KEMUNGKINAN ADANYA KERUGIAN-KERUGIAN TERSEBUT.

Properti

ID Artikel: 2625343 - Kajian Terakhir: 25 September 2013 - Revisi: 3.1
Berlaku bagi:
  • Microsoft Visual Studio 2010 Professional
  • Microsoft Visual Studio 2010 Ultimate
Kata kunci: 
kbmvp kbcommunity kbstepbystep KB2625343

Berikan Masukan

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com