WPF Ribbon Control

1. Đôi nét về Office Ribbon:

office-ribbon

Phiên bản xem trước của WPF Ribbon bao gồm các tính năng mà Independent Software Vendors (ISVs) cần để thêm một Ribbon control cho các ứng dụng WPF của họ. Ribbon là một thanh lệnh tổ chức các chức năng của chương trình thành một chuỗi các tab tại phần trên cùng của một cửa sổ. Giao diện Ribbon được thiết kế bởi Microsoft Office để tăng sự bao trùm các tính năng và các hàm xử lý, làm cho người dùng cảm thấy nhiều chức năng trong việc điều khiển trong sự trải nghiệm của họ với chương trình. Ribbon được thiết kế để thay thế cho thanh trình đơn và các thanh công cụ truyền thống. WPF sẽ bao gồm tất cả các tính năng và hàm Ribbon cơ bản như các thẻ tab, các nhóm, các control (buttons, split buttons, galleries,…) thanh tiêu đề được tích hợp của nút trình đơn ứng dụng và thanh công cụ truy xuất nhanh, và thay đổi kích cỡ giao diện linh hoạt.

office-ribbon_1

Ribbon được giới thiệu như một phần của bộ Office 2007 và có thể được tìm thấy trong các ứng dụng như Word, Excel, PowerPoint và OutLook.

2. Feature Walkthrough:

Basic Ribbon Construction

Ribbon được thiết kế từ một tập các thẻ tab, mỗi thể tab bao gồm một tập các nhóm, và mỗi nhóm bao gồm một tập các control. Các control được sử dụng trong Ribbon bao gồm các button, split button, checkbox, thanh trình đơn dạng drop-down, combo box, text box, spinner, và gallery. Một cấu trúc Ribbon cơ bản có dạng như thế này:

    <r:RibbonTab Label="Banking">
        <r:RibbonGroup>
            <r:RibbonButton Command="me:AppCommands.Cut"/>
            <r:RibbonButton Command="me:AppCommands.Copy"/>
            <r:RibbonButton Command="me:AppCommands.Paste"/>
        </r:RibbonGroup>

        <r:RibbonGroup>
            <r:RibbonButton Command="me:AppCommands.AddNew"/>
            <r:RibbonButton Command="me:AppCommands.Clear" />
            <r:RibbonButton Command="me:AppCommands.Delete"/>
        </r:RibbonGroup>

        <r:RibbonGroup>
            <r:RibbonButton Command="me:AppCommands.DownloadStatements"/>
            <r:RibbonButton Command="me:AppCommands.DownloadCreditCards"/>
            <r:RibbonButton Command="me:AppCommands.Transfer"/>
        </r:RibbonGroup>
    </r:RibbonTab>

RibbonCommands

Một khía cạnh rất quan trọng của WPF Ribbon là tính năng RibbonCommand mới. Không giống như hầu hết các hướng phát triển giao diện trước đây, là mô hình trung tâm, Ribbon được xem là mô hình trung tâm hơn. Mỗi phần trên giao diện của Ribbon có một mục đích riêng, nhìn chung có thể được xem là có giao diện liên quan đến nó. Những hành động này có thể được dùng trung nhiều vị trí khác nhau trên Ribbon. RibbonCommand được thiết kế để gom các thông tin này vào một nơi.

