I.Giới thiệu Ribbon Control
Trước khi đi sâu tìm hiểu Ribbon Control các bạn có thể thao khảo về tổng quan WPF Ribbon Control ở đây.
Sau đây mình có một hình ảnh minh hoạ cho Ribbon và môt số phần tử trong nó :
Hình 1: Ribbon Control trong ứng dụng Paint – Window7
Nếu các bạn đã từng sử dụng Office 2010 (Office 2007) và Paint trong Window7 thì Ribbon có lẽ không có gì lạ đối với các bạn. phía trên là Hình ảnh Ribbon với các phần tử tiêu biểu như:
- Office Button
- Quick Acess Toolbar
- Tab
- Contextual Tab Set
- Contextual Tab
- Group
- Dialog Box Launcher.
Ngoài các phần tử trên mình xin minh hoạ thêm một số phần tử không kém phần quan trọng :
Hình 2: Một số phần tử trọng trong Ribbon Control
II. Ribbon và các phần tử giao diện:
Chắc hẳn các bạn nếu đã đừng lập trình giao diện với Windowform hay WPF thì đề đã biết đến các phần tử giao diện trong nó, và với một Rinbbon Application sẽ hổ trợ đầy đủ những phần tử đó, giúp cho bạn tạo nên một ứng dụng đẹp mắt .
Sau đây mình có đoạn Code Minh Hoạ :
<ribbon:RibbonWindow x:Class=”WpfRibbonApplication.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:ribbon=”clrnamespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary”
Title=”MainWindow”
x:Name=”RibbonWindow”
Width=”640″ Height=”480″><Grid x:Name=”LayoutRoot”> <!- Layout Rounding–>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions><!– Ribbon Control–>
<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:RibbonApplicationMenuItem Header=”Hello _Ribbon”
x:Name=”MenuItem2″
ImageSource=”Images\LargeIcon.png”>
<ribbon:RibbonApplicationMenuItem Header=”MunuItem1.1″ ImageSource=”Images\LargeIcon.png”>
<ribbon:RibbonApplicationMenuItem Header=”MunuItem1.2″ ImageSource=”Images\LargeIcon.png” Click=”RibbonApplicationMenuItem_Click”/>
</ribbon:RibbonApplicationMenuItem>
</ribbon:RibbonApplicationMenuItem>
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name=”HomeTab”
Header=”Home”>
<ribbon:RibbonGroup x:Name=”Group1″
Header=”Group1″>
<ribbon:RibbonButton x:Name=”Button1″
LargeImageSource=”Images\LargeIcon.png”
Label=”Button1″ /><ribbon:RibbonButton x:Name=”Button2″
SmallImageSource=”Images\SmallIcon.png”
Label=”Button2″ />
<ribbon:RibbonButton x:Name=”Button3″
SmallImageSource=”Images\SmallIcon.png”
Label=”Button3″ />
<ribbon:RibbonButton x:Name=”Button4″
SmallImageSource=”Images\SmallIcon.png”
Label=”Button4″ /></ribbon:RibbonGroup></ribbon:RibbonTab>
</ribbon:Ribbon></Grid>
</ribbon:RibbonWindow>Còn đây là hình minh hoạ cho đoạn Code trên :
Các bạn thấy là tương ứng với từng thẻ phía trên có bấy nhiêu phần tử giao diện đc thể hiện trên Ribbon Control.
Mình xin giải thích kỹ hơn một tí về từng đoạn Code :
- Cả đoạn Code trên hiển thị ra giao diện một Menu và trong Menu đó có 2 MenuItem và trong MenuItem thứ 2 lại có thêm 2 MenuItem con trong nó ! Ngoài ra nó còn hiển thị một Tab Home, trong Tab có 1 Group và trong Group chứa 4 Button như hình Minh Hoạ
- Tạo một Ribbon Application Menu : <ribbon:RibbonApplicationMenu /> trong thẻ này thuộc tính SmallImageSource=”Link_Image” dùng để thể hiện Hình của Application Menu
- Tạo một Menu Item: <ribbon:RibbonApplicationMenuItem /> trong thẻ này thuộc tính Header=”Name” thể hiện tên của MenuItem. Ngoài ra trong một MenuItem có thể có nhiều MenuItem khác, thuộc tính ImageSource=”Link_Hình” để hiển thị Hình ảnh tương ứng
- Tạo mới một Tab :<ribbon:RibbonTab/> Cũng tương tự với Ribbon Application menu Tab cũng sử dụng thuộc tính Header=”Tên Tab” để hiển thị tên Tab
- Tạo mới một Group: <ribbon:RibbonGroup/> Group dùng để gom nhóm các Control trong Ribbon như hình phía trên. về mặt hiển thị tên thì Group cũng sử dụng Header= “name”
- Tạo mới một Button: <ribbon:RibbonButton/> Về việc tạo mới thì các Control trong Ribbon tương tự nhau. và các thuộc tính cũng vậy, ở Button các bạn dùng thuộc tính Label=”Name”để hiển thị tên Button. ngoài ra LargeImageSource=”Images\LargeIcon.png” để hiển thị hình ảnh cho Button lớn trên Ribbon. tương tự với Button nhỏ khi bạn sử dụng SmallImageSource=”Images\SmallIcon.png” .
- Ngoài các Control phía trên bạn có thể dể dàng thêm các Control khác và những thao tác cho các Control đó một cách hết sức đơn giản (Textbox. checkBox. GradioButton ………)
- Về mặt tạo sự kiện cho các Control các bạn chỉ cần Khai báo tên Sự Kiên ngay trong XAML tuương ứng VD : Click = “TenControl_Click”
Với Việc tuỳ chỉnh Code XAML các bạn có thể nhanh chóng tạo ra ứng dụng với giao diện đẹp mắt sử Dụng Ribbon Control
Pham Nguyen 