一個專業的Winfrom下的ribbon



介紹

由於在Web上缺少好用的免費Ribbon控件,我決定自己寫一個。分析了以前的Ribbon控件,其中也包括了在CodeProject上的,不幸的是,現存的大部分控件幾乎都是失敗的嘗試。爲什麼呢?或缺少好的渲染,或缺少尺寸變化特性,或缺少所有的東西。當然,有一些好的Ribbon控件需要付費才能使用。這個Ribbon是免費的。

爲什麼不用WPF呢?主要的,由於我需要將Ribbon添加到我以前的WinForms應用程序中。在我看來它對於WPF來說不是”no”,僅僅是”not yet”。不管怎樣,你可以在WPF中使用WinForms控件。

一些設計目標

性能這個Ribbon包括在一個控件窗口中,所有內含的要素使用一系列範圍來管理,就如ToolStrip控件一樣。儘管在Ribbon內部代碼上管理很困難,但是這是保持最好Ribbon性能的一種方式。相信我,下載例子,運行它,改變窗口大小。它執行得很優雅。

和Office’s Ribbon的兼容性 我曾經讀過JakobNielsen說的一個東西,大部分用戶喜歡界面像Word,Excel和PowerPoint的程序。這個是顯然的,因爲人們每天都要使用這些軟件。提供與Office’s Ribbon視覺上的統一是十分重要的,因爲這樣的話,人們已經知道它是什麼樣子,這是一個使用上的優勢。我已經盡力讓所有的元素的外觀和行爲和Office’s ribbon一樣。

開發者方便的使用組件的名字和大部分WinForms命名體系一致,更多的與ToolStrip元素一致。屬性、事件和方法命名和ToolStrip技術很像。

設計者支持我將添加更多的設計者支持,因此在設計器中百分百的控制Ribbon。試一試吧。

我會提供升級和bug修復,當我發現它們或你友好的讓我知道它們。

使用Ribbon

Ribbon在System.Windows.Forms命名空間中,和其它控件一樣,我認爲使用命名得類似MyCoolFirm.MyCoolNameSpace.MyCoolSubNameSpace一樣的控件是令人討厭的。

你可以添加DLL引用或直接拷貝源文件到你的工程文件中。這個代碼當前的設計可以讓你直接拷貝源文件,它不需要任何額外的資源。

實踐:快速指南

Ribbon主要是由三種元素組成:tabs、tabs上的panels和panels中的items。


這些元素用RibbonTab,RibbonPanel和RibbonItem類型表示。RibbonItem是一個虛基類,它提供了在RibbonPanel或RibbonDropDown中的任何Item的基本函數。

你可以使用Ribbon的智能標籤進行tabs添加,你可以選擇tab和調用屬性表格的底部的AddPanel動作添加Panels到tab。

Ribbon上的元素根據可用空間進行大小調整。這個是ribbon的主要特性。它試圖將所有可能的命令展示在屏幕上,通過大小調整,而不是用額外的按鈕隱藏它們(如舊的ToolStrip)。

我視爲三種尺寸:Large,Medium和Compact。由於Panels可以收起,Overflow尺寸被使用。


注意:沒有方法直接調整元素的範圍,大小總是由ribbon內部的佈局引擎提供的。事實上,佈局依靠兩個因素:可用的水平尺寸、items的大小模型。

如果沒有足夠的尺寸,panel會收起。如果所有面板收起,但是空間仍然不夠,一個滾動按鈕將會出現,因此用戶可以水平滾動面板。

Buttons

只有一種按鈕:RibbonButton。它有三種樣式:


RibbonButton添加了SmallImage屬性,你可以設置button在medium和compact模式下的圖片。儘管沒有功能限制,但是Image屬性最好使用32*32像素的圖片,SmallImage最好使用16*16像素的圖片。大小不同時結果將無法預料。

注意:使用DropDownItems屬性添加items到按鈕的Dropdown。

Size模型不一樣buttons的外觀不一樣。

ItemGroups

像那些在Font和Paragraphpanels上的buttons是RibbonButton buttons包括在RibbonItemGroup goup中。


添加到RibbonItemGroup中的Items將會以compact大小模型被量測和對待。

重要:如果RibbonPanel包含RibbonItemGroup對象,你可以設置RibbonPanel.FlowsTo屬性爲Right。這些對象的佈局將不同對待。

Lists

Lists用RibbonButtonList表示,提供兩個集合:Buttons和DropDownItems。這是因爲list可以在ribbon上滾動,下來出來更多items。List的dropdown支持使用東南角的手柄進行大小改變。

如果你希望list中的buttons可以再dropdown中看到,你需要顯式的使用這些按鈕添加另一個list到DropDownItems屬性。

Separators

Separators用RibbonButtonSeparator表示,提供周知的分隔功能。在下拉列表中,Separators可以包含文本。當它們包含文本時,渲染會不一樣。


教程

在ribbon.codeplex.com開始學習Ribbon。

已知的Bugs

Multiple dropdowns沒有控制好。

當鼠標按下時繪製收起的panels。

要做的事情

Contextual tabs

ToolTips

(OK) TextBox, ComboBox

Checkbox and NumericUpDown RibbonItems

Orb and Quickaccess tools

Vista clientarea docking

Keyboard quick access through Alt key

Font and Color selectors

Right to left orientation

Ribbon minimization

歷史

2008年5月8日原始發佈

2008年5月29日更新

         Enabled屬性可以工作了

         添加RibbonTextBox

         添加RibbonComboBox

         添加RibbonColorChooser

2009年2月23日更新

         Orb和orb菜單用設計器能力

         添加QuickAccess Toolbar

         一些bugs修復

2009年5月1日更新

         Orb和Quick access嵌入到非客戶區域

         Popup menus修復

         支持很多事件處理

         少數bugs修復

許可

This article, along with any associated source code and files, islicensed under The Microsoft Public License(Ms-PL)

關於作者

 JoseMenendez Póo  Team Leader   Mexico

Jose ManuelMenéndez Poó
 

- I've been programming Windows and Web apps since1997.
- My greatest concern nowadays is user interfaceusability.
 
Questions and stuff by twitter: @menendezpoo
 
Blog
menendezpoo.com

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章