Cũng giống như các trình đơn và thanh công cụ, Ribbon được điều khiển thông qua RoutedCommand. RibbonCommand là một lớp phụ mới của RoutedCommand bao gồm các thuộc tính dòng lệnh thông thường cộng với một vài thuộc tính thêm vào để liên kết giao diện với từng dòng lệnh. Mỗi RibbonCommand có một vài phần thông tin được sử dụng để tự động tạo ra giao diện cho Ribbon:

  • LabelTitle – được dủng để hiển thị một nhãn trên một item trong Ribbon.
  • LabelDescription – được dùng để hiển thị một thông tin mô tả.
  • ToolTipTitle – được dùng để hiển thị tiêu đề cho tooltip được tạo ra cho dòng lệnh.
  • ToolTipDescription – được dùng để hiển thị dòng thứ 2 của văn bản trên tooltip.
  • ToolTipImageSource –  được dùng để hiển thị một hình ảnh trên tooltip.
  • SmallImageSource – hình ảnh được sử dụng khi item được hiển thị trong vùng kích thước nhỏ.
  • LargeIamgeSource – hình ảnh được sử dụng khi item được hiển thị trong vùng kích thước lớn.
  • ToolTipFooterTitle – được dùng để hiển thị tiêu đề dưới cho tooltip được tạo ra cho dòng lệnh.
  • ToolTipFooterDescription – được dùng để hiển thị dòng thứ 2 của văn bản trên tooltip dưới.
  • ToolTipFooterImageSource – được dùng để hiển thị một hình ảnh cho tooltip dưới.

Các RibbonCommand nên được liên kết với từng control và nhóm trên Ribbon, ApplicationMenu, các item trình đơn trong ApplicationMenu và các controls trong QuickAccessToolBar. Ribbon sử dụng thông tin trong RibbonCommand để tự động phát sinh giao diện cho control. Một khi một RibbonCommand được chỉ định tới một button, tuy nhiên, Ribbon tự động tạo một label, icon, và tooltip cho button đó sử dụng thông tin được lưu trữ trong RibbonCommand. Vì mỗi RibbonCommand có thể được dùng ở hơn 1 nơi và sẽ cần một Command được liên kết với nó, việc sử dụng RibbonCommand làm cho công việc này trở nên thuận lợi để định nghĩa dòng lệnh và giao diện đúng lúc ở một nơi và sau đó tài sử dụng dòng lệnh bất kì đâu cần.

Một RibbonTab hoàn tất gồm các RibbonGroup và control sẽ như sau:

    <r:Ribbon>
        <r:Ribbon.Resources>
            <r:RibbonCommand x:Key="SaveCommand"
                           CanExecute="SaveCommand_CanExecute"
                           Executed="SaveCommand_Executed"
                           LabelTitle="Save"
                           SmallImageSource="Images\SaveIconSmall.png"
                           LargeImageSource="Images\SaveIconLarge.png"
                           ToolTipTitle="Save"
                           ToolTipDescription="Save your work." />
            <r:RibbonCommand x:Key="AnotherCommand"
            ...
        </r:Ribbon.Resources>
                <r:RibbonTab Label="Home">
                    <r:RibbonGroup Command="{StaticResource Group1Command}">
                        <r:RibbonButton Command="{StaticResource SaveCommand}"/>
                        <r:RibbonButton Command="{StaticResource NewCommand}"/>
                        <r:RibbonButton Command="{StaticResource OpenCommand}"/>
                    </r:RibbonGroup>

                    <r:RibbonGroup Command="{StaticResource Group2Command}">
                        <r:RibbonButton Command="{StaticResource ClearCommand}"/>
                        <r:RibbonButton Command="{StaticResource DeleteCommand}" />
                        <r:RibbonButton Command="{StaticResource UndoCommand}"/>
                        <r:RibbonButton Command="{StaticResource RedoCommand}"/>
                    </r:RibbonGroup>
                </r:RibbonTab>
    </r:Ribbon>
    

RibbonWindow

Một tính năng đáng chú ý của Ribbon trong Office 2007 là sự tích hợp của nó với thanh tiêu đề của cửa sổ. Các tính năng như buton ApplicationMenu, Quick Access Toolbar, và các thẻ tab ngữ cảnh đặt trên đỉnh của khu vực non-client, giống như thế này:

office-ribbon_2

