Trước kia, muốn thiết kế giao diện Ribbon giống như MS Office thì quả thực rất là phiền. Từ phiên bản VS Studio 2012 - Net Framework 4.5, WPF đã hỗ trợ thiết kế Ribbon bằng XAML vô cùng đơn giản !
Chúng ta sẽ làm thử nhé . . .




1. Newproject WPF Application

- Để vẽ giao diện Ribbon cần add namespace sau:
using System.Windows.Controls.Ribbon;

- Phần Ribbon chính, có thể thiết kế trên MainWindow.xaml hoặc tạo file mới.
- Phần khung chức năng  con thì ta tạo mới: Add new -> UserControl.xaml
- Giao diện gồm 2 phần: Phần Ribbon + phần hiển thị nội dung xem hình dưới.

Phần 1: Giao diện Ribbon chính

  

Phần 2: Giao diện con 

- Trong file xaml MainWindow.xaml  cơ bản Tree View như sau :

<RibbonWindow>

       <Grid>

<Grid.RowDefinitions>

Mã này định nghĩa chiều cao của Row. Thiết lập cố định các khung

              </Grid.RowDefinitions>

              <Ribbon>

<Ribbon.HelpPaneContent>

Help Panel, nằm phía bên phải

Ta sẽ thiết kế 1 button Help ở đây.

</Ribbon.HelpPaneContent>

<Ribbon.QuickAccessToolBar>

Quick Access Toolbar - Nằm ở góc bên trái trên cùng

</Ribbon.QuickAccessToolBar>

<Ribbon.ApplicationMenu>

Application Menu, nằm phía bên tay trái (mũi tên xuống)

</Ribbon.ApplicationMenu>

<RibbonTab>

Ribbon Tab: Home

</RibbonTab> 

Muốn thêm các Tab như: Insert, PageLayout như demo thì thêm Thẻ         nữa thôi

</Ribbon>

<DockPanel>

DockPanel: Khung để hiển thị giao diện con trong giao diện chính này

</DockPanel>

</Grid>

</RibbonWindow>

Kết Quả Chương Trình

Các bạn tải Source code đầy đủ về tại đây: Demo Ribbon or Mirror Link

Thiết Kế Giao Diện Ribbon Với WPF

Related Tags :
WritingObsolete