Subscribe RSS Join our Facebook Group Follow us on Twitter!
in Search

Agam Fuja Kurniawan's Blog

Share Experiences and Knowledge

December 2010 - Posts

  • Event Report : Microsoft Mouse Mischief

    Pada tanggal 13 Desember 2010, MSP Universitas Suryakancana Cianjur menyelenggarakan event khusus untuk calon guru yaitu tepatnya di Universitas Suryakancana Cianjur Fakultas Keguruan dan Ilmu Pendidikan mengenai peningkatan SDM guru dengan memanfaatkan teknologi informasi sebagai media pembelajaran dikelas.

    Pamflet Mouse Mischief

    Nah, hal ini yang menjadi fokus saya hingga saat ini. Saya memang mempunyai ambisi dimana guru-guru nantinya, mempunyai cara/metoda pembelajaran dengan memanfaatkan teknologi informasi isi. Sehingga saya mulai dari calon gurunya sendiri.

    Kali ini, event tersebut bekerja sama dengan HMH HIMATIKA FKIP UNSUR Cianjur dan MUGI Cianjur. Acara ini berjalan dengan sangat lancar dan sukses. Dihadiri oleh kurang lebih 150 orang. Kebetulan saya sendiri yang menjadi pemateri dalam kegiatan tersebut. Karena ruangan yang terbatas, kita coba membagi 2 sesi, sehingga kuota 150 orang bisa terpenuhi.

    Berikut foto dokumentasinya :

    Nah, karena kami memberikan FeedBack Form yang hasilnya mereka sangat tertarik sekali dengan metoda pembelajaran yang saya sharing, sehingga sebagian besar mereka ingin sekali menggunakan metoda tersebut. Apalagi ada beberapa calon guru yang memang sudah mengajar di beberapa sekolah di Cianjur.

    Bahkan, dalam FeedBack Form tersebut meminta saya untuk memberikan sharing seperti ini lagi di sekolahnya. Wow, luar biasa Senyum. Karena target pencapaian peserta masih kurang, maka sepertinya akan ada lagi kegiatan seperti ini bagi calon guru yang belum mendapatkan materi ini.

    Yah, semoga dengan semakin banyaknya acara seperti ini, maka di Cianjur guru-guru semakin terbuka bahwa dengan Teknologi Informasi pun dapat masuk kedalam dunia pendidikan, bahkan dapat memberika solusi yang terbaik untuk pendidikan. Sehingga IT di Cianjur bisa semakin maju lagi. SEMANGAT! Senyum dengan mulut terbuka

    Bagi yang ingin mendownload slide event ini silahkan download disini.

  • Tutorial RibbonControlsLibrary Part 8

    Yah, ini adalah tutorial terakhir saya dalam membuat Ribbon ini. Dalam tutorial terakhir ini kita akan mencoba memberikan tema pada Ribbon kita. Tema yang akan kita gunakan adalah tema Microsoft Office 2007 yaitu Black, Blue dan Silver. Nanti silahkan coba masing-masing dari tema tersebut.

    Nah, sebelum kita belajar memberikan tema pada Ribbon kita, bagi yang belum mengikuti tutorial ini dari awal bisa melihat postingan sebelumnya disini :

    Tutorial RibbonControlsLibrary Part 1

    Tutorial RibbonControlsLibrary Part 2

    Tutorial RibbonControlsLibrary Part 3

    Tutorial RibbonControlsLibrary Part 4

    Tutorial RibbonControlsLibrary Part 5

    Tutorial RibbonControlsLibrary Part 6

    Tutorial RibbonControlsLibrary Part 7

    Nah, cara untuk menambahkan tema pada Ribbon kita sangatlah mudah. Nanti cukup tinggal tambahkan saja code berikut diatas Grid :

       1: <Window.Resources>
       2:     <ResourceDictionary>
       3:         <ResourceDictionary.MergedDictionaries>
       4:                 
       5:         </ResourceDictionary.MergedDictionaries>
       6:     </ResourceDictionary>
       7: </Window.Resources>

    Nah, baru diantara itu, tambahkan source nya pada RibbonControlsLibrary tadi untuk memastikan akan memakai tema yang mana. Misalnya coba tambahkan code berikut :

       1: <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml"/>

    Sehingga keseluruhan code untuk menambahkan tema menjadi seperti dibawah ini :

       1: <Window.Resources>
       2:     <ResourceDictionary>
       3:         <ResourceDictionary.MergedDictionaries>
       4:             <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml"/>
       5:         </ResourceDictionary.MergedDictionaries>
       6:     </ResourceDictionary>
       7: </Window.Resources>

    Coba kita Run (F5), dan hasilnya seperti pada gambar dibawah ini :

    DebugBlue

    Itu adalah Tema Office 2007 Blue, sekarang kita coba satu persatu temanya. Coba ganti temanya dengan cara ganti codenya menjadi seperti berikut :

       1: <Window.Resources>
       2:     <ResourceDictionary>
       3:         <ResourceDictionary.MergedDictionaries>
       4:             <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Silver.xaml"/>
       5:         </ResourceDictionary.MergedDictionaries>
       6:     </ResourceDictionary>
       7: </Window.Resources>

    Hasilnya menjadi seperti berikut :

    DebugSilver

    Atau kita coba dengan tema Black, ganti menjadi seperti dibawah ini :

       1: <Window.Resources>
       2:     <ResourceDictionary>
       3:         <ResourceDictionary.MergedDictionaries>
       4:             <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Black.xaml"/>
       5:         </ResourceDictionary.MergedDictionaries>
       6:     </ResourceDictionary>
       7: </Window.Resources>

    Nah, hasilnya seperti gambar dibawah ini :

    DebugBlack

    Sampai disini, kita sudah bisa membuat sebuah Ribbon yang cukup cantik. Mengenai Tema itu bisa memakai tema yang mana saja, disesuaikan dengan selera dan warna dasar dari aplikasi kita. Nah, sebenarnya untuk ApplicationMenu (Orb yang disebelah QuickAccessToolbar) bisa kita tambahkan gambar. Tinggal buat Command nya pada Resource, selanjutnya tinggal panggil seperti biasanya.

    Ya, sampai disini tutorial pembuatan Ribbon. Mudah-mudahan bermanfaat, jika ada waktu nanti saya akan coba buatkan eBook nya, bagaimana caranya membuat aplikasi aReader dengan menggunakan Ribbon ini. Kita tunggu saja yah. Pada kesempatan berikutnya saya akan membuat Tutorial membuat Ribbon yang memiliki tampilan Office 2010, sangat persis. Khasnya adalah Ribbon ini memiliki BackStage.. Senyum dengan mulut terbuka

    Sekali lagi terima kasih bagi yang telah mengikuti tutorial ini dari awal hingga akhir, mudah-mudahan bermanfaat yah! SEMANGAT! Senyum

  • Tutorial RibbonControlsLibrary Part 7

    Pada tutorial sebelumnya, kita belajar mengenai cara menambahkan QuickAccessToolBar dengan mudah, kali ini kita akan mencoba menambahkan sebuah ApplicationMenuItem pada Menu Ribbon. ApplicationMenuItem jika diibaratkan pada Microsoft Office 2007 adalah seperti kumpulan menu pada OfficeButton.

    Nah, kali ini kita akan coba menambahkan beberapa menu dari Resource yang sudah ada. Sebelum beranjak lebih jauh, bagi yang belum mengikuti tutorial ini dari pertama bisa melihatnya pada postingan sebelumnya disini :

    Tutorial RibbonControlsLibrary Part 1

    Tutorial RibbonControlsLibrary Part 2

    Tutorial RibbonControlsLibrary Part 3

    Tutorial RibbonControlsLibrary Part 4

    Tutorial RibbonControlsLibrary Part 5

    Tutorial RibbonControlsLibrary Part 6

    Nah, kali ini jika kita ingin menambahkan ApplicationMenuItem, maka tinggal tambahkan code XAML berikut dibawah Tag Ribbon.Resource :

       1: <r:Ribbon.ApplicationMenu>
       2:     <r:RibbonApplicationMenu>
       3:                     
       4:     </r:RibbonApplicationMenu>
       5: </r:Ribbon.ApplicationMenu>

    Nah, sesudah itu tinggal kita tambahkan Controlnya yaitu ApplicationMenuItem, contohnya coba tambahkan code nya seperti dibawah ini :

       1: <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}"/>
       2: <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
       3: <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=safe}"/>

    Anda juga bisa menambahkan pemisah dengan menuliskan code dibawah ini :

       1: <r:RibbonSeparator/>

    Sehingga code lengkap untuk ApplicationMenu seperti bisa menjadi seperti dibawah ini :

       1: <r:Ribbon.ApplicationMenu>
       2:     <r:RibbonApplicationMenu>
       3:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}"/>
       4:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
       5:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=safe}"/>
       6:         <r:RibbonSeparator/>
       7:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}"/>
       8:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
       9:         <r:RibbonSeparator/>
      10:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=school}"/>
      11:     </r:RibbonApplicationMenu>
      12: </r:Ribbon.ApplicationMenu>

    Nah, coba deh Run (F5), hasilnya seperti pada gambar dibawah ini :

    Debug

    Jika kita ingin menambahkan SubMenu pada Main Menu, maka caranya tinggal rubah codenya menjadi seperti dibawah ini :

       1: <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}">
       2:     <r:RibbonApplicationSplitMenuItem Command="{StaticResource ResourceKey=interact}"/>
       3:     <r:RibbonApplicationSplitMenuItem Command="{StaticResource ResourceKey=safe}"/>
       4: </r:RibbonApplicationMenuItem>

    Sehingga code keseluruhan untuk Application Menu ini adalah menjadi seperti dibawah ini :

       1: <r:Ribbon.ApplicationMenu>
       2:     <r:RibbonApplicationMenu>
       3:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}">
       4:             <r:RibbonApplicationSplitMenuItem Command="{StaticResource ResourceKey=interact}"/>
       5:             <r:RibbonApplicationSplitMenuItem Command="{StaticResource ResourceKey=safe}"/>
       6:         </r:RibbonApplicationMenuItem>
       7:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
       8:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=safe}"/>
       9:         <r:RibbonSeparator/>
      10:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}"/>
      11:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
      12:         <r:RibbonSeparator/>
      13:         <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=school}"/>
      14:     </r:RibbonApplicationMenu>
      15: </r:Ribbon.ApplicationMenu>

    Terakhir, code keseluruhan menjadi seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo" Height="150" VerticalAlignment="Top">
       8:             
       9:             <r:Ribbon.Resources>
      10:                 <r:RibbonCommand x:Key="green"
      11:                                  Executed="cmd_green"
      12:                                  LabelTitle="Green"
      13:                                  LabelDescription="Ini adalah Green"
      14:                                  LargeImageSource="/images/green32.png"
      15:                                  SmallImageSource="/images/green16.png"
      16:                                  ToolTipTitle="Green"
      17:                                  ToolTipDescription="Ini adalah Green"
      18:                                  ToolTipImageSource="/Images/green32.png"
      19:                                  ToolTipFooterTitle="Help"
      20:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      21:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      22:                 <r:RibbonCommand x:Key="interact"
      23:                                  Executed="cmd_interact"
      24:                                  LabelTitle="Interact"
      25:                                  LabelDescription="Ini adalah Interact"
      26:                                  LargeImageSource="/images/interact32.png"
      27:                                  SmallImageSource="/images/interact16.png"
      28:                                  ToolTipTitle="Interact"
      29:                                  ToolTipDescription="Ini adalah Interact"
      30:                                  ToolTipImageSource="/Images/interact32.png"
      31:                                  ToolTipFooterTitle="Help"
      32:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      33:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      34:                 <r:RibbonCommand x:Key="safe"
      35:                                  Executed="cmd_safe"
      36:                                  LabelTitle="Safe"
      37:                                  LabelDescription="Ini adalah Safe"
      38:                                  LargeImageSource="/images/safe32.png"
      39:                                  SmallImageSource="/images/safe16.png"
      40:                                  ToolTipTitle="Safe"
      41:                                  ToolTipDescription="Ini adalah Safe"
      42:                                  ToolTipImageSource="/Images/safe32.png"
      43:                                  ToolTipFooterTitle="Help"
      44:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      45:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      46:                 <r:RibbonCommand x:Key="school"
      47:                                  Executed="cmd_school"
      48:                                  LabelTitle="School"
      49:                                  LabelDescription="Ini adalah School"
      50:                                  LargeImageSource="/images/school32.png"
      51:                                  SmallImageSource="/images/school16.png"
      52:                                  ToolTipTitle="School"
      53:                                  ToolTipDescription="Ini adalah School"
      54:                                  ToolTipImageSource="/Images/school32.png"
      55:                                  ToolTipFooterTitle="Help"
      56:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      57:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      58:             </r:Ribbon.Resources>
      59:             
      60:             <r:Ribbon.ApplicationMenu>
      61:                 <r:RibbonApplicationMenu>
      62:                     <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}">
      63:                         <r:RibbonApplicationSplitMenuItem Command="{StaticResource ResourceKey=interact}"/>
      64:                         <r:RibbonApplicationSplitMenuItem Command="{StaticResource ResourceKey=safe}"/>
      65:                     </r:RibbonApplicationMenuItem>
      66:                     <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
      67:                     <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=safe}"/>
      68:                     <r:RibbonSeparator/>
      69:                     <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=green}"/>
      70:                     <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=interact}"/>
      71:                     <r:RibbonSeparator/>
      72:                     <r:RibbonApplicationMenuItem Command="{StaticResource ResourceKey=school}"/>
      73:                 </r:RibbonApplicationMenu>
      74:             </r:Ribbon.ApplicationMenu>
      75:             
      76:             <r:Ribbon.QuickAccessToolBar>
      77:                 <r:RibbonQuickAccessToolBar>
      78:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}" />
      79:                     <r:RibbonButton Command="{StaticResource ResourceKey=safe}" />
      80:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}" />
      81:                 </r:RibbonQuickAccessToolBar>
      82:             </r:Ribbon.QuickAccessToolBar>
      83:             
      84:             <r:RibbonTab Label="Home">
      85:                 <r:RibbonGroup>
      86:                     <r:RibbonGroup.Command>
      87:                         <r:RibbonCommand LabelTitle="Paste"/>
      88:                     </r:RibbonGroup.Command>
      89:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
      90:                 </r:RibbonGroup>
      91:  
      92:                 <r:RibbonGroup>
      93:                     <r:RibbonGroup.Command>
      94:                         <r:RibbonCommand LabelTitle="Copy"/>
      95:                     </r:RibbonGroup.Command>
      96:                     <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
      97:                     <r:RibbonButton Command="{StaticResource ResourceKey=safe}"/>
      98:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>
      99:                 </r:RibbonGroup>
     100:  
     101:                 <r:RibbonGroup>
     102:                     <r:RibbonGroup.Command>
     103:                         <r:RibbonCommand LabelTitle="Cut"/>
     104:                     </r:RibbonGroup.Command>
     105:                     <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
     106:                     <r:RibbonTextBox/>
     107:                 </r:RibbonGroup>
     108:  
     109:             </r:RibbonTab>
     110:             
     111:             <r:RibbonTab Label="Edit">
     112:                 <r:RibbonGroup>
     113:                     <r:RibbonGroup.Command>
     114:                         <r:RibbonCommand LabelTitle="Zoom In"/>
     115:                     </r:RibbonGroup.Command>
     116:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
     117:                 </r:RibbonGroup>
     118:             </r:RibbonTab>
     119:             
     120:             <r:RibbonTab Label="View">
     121:                 <r:RibbonGroup>
     122:                     <r:RibbonGroup.Command>
     123:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
     124:                     </r:RibbonGroup.Command>
     125:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>
     126:                 </r:RibbonGroup>
     127:             </r:RibbonTab>
     128:             
     129:         </r:Ribbon>
     130:     </Grid>
     131: </Window>

    Coba kita Run (F5) untuk mencoba aplikasi, dan hasilnya seperti pada gambar dibawah ini :

    DebugFin

    OK.. sampai disini, kita sudah bisa menambahkan beberapa Menu Item atau disebut juga ApplicationMenuItem. Nah, mudahkan? Pada tutorial selanjutnya yaitu tutorial terakhir kita akan belajar memakai Themes Office 2007. Sehingga Ribbon nya memiliki Tema warna yang sudah disediakan oleh si RibbonControlsLibrary.

    Tunggu yah tutorial terkahirnya. SEMANGAT! Senyum dengan mulut terbuka

  • Tutorial RibbonControlsLibrary Part 6

    Pada tutorial kali ini, kita akan belajar mengenai bagaimana cara membuat sebuah QuickAccessToolbar pada Ribbon yang sudah kita buat sebelumnya. Nah, pada tutorial sebelumnya, kita sudah bisa membuat Ribbon yang setengah jadi, kali ini kita akan coba lengkapi dengan QuickAccessToolbar pada Ribbon nya.

    Sebelum lebih jauh, bagi yang belum mengikuti blog ini dari awal bisa melihat postingan sebelumnya disini :

    Tutorial RibbonControlsLibrary Part 1

    Tutorial RibbonControlsLibrary Part 2

    Tutorial RibbonControlsLibrary Part 3

    Tutorial RibbonControlsLibrary Part 4

    Tutorial RibbonControlsLibrary Part 5

    Yah, seperti yang sudah kita ketahui sebelumnya, bahwa pada Ribbon Office 2007 memiliki sebuah QuickAccessToolbar yang terdapat pada atas Ribbon. Nah, kali ini kita akan menambahkan itu pada Ribbon yang kita buat.

    Caranya sangat mudah sekali, hanya dengan menambahkan code berikut pada Tag Ribbon dibawah Ribbon.Resource :

       1: <r:Ribbon.QuickAccessToolBar>
       2:     <r:RibbonQuickAccessToolBar>
       3:                     
       4:     </r:RibbonQuickAccessToolBar>
       5: </r:Ribbon.QuickAccessToolBar>

    Selanjutnya, tinggal kita tambahkan sebuah Control diantara Tag RibbonQuickAccessToolBar tadi. Contohnya kita tambahkan sebuah RibbonButton sehingga menjadi seperti dibawah ini :

       1: <r:Ribbon.QuickAccessToolBar>
       2:     <r:RibbonQuickAccessToolBar>
       3:         <r:RibbonButton Command="{StaticResource ResourceKey=green}" />
       4:         <r:RibbonButton Command="{StaticResource ResourceKey=safe}" />
       5:         <r:RibbonButton Command="{StaticResource ResourceKey=school}" />
       6:     </r:RibbonQuickAccessToolBar>
       7: </r:Ribbon.QuickAccessToolBar>

    Sehingga keseluruhan Code XAML nya terlihat seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo" Height="150" VerticalAlignment="Top">
       8:             
       9:             <r:Ribbon.Resources>
      10:                 <r:RibbonCommand x:Key="green"
      11:                                  Executed="cmd_green"
      12:                                  LabelTitle="Green"
      13:                                  LabelDescription="Ini adalah Green"
      14:                                  LargeImageSource="/images/green32.png"
      15:                                  SmallImageSource="/images/green16.png"
      16:                                  ToolTipTitle="Green"
      17:                                  ToolTipDescription="Ini adalah Green"
      18:                                  ToolTipImageSource="/Images/green32.png"
      19:                                  ToolTipFooterTitle="Help"
      20:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      21:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      22:                 <r:RibbonCommand x:Key="interact"
      23:                                  Executed="cmd_interact"
      24:                                  LabelTitle="Interact"
      25:                                  LabelDescription="Ini adalah Interact"
      26:                                  LargeImageSource="/images/interact32.png"
      27:                                  SmallImageSource="/images/interact16.png"
      28:                                  ToolTipTitle="Interact"
      29:                                  ToolTipDescription="Ini adalah Interact"
      30:                                  ToolTipImageSource="/Images/interact32.png"
      31:                                  ToolTipFooterTitle="Help"
      32:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      33:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      34:                 <r:RibbonCommand x:Key="safe"
      35:                                  Executed="cmd_safe"
      36:                                  LabelTitle="Safe"
      37:                                  LabelDescription="Ini adalah Safe"
      38:                                  LargeImageSource="/images/safe32.png"
      39:                                  SmallImageSource="/images/safe16.png"
      40:                                  ToolTipTitle="Safe"
      41:                                  ToolTipDescription="Ini adalah Safe"
      42:                                  ToolTipImageSource="/Images/safe32.png"
      43:                                  ToolTipFooterTitle="Help"
      44:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      45:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      46:                 <r:RibbonCommand x:Key="school"
      47:                                  Executed="cmd_school"
      48:                                  LabelTitle="School"
      49:                                  LabelDescription="Ini adalah School"
      50:                                  LargeImageSource="/images/school32.png"
      51:                                  SmallImageSource="/images/school16.png"
      52:                                  ToolTipTitle="School"
      53:                                  ToolTipDescription="Ini adalah School"
      54:                                  ToolTipImageSource="/Images/school32.png"
      55:                                  ToolTipFooterTitle="Help"
      56:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      57:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      58:             </r:Ribbon.Resources>
      59:             
      60:             <r:Ribbon.QuickAccessToolBar>
      61:                 <r:RibbonQuickAccessToolBar>
      62:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}" />
      63:                     <r:RibbonButton Command="{StaticResource ResourceKey=safe}" />
      64:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}" />
      65:                 </r:RibbonQuickAccessToolBar>
      66:             </r:Ribbon.QuickAccessToolBar>
      67:             
      68:             <r:RibbonTab Label="Home">
      69:                 <r:RibbonGroup>
      70:                     <r:RibbonGroup.Command>
      71:                         <r:RibbonCommand LabelTitle="Paste"/>
      72:                     </r:RibbonGroup.Command>
      73:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
      74:                 </r:RibbonGroup>
      75:  
      76:                 <r:RibbonGroup>
      77:                     <r:RibbonGroup.Command>
      78:                         <r:RibbonCommand LabelTitle="Copy"/>
      79:                     </r:RibbonGroup.Command>
      80:                     <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
      81:                     <r:RibbonButton Command="{StaticResource ResourceKey=safe}"/>
      82:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>
      83:                 </r:RibbonGroup>
      84:  
      85:                 <r:RibbonGroup>
      86:                     <r:RibbonGroup.Command>
      87:                         <r:RibbonCommand LabelTitle="Cut"/>
      88:                     </r:RibbonGroup.Command>
      89:                     <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
      90:                     <r:RibbonTextBox/>
      91:                 </r:RibbonGroup>
      92:  
      93:             </r:RibbonTab>
      94:             
      95:             <r:RibbonTab Label="Edit">
      96:                 <r:RibbonGroup>
      97:                     <r:RibbonGroup.Command>
      98:                         <r:RibbonCommand LabelTitle="Zoom In"/>
      99:                     </r:RibbonGroup.Command>
     100:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
     101:                 </r:RibbonGroup>
     102:             </r:RibbonTab>
     103:             
     104:             <r:RibbonTab Label="View">
     105:                 <r:RibbonGroup>
     106:                     <r:RibbonGroup.Command>
     107:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
     108:                     </r:RibbonGroup.Command>
     109:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>
     110:                 </r:RibbonGroup>
     111:             </r:RibbonTab>
     112:             
     113:         </r:Ribbon>
     114:     </Grid>
     115: </Window>

    Hasil terakhir, coba kita Run (F5), dan hasilnya akan seperti gambar dibawah ini :

    QuickAccessToolBar

    Ya, sampai disini kita sudah bisa menambahkan sebuah QuickAccessToolBar dengan beberapa Controlnya. Nah, mudah bukan? pada tutorial selanjutnya akan diajarkan bagaimana menambahkan ApplicationMenuItem pada Menu Ribbon tersebut. Nah, jadi tunggu yah tutorial selanjutnya. SEMANGAT! Senyum dengan mulut terbuka

  • Tutorial RibbonControlsLibrary Part 5

    Pada tutorial sebelumnya, kita sudah bisa menambahkan Ribbon dan menambahkan beberapa Control yang ada pada Ribbon tersebut. Nah, kali ini kita akan belajar bagaimana menambahkan gambar pada setiap masing-masing RibbonButton beserta Event Handler.

    Sebelum lebih lanjut, bagi yang belum mengikuti langkah-langkah sebelumnya bisa melihatnya disini :

    Tutorial RibbonControlsLibrary Part 1

    Tutorial RibbonControlsLibrary Part 2

    Tutorial RibbonControlsLibrary Part 3

    Tutorial RibbonControlsLibrary Part 4

    Kali ini, karena kita akan menambahkan beberapa gambar pada tiap RibbonButton, harap siapkan beberapa gambar dengan format .png, misalnya saya menyiapkan 4 buah gambar dengan format .png yang saya simpan pada direktori D:\Ribbon\images

    prepareImages

    *maaf mengenai gambar seadanya, mengingat ini hanya demo. Yang terpenting kan konsepnya.. Senyum dengan lidah terjulur

    Ubah ukuran gambar-gambar tersebut menjadi 32x32 pixel dan 16x16 pixel. Ini nanti akan digunakan sebagai images standar dalam RibbonButton. Karena nanti akan ada 2 Properties yaitu LargeImages dan SmallImages. Jika sudah dirubah beri nama untuk menandai gambar-gambarnya. Contohnya seperti gambar dibawah ini :

    prepareImages2

    Selanjutnya, buat folder baru dalam project kita, beri nama images, dan tambahkan gambar-gambar tadi yang sudah kita persiapkan sebelumnya. Caranya klik kanan pada project –> Add –> New Folder

    addFolder

    Setelah foldernya telah ada, klik masukan gambarnya kedalam project, caranya klik kanan pada folder yang tadi kita buat –> Add –> Existing Item…

    additem

    Cari dimana lokasi gambarnya, pilih semua gambarnya, lalu klik Add. Hasilnya akan seperti gambar dibawah ini.

    hasiladd

    Setelah itu Build Project atau dengan menekan CTRL + SHIFT + B. Yang harus kita lakukan adalah kita akan membuat sebuah resource pada code xaml nya sehingga nanti semua command akan dikumpulkan pada resource tadi. Untuk lebih memudahkannya silahkan ikuti langkah berikut.

    Tambahkan code XAML seperti dibawah ini pada Tag Ribbon diatas Tag RibbonTab.

       1: <r:Ribbon.Resources>
       2:                 
       3: </r:Ribbon.Resources>

    Code keseluruhannya akan menjadi seperi ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             
       9:             <r:Ribbon.Resources>
      10:                 
      11:             </r:Ribbon.Resources>
      12:             
      13:             <r:RibbonTab Label="Home">
      14:                 <r:RibbonGroup>
      15:                     <r:RibbonGroup.Command>
      16:                         <r:RibbonCommand LabelTitle="Paste"/>
      17:                     </r:RibbonGroup.Command>
      18:                     <r:RibbonButton/>
      19:                 </r:RibbonGroup>
      20:  
      21:                 <r:RibbonGroup>
      22:                     <r:RibbonGroup.Command>
      23:                         <r:RibbonCommand LabelTitle="Copy"/>
      24:                     </r:RibbonGroup.Command>
      25:                     <r:RibbonButton/>
      26:                     <r:RibbonButton/>
      27:                     <r:RibbonButton/>
      28:                 </r:RibbonGroup>
      29:  
      30:                 <r:RibbonGroup>
      31:                     <r:RibbonGroup.Command>
      32:                         <r:RibbonCommand LabelTitle="Cut"/>
      33:                     </r:RibbonGroup.Command>
      34:                     <r:RibbonButton/>
      35:                     <r:RibbonTextBox/>
      36:                 </r:RibbonGroup>
      37:  
      38:             </r:RibbonTab>
      39:             
      40:             <r:RibbonTab Label="Edit">
      41:                 <r:RibbonGroup>
      42:                     <r:RibbonGroup.Command>
      43:                         <r:RibbonCommand LabelTitle="Zoom In"/>
      44:                     </r:RibbonGroup.Command>
      45:                     <r:RibbonButton/>
      46:                 </r:RibbonGroup>
      47:             </r:RibbonTab>
      48:             
      49:             <r:RibbonTab Label="View">
      50:                 <r:RibbonGroup>
      51:                     <r:RibbonGroup.Command>
      52:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
      53:                     </r:RibbonGroup.Command>
      54:                     <r:RibbonButton/>
      55:                 </r:RibbonGroup>
      56:             </r:RibbonTab>
      57:             
      58:         </r:Ribbon>
      59:     </Grid>
      60: </Window>

    Nah, selanjutnya coba tambahkan code seperti dibawah ini diantara Tag Ribbon.Resource tadi :

       1: <r:RibbonCommand x:Key="green"
       2:                  Executed="cmd_green"
       3:                  LabelTitle="Green"
       4:                  LabelDescription="Ini adalah Green"
       5:                  LargeImageSource="/images/green32.png"
       6:                  SmallImageSource="/images/green16.png"
       7:                  ToolTipTitle="Green"
       8:                  ToolTipDescription="Ini adalah Green"
       9:                  ToolTipImageSource="/Images/green32.png"
      10:                  ToolTipFooterTitle="Help"
      11:                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      12:                  ToolTipFooterImageSource="/images/safe16.png"/>

    Untuk menambahkan Event Handler nya tinggal kita klik kanan nama pada Executed, –> Navigate to Event Handler

    event handler

    Pada RibbonCommand tadi ada properties yaitu :

    1. x:name = merupakan nama dari RibbonCommand nya yang nantinya bisa kita panggil
    2. Executed = untuk mengeksekusi code yang akan disisipkan pada event handler nya
    3. LabelTitle = Nama judul gambarnya
    4. LabelDescription = keterangan dari nama judul
    5. LargeImageSource = tempat gambar besar berada
    6. SmallImageSource = tempat gambar kecil berada
    7. ToolTipTitle = judul dari ToolTip
    8. ToolTipDescription = penjelasan dari judul ToolTip
    9. ToolTipImageSource = tempat gambar untuk ToolTip
    10. ToolTipFooterTitle = judul untuk footer dari sebuah ToolTip
    11. ToolTipFooterDescription = keterangan judul pada ToolTipFooter
    12. ToolTipFooterImageSource = tempat gambar untuk footer pada ToolTip

    Nah, sebenarnya memang tidak harus semuanya diisi, akan tetapi lebih baik diisi sehingga tampilan aplikasi kita bisa menjadi lebih user friendly pada si pengguna. Nah, selanjutnya kita akan coba panggil Command tadi oleh si RibbonButton. Caranya pada RibbonButton tambahkan code berikut :

       1: <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>

    Sehingga secara keseluruhan code akan nampak seperti ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             
       9:             <r:Ribbon.Resources>
      10:                 <r:RibbonCommand x:Key="green"
      11:                                  Executed="cmd_green"
      12:                                  LabelTitle="Green"
      13:                                  LabelDescription="Ini adalah Green"
      14:                                  LargeImageSource="/images/green32.png"
      15:                                  SmallImageSource="/images/green16.png"
      16:                                  ToolTipTitle="Green"
      17:                                  ToolTipDescription="Ini adalah Green"
      18:                                  ToolTipImageSource="/Images/green32.png"
      19:                                  ToolTipFooterTitle="Help"
      20:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      21:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      22:             </r:Ribbon.Resources>
      23:             
      24:             <r:RibbonTab Label="Home">
      25:                 <r:RibbonGroup>
      26:                     <r:RibbonGroup.Command>
      27:                         <r:RibbonCommand LabelTitle="Paste"/>
      28:                     </r:RibbonGroup.Command>
      29:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
      30:                 </r:RibbonGroup>
      31:  
      32:                 <r:RibbonGroup>
      33:                     <r:RibbonGroup.Command>
      34:                         <r:RibbonCommand LabelTitle="Copy"/>
      35:                     </r:RibbonGroup.Command>
      36:                     <r:RibbonButton/>
      37:                     <r:RibbonButton/>
      38:                     <r:RibbonButton/>
      39:                 </r:RibbonGroup>
      40:  
      41:                 <r:RibbonGroup>
      42:                     <r:RibbonGroup.Command>
      43:                         <r:RibbonCommand LabelTitle="Cut"/>
      44:                     </r:RibbonGroup.Command>
      45:                     <r:RibbonButton/>
      46:                     <r:RibbonTextBox/>
      47:                 </r:RibbonGroup>
      48:  
      49:             </r:RibbonTab>
      50:             
      51:             <r:RibbonTab Label="Edit">
      52:                 <r:RibbonGroup>
      53:                     <r:RibbonGroup.Command>
      54:                         <r:RibbonCommand LabelTitle="Zoom In"/>
      55:                     </r:RibbonGroup.Command>
      56:                     <r:RibbonButton/>
      57:                 </r:RibbonGroup>
      58:             </r:RibbonTab>
      59:             
      60:             <r:RibbonTab Label="View">
      61:                 <r:RibbonGroup>
      62:                     <r:RibbonGroup.Command>
      63:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
      64:                     </r:RibbonGroup.Command>
      65:                     <r:RibbonButton/>
      66:                 </r:RibbonGroup>
      67:             </r:RibbonTab>
      68:             
      69:         </r:Ribbon>
      70:     </Grid>
      71: </Window>

    Coba kita Run (F5), hasilnya seperti gambar dibawah ini :

    debug

    Nah, kali ini sepertinya belum berhasil. Masih ada yang sedikit salah seperti gambar diatas, bagian ToolTipnya berada dibawah. Caranya agar berada diatas dekat dengan RibbonButton nya adalah coba tambahkan code berikut pada Tag Ribbon :

       1: Height="150" VerticalAlignment="Top"

    Sehingga code keseluruhannya akan nampak seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo" Height="150" VerticalAlignment="Top">
       8:             
       9:             <r:Ribbon.Resources>
      10:                 <r:RibbonCommand x:Key="green"
      11:                                  Executed="cmd_green"
      12:                                  LabelTitle="Green"
      13:                                  LabelDescription="Ini adalah Green"
      14:                                  LargeImageSource="/images/green32.png"
      15:                                  SmallImageSource="/images/green16.png"
      16:                                  ToolTipTitle="Green"
      17:                                  ToolTipDescription="Ini adalah Green"
      18:                                  ToolTipImageSource="/Images/green32.png"
      19:                                  ToolTipFooterTitle="Help"
      20:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      21:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      22:             </r:Ribbon.Resources>
      23:             
      24:             <r:RibbonTab Label="Home">
      25:                 <r:RibbonGroup>
      26:                     <r:RibbonGroup.Command>
      27:                         <r:RibbonCommand LabelTitle="Paste"/>
      28:                     </r:RibbonGroup.Command>
      29:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
      30:                 </r:RibbonGroup>
      31:  
      32:                 <r:RibbonGroup>
      33:                     <r:RibbonGroup.Command>
      34:                         <r:RibbonCommand LabelTitle="Copy"/>
      35:                     </r:RibbonGroup.Command>
      36:                     <r:RibbonButton/>
      37:                     <r:RibbonButton/>
      38:                     <r:RibbonButton/>
      39:                 </r:RibbonGroup>
      40:  
      41:                 <r:RibbonGroup>
      42:                     <r:RibbonGroup.Command>
      43:                         <r:RibbonCommand LabelTitle="Cut"/>
      44:                     </r:RibbonGroup.Command>
      45:                     <r:RibbonButton/>
      46:                     <r:RibbonTextBox/>
      47:                 </r:RibbonGroup>
      48:  
      49:             </r:RibbonTab>
      50:             
      51:             <r:RibbonTab Label="Edit">
      52:                 <r:RibbonGroup>
      53:                     <r:RibbonGroup.Command>
      54:                         <r:RibbonCommand LabelTitle="Zoom In"/>
      55:                     </r:RibbonGroup.Command>
      56:                     <r:RibbonButton/>
      57:                 </r:RibbonGroup>
      58:             </r:RibbonTab>
      59:             
      60:             <r:RibbonTab Label="View">
      61:                 <r:RibbonGroup>
      62:                     <r:RibbonGroup.Command>
      63:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
      64:                     </r:RibbonGroup.Command>
      65:                     <r:RibbonButton/>
      66:                 </r:RibbonGroup>
      67:             </r:RibbonTab>
      68:             
      69:         </r:Ribbon>
      70:     </Grid>
      71: </Window>

    Nah, baru kali ini kita coba Run (F5) kembali, hasilnya seperti gambar dibawah ini :

    debug2

    Yes, sepertinya sudah berhasil. Nah, coba tambahkan beberapa RibbonCommand yang lain, misalnya tambahkan saja Code berikut :

       1: <r:RibbonCommand x:Key="interact"
       2:                  Executed="cmd_interact"
       3:                  LabelTitle="Interact"
       4:                  LabelDescription="Ini adalah Interact"
       5:                  LargeImageSource="/images/interact32.png"
       6:                  SmallImageSource="/images/interact16.png"
       7:                  ToolTipTitle="Interact"
       8:                  ToolTipDescription="Ini adalah Interact"
       9:                  ToolTipImageSource="/Images/interact32.png"
      10:                  ToolTipFooterTitle="Help"
      11:                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      12:                  ToolTipFooterImageSource="/images/safe16.png"/>
      13: <r:RibbonCommand x:Key="safe"
      14:                  Executed="cmd_safe"
      15:                  LabelTitle="Safe"
      16:                  LabelDescription="Ini adalah Safe"
      17:                  LargeImageSource="/images/safe32.png"
      18:                  SmallImageSource="/images/safe16.png"
      19:                  ToolTipTitle="Safe"
      20:                  ToolTipDescription="Ini adalah Safe"
      21:                  ToolTipImageSource="/Images/safe32.png"
      22:                  ToolTipFooterTitle="Help"
      23:                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      24:                  ToolTipFooterImageSource="/images/safe16.png"/>
      25: <r:RibbonCommand x:Key="school"
      26:                  Executed="cmd_school"
      27:                  LabelTitle="School"
      28:                  LabelDescription="Ini adalah School"
      29:                  LargeImageSource="/images/school32.png"
      30:                  SmallImageSource="/images/school16.png"
      31:                  ToolTipTitle="School"
      32:                  ToolTipDescription="Ini adalah School"
      33:                  ToolTipImageSource="/Images/school32.png"
      34:                  ToolTipFooterTitle="Help"
      35:                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      36:                  ToolTipFooterImageSource="/images/safe16.png"/>

    Baru kita coba panggil dari tiap-tiap RibbonButton, coba saja tambahkan. Contohnya seperti ini :

       1: <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
       2: <r:RibbonButton Command="{StaticResource ResourceKey=safe}"/>
       3: <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>

    Sehingga code keseluruhannya menjadi seperti ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo" Height="150" VerticalAlignment="Top">
       8:             
       9:             <r:Ribbon.Resources>
      10:                 <r:RibbonCommand x:Key="green"
      11:                                  Executed="cmd_green"
      12:                                  LabelTitle="Green"
      13:                                  LabelDescription="Ini adalah Green"
      14:                                  LargeImageSource="/images/green32.png"
      15:                                  SmallImageSource="/images/green16.png"
      16:                                  ToolTipTitle="Green"
      17:                                  ToolTipDescription="Ini adalah Green"
      18:                                  ToolTipImageSource="/Images/green32.png"
      19:                                  ToolTipFooterTitle="Help"
      20:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      21:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      22:                 <r:RibbonCommand x:Key="interact"
      23:                                  Executed="cmd_interact"
      24:                                  LabelTitle="Interact"
      25:                                  LabelDescription="Ini adalah Interact"
      26:                                  LargeImageSource="/images/interact32.png"
      27:                                  SmallImageSource="/images/interact16.png"
      28:                                  ToolTipTitle="Interact"
      29:                                  ToolTipDescription="Ini adalah Interact"
      30:                                  ToolTipImageSource="/Images/interact32.png"
      31:                                  ToolTipFooterTitle="Help"
      32:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      33:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      34:                 <r:RibbonCommand x:Key="safe"
      35:                                  Executed="cmd_safe"
      36:                                  LabelTitle="Safe"
      37:                                  LabelDescription="Ini adalah Safe"
      38:                                  LargeImageSource="/images/safe32.png"
      39:                                  SmallImageSource="/images/safe16.png"
      40:                                  ToolTipTitle="Safe"
      41:                                  ToolTipDescription="Ini adalah Safe"
      42:                                  ToolTipImageSource="/Images/safe32.png"
      43:                                  ToolTipFooterTitle="Help"
      44:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      45:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      46:                 <r:RibbonCommand x:Key="school"
      47:                                  Executed="cmd_school"
      48:                                  LabelTitle="School"
      49:                                  LabelDescription="Ini adalah School"
      50:                                  LargeImageSource="/images/school32.png"
      51:                                  SmallImageSource="/images/school16.png"
      52:                                  ToolTipTitle="School"
      53:                                  ToolTipDescription="Ini adalah School"
      54:                                  ToolTipImageSource="/Images/school32.png"
      55:                                  ToolTipFooterTitle="Help"
      56:                                  ToolTipFooterDescription="Untuk bantuan tekan F12"
      57:                                  ToolTipFooterImageSource="/images/safe16.png"/>
      58:             </r:Ribbon.Resources>
      59:             
      60:             <r:RibbonTab Label="Home">
      61:                 <r:RibbonGroup>
      62:                     <r:RibbonGroup.Command>
      63:                         <r:RibbonCommand LabelTitle="Paste"/>
      64:                     </r:RibbonGroup.Command>
      65:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
      66:                 </r:RibbonGroup>
      67:  
      68:                 <r:RibbonGroup>
      69:                     <r:RibbonGroup.Command>
      70:                         <r:RibbonCommand LabelTitle="Copy"/>
      71:                     </r:RibbonGroup.Command>
      72:                     <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
      73:                     <r:RibbonButton Command="{StaticResource ResourceKey=safe}"/>
      74:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>
      75:                 </r:RibbonGroup>
      76:  
      77:                 <r:RibbonGroup>
      78:                     <r:RibbonGroup.Command>
      79:                         <r:RibbonCommand LabelTitle="Cut"/>
      80:                     </r:RibbonGroup.Command>
      81:                     <r:RibbonButton Command="{StaticResource ResourceKey=interact}"/>
      82:                     <r:RibbonTextBox/>
      83:                 </r:RibbonGroup>
      84:  
      85:             </r:RibbonTab>
      86:             
      87:             <r:RibbonTab Label="Edit">
      88:                 <r:RibbonGroup>
      89:                     <r:RibbonGroup.Command>
      90:                         <r:RibbonCommand LabelTitle="Zoom In"/>
      91:                     </r:RibbonGroup.Command>
      92:                     <r:RibbonButton Command="{StaticResource ResourceKey=green}"/>
      93:                 </r:RibbonGroup>
      94:             </r:RibbonTab>
      95:             
      96:             <r:RibbonTab Label="View">
      97:                 <r:RibbonGroup>
      98:                     <r:RibbonGroup.Command>
      99:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
     100:                     </r:RibbonGroup.Command>
     101:                     <r:RibbonButton Command="{StaticResource ResourceKey=school}"/>
     102:                 </r:RibbonGroup>
     103:             </r:RibbonTab>
     104:             
     105:         </r:Ribbon>
     106:     </Grid>
     107: </Window>

    Coba kita Run (F5) dan lihat hasilnya akan menjadi seperti gambar dibawah ini :

    debugfin

    Untuk mencoba memberikan coding silahkan coba pada salah satu Event Handler yang tadi dibuat, misalnya pada Event Handler cmd_green coba tambahkan code C# berikut :

       1: private void cmd_green(object sender, ExecutedRoutedEventArgs e)
       2: {
       3:     MessageBox.Show("Berhasil membuat Ribbon", "Sukses",MessageBoxButton.OK,MessageBoxImage.Information);
       4: }

    Silahkan tes sendiri hasilnya.. Senyum

    Nah, sampai sini kita sudah bisa membuat sebuah Ribbon dengan memiliki Control dan gambar dari Control itu sendiri serta menambahkan Event Handler. Pada tutorial selanjutnya kita akan membuat sebuah QuickAccessToolbar. Ditunggu yah part selanjutnya. SEMANGAT! Senyum dengan mulut terbuka

  • Tutorial RibbonControlsLibrary Part 4

    Pada tutorial keempat ini, kita akan belajar mengenai cara menambahkan beberapa Control yang ada pada Ribbon tersebut. Ribbon memiliki beberapa Control seperti RibbonButton, RibbonComboBox, RibbonCheckBox, dll. Nah, kali ini kita akan menambahkan Control tersebut pada Ribbon yang sudah kita buat.

    Bagi yang belum menambahkan Tab pada Ribbon bisa melihat postingan yang sebelumnya :

    Tutorial RibbonControlsLibrary Part 1

    Tutorial RibbonControlsLibrary Part 2

    Tutorial RibbonControlsLibrary Part 3

    Yang harus diperhatikan adalah sebuah Control tidak dapat ditambahkan begitu saja pada Ribbon yang sudah kita buat. Sebuah Control harus berada pada sebuah group. Sehingga sebuah Control harus dikelompokan oleh sebuah group. Kali ini kita akan coba menambahkan beberapa RibbonButton dan beberapa RibbonGroup yang akan menjadi pengelompoknya.

    Bila kita sudah membuat Ribbon Tab, maka langkah selanjutnya adalah menambahkan RibbonGroup terlebih dahulu agar nanti RibbonButton nya dapat ditambahkan dengan mudah. Caranya tambahkan code berikut pada XAML nya diantara Ribbon Tab :

       1: <r:RibbonGroup>
       2:     <r:RibbonGroup.Command>
       3:         <r:RibbonCommand LabelTitle="Paste"/>
       4:     </r:RibbonGroup.Command>
       5:                     
       6: </r:RibbonGroup>

    Maka, akan ada sebuah RibbonGroup dengan tulisannya adalah Paste, Eits, jangan dulu di Run nanti akan Error, karena pada RibbonGroup tersebut tidak ada Control yang ditambahkan. Untuk menambahkan Control tersebut, tambahkan code berikut diantara RibbonGroup :

       1: <r:RibbonButton/>

    Secara keseluruhan code akan nampak seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             
       9:             <r:RibbonTab Label="Home">
      10:                 <r:RibbonGroup>
      11:                     <r:RibbonGroup.Command>
      12:                         <r:RibbonCommand LabelTitle="Paste"/>
      13:                     </r:RibbonGroup.Command>
      14:                     <r:RibbonButton/>
      15:                 </r:RibbonGroup>
      16:             </r:RibbonTab>
      17:             
      18:             <r:RibbonTab Label="Edit">
      19:                 
      20:             </r:RibbonTab>
      21:             
      22:             <r:RibbonTab Label="View">
      23:                 
      24:             </r:RibbonTab>
      25:             
      26:         </r:Ribbon>
      27:     </Grid>
      28: </Window>

    Saatnya Run.. hasilnya akan seperti gambar dibawah ini :

    RibbonButton1

    Lingkarang merah menunjukan merupakan sebuah RibbonButton yang sudah kita tambahkan tadi. Nah, kita coba dengan menambahkan beberapa RibbonButton dan RibbonGroup. Misalnya nanti code nya akan seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             
       9:             <r:RibbonTab Label="Home">
      10:                 <r:RibbonGroup>
      11:                     <r:RibbonGroup.Command>
      12:                         <r:RibbonCommand LabelTitle="Paste"/>
      13:                     </r:RibbonGroup.Command>
      14:                     <r:RibbonButton/>
      15:                 </r:RibbonGroup>
      16:  
      17:                 <r:RibbonGroup>
      18:                     <r:RibbonGroup.Command>
      19:                         <r:RibbonCommand LabelTitle="Copy"/>
      20:                     </r:RibbonGroup.Command>
      21:                     <r:RibbonButton/>
      22:                     <r:RibbonButton/>
      23:                     <r:RibbonButton/>
      24:                 </r:RibbonGroup>
      25:  
      26:                 <r:RibbonGroup>
      27:                     <r:RibbonGroup.Command>
      28:                         <r:RibbonCommand LabelTitle="Cut"/>
      29:                     </r:RibbonGroup.Command>
      30:                     <r:RibbonButton/>
      31:                     <r:RibbonTextBox/>
      32:                 </r:RibbonGroup>
      33:  
      34:             </r:RibbonTab>
      35:             
      36:             <r:RibbonTab Label="Edit">
      37:                 <r:RibbonGroup>
      38:                     <r:RibbonGroup.Command>
      39:                         <r:RibbonCommand LabelTitle="Zoom In"/>
      40:                     </r:RibbonGroup.Command>
      41:                     <r:RibbonButton/>
      42:                 </r:RibbonGroup>
      43:             </r:RibbonTab>
      44:             
      45:             <r:RibbonTab Label="View">
      46:                 <r:RibbonGroup>
      47:                     <r:RibbonGroup.Command>
      48:                         <r:RibbonCommand LabelTitle="Zoom Out"/>
      49:                     </r:RibbonGroup.Command>
      50:                     <r:RibbonButton/>
      51:                 </r:RibbonGroup>
      52:             </r:RibbonTab>
      53:             
      54:         </r:Ribbon>
      55:     </Grid>
      56: </Window>

    Jika kit Run, hasilnya akan seperti gambar dibawah ini :

    RibbonButtonFin

    OK, sampai disini, kita sudah bisa menambahkan beberapa control pada Ribbon kita. Nah, tutorial selanjutnya adalah bagaimana caranya agar setiap RibbonButton mempunyai Icon/gambar tersendiri. Tunggu part selanjutnya yah! SEMANGAT!! Senyum dengan mulut terbuka

  • Tutorial RibbonControlsLibrary Part 3

    Pada tutorial sebelumnya, kita sudah bisa menambahkan sebuah Ribbon pada aplikasi yang kita buat. Nah, kali ini kita akan belajar mengenai Ribbon Tab. Karena setiap Ribbon pasti memiliki Tab yang nantinya akan menjadi seperi katagori dalam pengelompokan beberapa kontrol dari Ribbon tersebut, seperti RibbonButton, RibbonComboBox, RibbonCheckBox, dll.

    Kali ini, kita akan membuat beberapa Tab, tapi sebelum kesana bagi yang belum menambahkan Ribbon silahkan dapat dilihat postingan sebelumnya :

    Tutorial RibbonControlsLibrary Part 1

    Tutorial RibbonControlsLibrary Part 2

    Kita lanjutkan pembahasan sesuai tutorial yang sebelumnya. Jika sudah bisa menambahkan sebuah Ribbon, maka saatnya kita menambahkan sebuah Tab. Cara yang paling mudah adalah tambahkan code berikut pada XAML nya diantara Tag Ribbon :

       1: <r:RibbonTab Label="Home">
       2:                 
       3: </r:RibbonTab>

    Sehingga code keseluruhannya akan nampak seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             <r:RibbonTab Label="Home">
       9:                 
      10:             </r:RibbonTab>
      11:         </r:Ribbon>
      12:     </Grid>
      13: </Window>

    Coba kita Debugging atau dengan menekan F5 dan hasilnya seperti gambar dibawah ini :

    RibbonTabHasil1

    Jika kita ingin menambahkan Ribbon Tab yang lain, maka tambahkan persis seperti kita menambahkan Ribbon Tab yang tadi. Misal kita akan menambahkan 2 buah Ribbon Tab. Tambahkan Code berikut diantara Tag Ribbon dan dibawah RibbonTab Home :

       1: <r:RibbonTab Label="Edit">
       2:                 
       3: </r:RibbonTab>
       4:             
       5: <r:RibbonTab Label="View">
       6:                 
       7: </r:RibbonTab>

    Keseluruhan code seperti dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             
       9:             <r:RibbonTab Label="Home">
      10:                 
      11:             </r:RibbonTab>
      12:             
      13:             <r:RibbonTab Label="Edit">
      14:                 
      15:             </r:RibbonTab>
      16:             
      17:             <r:RibbonTab Label="View">
      18:                 
      19:             </r:RibbonTab>
      20:             
      21:         </r:Ribbon>
      22:     </Grid>
      23: </Window>

    Kalau kita Run, maka akan seperti gambar dibawah ini :

    RibbonTabHasilFin

    Ya, sampai sini kita sudah bisa menambahkan sebuah Tab pada Ribbon. Pada part selanjutnya kita akan belajar bagaimana menambahkan sebuah Control dari Ribbon tersebut dengan dikelompokan oleh RibbbonGroup. Di tunggu yah tutorial selanjutnya.. SEMANGAT! Senyum dengan mulut terbuka

  • Tutorial RibbonControlsLibrary Part 2

    Kali ini, pada tutorial part 2, saya akan tunjukan bagaimana caranya agar kita memasang Ribbon pada aplikasi WPF yang akan kita buat. Tapi, sebelum kesana Anda harus mempersiapkan Library nya terlebih dahulu, seperti pada postingan sebelumnya.

    Tutorial RibbonControlsLibrary Part 1

    Sesudah kita download RibbonControlsLibrary nya yang berbentuk .dll, kita simpan dalam suuatu direktori. Misalnya D:\Ribbon

    direktori

    Setelah itu, kita buka Visual Studio 2010, New Project –> WPF Application. Beri nama Project tersebut RibbonDemo, lalu klik OK

    new project

    Jika kita menginstal Microsoft Ribbon for WPF October 2010 maka secara otomatis akan ada project template yang sudah disediakan dibawah WPF Application Project. Nah, mengenai itu, sudah ada template nya sehingga lebih mudah. Kali ini, kita akan membuat Ribbonnya dari nol. Sehingga yang dipilih adalah WPF Application Project.

    Sesudah projectnya dibuatkan oleh Visual Studio 2010, kita bisa langsung melakukan reference ke RibbonControlsLibrary tadi yang kita download agar bisa kita gunakan. Caranya adalah klik kanan pada References –> Add References…

    add references

    Pilih Browse –> Cari, dimana tadi kita menyimpan .dll tadi. Misal kita tadi menyimpan di D:\Ribbon, pilih RibbonControlsLibrary.dll, klik OK.

    references dll

    Pastikan dalam kumpulan references terdapat RibbonControlsLibrary

    cek ribbon

    Sesudah RibbonControlsLibrary tadi sudah ter-references dengan baik, saatnya kita tambahkan pada XAML nya. Caranya tambahkan code berikut pada tag Window.

       1: xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       2:  

    Jadinya akan seperti code dibawah ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         
       8:     </Grid>
       9: </Window>

    Nah, sesudah itu, coba Build Project dengan menekan CTRL + SHIFT + B. Kali ini kita akan mencoba menambahkan sebuah Ribbon pada aplikasi kita. Caranya adalah tambahkan Code berikut diantara Tag Grid.

       1: <r:Ribbon Title="Ribbon Demo">
       2:             
       3: </r:Ribbon>

    Sehingga secara keseluruhannya akan menjadi seperti ini :

       1: <Window x:Class="RibbonDemo.MainWindow"
       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       3:         xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
       4:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       5:         Title="MainWindow" Height="350" Width="525">
       6:     <Grid>
       7:         <r:Ribbon Title="Ribbon Demo">
       8:             
       9:         </r:Ribbon>
      10:     </Grid>
      11: </Window>

    Coba Start Debugging atau dengan menekan F5 dan hasilnya seperti gambar dibawah ini :

    ribbonapp

    Sampai disini, kita sudah berhasil menambahkan Ribbon pada aplikasi WPF kita. Nah, pada part selanjutnya akan dipraktekan bagaimana cara menambahkan Tab Ribbon. Tunggu yah Part selanjutnya Senyum dengan mulut terbuka. SEMANGAT!!

  • Tutorial RibbonControlsLibrary Part 1

    Microsoft Office 2007 pasti tidak asing lagi di telinga kita. Dengan User Interface yang khasnya yaitu Ribbon. Sehingga Microsoft Office 2007 dapat dengan mudah digunakan oleh pengguna, bahkan oleh orang yang sedang belajar sekalipun karena user interface yang sangat user friendly. Nah, pertanyaanya adalah apakah kita bisa membuat aplikasi yang mempunyai tampilan seperti Microsoft Office 2007? Memiliki Ribbon? Jawabannya adalah BISA! Senyum dengan mulut terbuka

    Dengan menggunakan RibbonControlsLibrary kita dimungkinkan untuk membuat suatu aplikasi yang mempunyai Ribbon di dalamnya. Seperti aplikasi yang sudah saya buat sebelumnya yaitu aReader.

    Kali ini, saya akan membuat tutorial bagaimana cara membuat Ribbon tersebut dalam aplikasi yang akan kita buat. Mungkin akan ada beberapa part. Hal yang harus kita persiapkan adalah :

    1. RibbonControlsLibrary
    2. Microsoft Visual Studio 2010
    3. *Microsoft Expression Blend 4

    Untuk Microsoft Expression Blend 4 itu optional, karena akan dipraktekan pada Microsoft Visual Studio 2010, Blend hanya untuk tambahan saja jika ingin menjadikan tampilannya lebih bagus dan tata letaknya lebih mudah di tata.

    Mengenai RibbonControlsLibrary, sekarang sudah release RibbonControlLibrary yang baru yang dapat di download disini. Tapi, karena pada RibbonControlsLibrary tersebut tidak ada RibbonCommand, walaupun sebenarnya menjadi lebih mudah seperti pemrograman WPF seperti biasanya. Akan tetapi akan lebih mudah jika semua RibbonCommand nya di kolektifkan pada RibbonResource. Untuk lebih mengertinya silahkan download RibbonControlsLibrary yang akan saya pakai disini.

    Nah, sesudah membuka http://msdn.microsoft.com/id-ID/office/aa973809.aspx , silahkan langsung klik link License the Office UI di paling bawah.

    Download Ribbon1

    Selanjutnya kita akan disuguhkan pada login page.. silahkan login dengan Windows Live ID atau akun MSN Hotmail, MSN Messenger atau Passport.

    Download Ribbon2

    Terakhir, kita langsung dapat mendownload RibbonControlsLibrary tersebut. Anda bisa juga download Design Guidelines nya.

    Download Ribbon3

    Nah, kalau sudah di download, harap disimpan, karena pada tutorial selanjutnya kita akan menggunakan RibbonControlsLibrary tadi pada project WPF kita. Oh ya, RibbonControlLibrary ini dapat digunakan pada WPF (Windows Presentation Foundation), sehingga tutorial saya akan menggunakan WPF Project pada Visual Studio 2010.

    Nah, jadi tunggu saja part 2 setelah ini. SEMANGAT! Senyum

  • Release aReader v1.0.0.0

    Di dalam Windows, ada format dokumen mirip dengan PDF, namanya XPS singkatan dari XML Paper Specification. XPS menggambarkan sebuah kertas elektronik, sangat mirip dengan dokumen PDF.

    aReader Wallpaper

    Kali ini saya mencoba membuat sebuah aplikasi untuk membaca dokumen XPS. Aplikasi ini dibuat dengan teknologi WPF (Windows Presentation Foundation) dengan target .NET Framework 3.5. Aplikasi ini sangat simple dan “cupu”. Saya menggunakan Ribbon Controls Library dalam pembuatan menu Ribbon nya. Sehingga dapat memudahkan si pengguna aplikasi ini dalam menggunakannya. Untuk mendapatkan RibbonControlsLibrary silahkan download disini.

    Saya tidak menggunakan Ribbon Controls Library yang ini, karena Ribbon Controls Library yang itu ketika saya cari-cari tidak ada RibbonCommand. Sehingga setiap control tidak bisa di kelompokan. Pada Ribbon Controls Library ini memang menjadi lebih simpel dan sederhana, karena di setiap Control bisa langsung ditambahkan event dan event handler nya. Sehingga mirip seperti programming biasa. Jika menginstal Ribbon Controls Library yang baru, maka secara otomatis akan ada template untuk membuat aplikasi yang memiliki Ribbon pada Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 nya.

    Dalam pembuatan aplikasi ini saya me-references beberapa library diantaranya adalah :

    1. ReachFramework
    2. RibbonControlsLibrary
    3. System.Windows.Forms
    4. System.Windows.Interactivity

    Sehingga arsitekturnya menjadi terlihat seperti gambar dibawah ini :

    arsitektur aReader

    Aplikasi ini di packaging oleh aplikasi yang simpel dan freeware. Namanya Excelsior Installer, dapat di unduh disini. Tadinya memang ingin memakai OneClick yang ada di Visual Studio 2010 tapi saya coba buat yang baru. Nah, bagi pengguna Windows 7 atau Windows Vista bisa langsung di instal dan dipakai aplikasinya. Sedangkan bagi yang menggunakan Windows XP, maka terlebih dahulu .NET Framework 3.5 harus terinstal terlebih dahulu. Jika belum terinstal maka dapat mengunduhnya disini lalu instal.

    Aplikasi ini bersifat freeware, bebas digunakan dan didistribusikan. Aplikasi ini belum sempurna 100%, masih harus ada beberapa penambahan fitur dan tentunya perbaikan. Untuk itu, bagi yang ingin memberikan kritik dan saran terhadap aplikasi ini mohon mengirimkan email ke alamat : doctor.kurniawan9@gmail.com. Saya sangat mengharapkan saran-saran ataupun kritikan dari para rekan-rekan khususnya para “suhu-suhu” yang sudah sangat berpengalaman dalam men-develop sebuah aplikasi. Baik itu dari segi fitur, tampilan, maupun “spelling” nya Senyum dengan lidah terjulur.

    Bagi yang ingin mencoba aplikasi ini silahkan dapat di unduh disini.

    Semoga aplikasi ini dapat bermanfaat bagi yang lain. Jangan lupa kritik dan sarannya yah, saya TUNGGU! Senyum dengan mulut terbuka. SEMANGAT!!