Nó có thể được thi hành với WPF Ribbon bằng cách dùng thành phần gốc RibbonWindow mới. RibbonWindow thực thi mã interop cần thiết để hiển thị các thành phần Ribbon cần thiết trong khu vực thanh tiêu đề. Ribbon được dùng trong phạm vi RibbonWindow thì không được yêu cầu, nhưng nếu việc tích hợp thanh tiêu đề được yêu cầu, đó là cách đơn giản nhất để thực thi.

Ribbon Layout and Resizing

Một trong những tính năng đáng chú ý của Office Ribbon là giao diện động có thể thay đổi như các kích thước cửa sổ để hiển thị càng nhiều control càng tốt trong ôột giao diện bố trí tối ưu nhất. WPF Ribbon cung cấp một tập các điểm tùy chỉnh nơi các tác giả của ứng dụng có thể chọn để xác định hành vi thay đổi kích thước của Ribbon.

Mặc định, mổi nhóm được đặt ra bằng cách sử dụng RibbonWrapPanel. RibbonWrapPanel bao gồm một tập các kiểu giao diện được định nghĩa trước được sử dụng để sắp xếp các control, nó phụ thuộc vào việc có bao nhiêu control trong nhóm và nhóm đó lớn cỡ nào.

office-ribbon_3

Nếu tác giả ứng dụng muốn thay đổi giao diện mặc định, việc này có thể thực hiện thông qua thuộc tính GroupSizeDefinitions. Nhà phát triển có thể định nghĩa một tập các thuộc tính GroupSizeDefinitions, mỗi thuộc tính đại diện cho một giao diện cho nhóm. Trong phạm vi một GroupSizeDefinitions, một ControlSizeDefinition phải được xác định cho từng control trong phạm vi nhóm này. Tập các mẫu giao diện trong hình trên được định nghĩa như thế này:

    <r:RibbonGroup Name="MoveDetails">
    <r:RibbonGroup.Command>
          <r:RibbonCommand LabelTitle="Move Details" 
                                 SmallImageSource="{StaticResource TimeframeIconDark}"/>
    </r:RibbonGroup.Command>
    <r:RibbonGroup.GroupSizeDefinitions>
          <r:RibbonGroupSizeDefinitionCollection>
                <r:RibbonGroupSizeDefinition>
                      <r:RibbonControlSizeDefinition ImageSize="Large" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Large" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Large" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Large" 
                                                     IsLabelVisible="True"/>
                </r:RibbonGroupSizeDefinition>
                <r:RibbonGroupSizeDefinition>
                      <r:RibbonControlSizeDefinition ImageSize="Large" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Small" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Small" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Small" 
                                                     IsLabelVisible="True"/>
                </r:RibbonGroupSizeDefinition>
                <r:RibbonGroupSizeDefinition>
                      <r:RibbonControlSizeDefinition ImageSize="Large" 
                                                     IsLabelVisible="True"/>
                      <r:RibbonControlSizeDefinition ImageSize="Small" 
                                                     IsLabelVisible="False"/>
                      <r:RibbonControlSizeDefinition ImageSize="Small" 
                                                     IsLabelVisible="False"/>
                      <r:RibbonControlSizeDefinition ImageSize="Small" 
                                                     IsLabelVisible="False"/>
                </r:RibbonGroupSizeDefinition>
                <r:RibbonGroupSizeDefinition IsCollapsed="True"/>
          </r:RibbonGroupSizeDefinitionCollection>
    </r:RibbonGroup.GroupSizeDefinitions>
    <r:RibbonToggleButton Command="{StaticResource TimeFrameCommand}" />
    <r:RibbonToggleButton Command="{StaticResource LocalMoveCommand}" />
    <r:RibbonToggleButton Command="{StaticResource ChildrenCommand}" />
    <r:RibbonToggleButton Command="{StaticResource FirstTimeBuyerCommand}" />
    </r:RibbonGroup>

 

Các tác giả của ứng dụng cũng có thể thay thế RibbonWrapPanel mặc định bằng một giao diện tùy chọn để thực hiện các hành vi động phức tạp hơn.

Mặc định, các nhóm sẽ sổ theo chu kì từ phải qua trái. Những nhà phát triển có thể tùy chỉnh hành vi này bằng cách sử dụng thuộc tính GroupSizeReductionOrder:

    <r:RibbonTab Label="Search Criteria" GroupSizeReductionOrder="Home,Price,Home,Home,Price,Categories">

        <r:RibbonGroup Name="Price">
            ...
        </r:RibbonGroup>

        <r:RibbonGroup Name="Categories">
            ...
        </r:RibbonGroup>

        <r:RibbonGroup Name="Home">
            ...
        </r:RibbonGroup>

    </r:RibbonTab>

 

RibbonApplicationMenu and RibbonQuickAccessToolBar

Phiên bản WPF Ribbon xem trước bao gồm RibbonApplicationMenu và RibbonQuickAccessToolBar. RibbonApplicationMenu chắc hẳn có một RibbonCommand được chỉ định xác định icon bên trong nút Application Menu và hành động click đúp chuột vào nút thực hiện. RibbonApplicationMenu lấy các RibbonApplicationMenuItem và RibbonApplicationSplitMenuItem như phần con. Như các control khác, những item trình đơn này chắc hẳn có các RibbonCommand liên kết với chúng. Giao diện của các item trình đơn sẽ được cấu hình tự động bằng cách sử dụng thông tin trong RibbonCommand và phụ thuộc vào nó cho dù có hay không item trình đơn có phần con. Nếu item này không có phần con, một mũi tên sẽ xuất hiện và lướt chuột qua sẽ hiển thị một trình đơn thứ hai hiển thị phần con.

office-ribbon_4

RibbonQuickAccessToolBar lấy một tập các control Ribbon chẳng hạn như các button, toggle button, các trình đơn dạng drop-down,… Quick Access ToolBar (QAT) bao gồm một Customize Menu mà người dùng cuối có thể sử dụng để thêm và hủy các control từ QAT. Các tác giả của ứng dụng có thể đặt vị trí của các control QAT bằng cách sử dụng thuộc tính đi kèm RibbonQuickAccessToolBar.Placement, mà lấy giá trị của InToolbar (không thể hiện trong Customzie Menu), InCustomizeMenu (trong Customize Menu và không được kiểm tra) hoặc InCustomizeMenuAndToolBar.

    <r:Ribbon.QuickAccessToolBar>
        <r:RibbonQuickAccessToolBar>
            <r:RibbonButton Command="{StaticResource Phone1Command}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"/>
            <r:RibbonButton Command="{StaticResource EmailCommand}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"/>
            <r:RibbonToggleButton Command="{StaticResource HighGrowthCommand}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"/>
            <r:RibbonToggleButton Command="{StaticResource NearCityCenterCommand}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar"/>
            <r:RibbonToggleButton Command="{StaticResource NearDiningCommand}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenu"/>
            <r:RibbonToggleButton Command="{StaticResource NearShoppingCommand}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenu"/>
            <r:RibbonToggleButton Command="{StaticResource RecCenterCommand}"
                r:RibbonQuickAccessToolBar.Placement="InCustomizeMenu"/>
        </r:RibbonQuickAccessToolBar>
    </r:Ribbon.QuickAccessToolBar>

office-ribbon_5

Themes and Skins

WPF Ribbon có giao diện Windows 7 mặc định. Một giao diện Office 2007 có thể được áp dụng bằng cách dùng việc tham chiếu Office2007Blue ResourceDictionary:

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary 
                   Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

One thought on “WPF Ribbon Control

  1. Chào bạn,
    Bạn có biết làm cách nào để tạo một group có các button điều hướng lên xuống giống như group chứa style của office không? Nếu bạn biết chỉ giùm mình với, mình rất cảm ơn.

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