天天看點

一起談.NET技術,用優秀.NET界面控件 打造新潮界面效果

  一直以來,做.NET共享小軟體的界面一般采用IrisSkin這個比較不錯的皮膚控件來美化界面效果,友善易用,界面效果也還可以。該控件開發應用比較友善,拖動控件到主界面,然後初始化地方添加一下代碼即可:

string skinFile = ConfigurationManager.AppSettings["SkinFile"];
this.skinEngine1.SkinFile = Path.Combine(Application.StartupPath, skinFile);      

  主界面初始化中添加以上其他地方代碼後,所有該程式的相關視窗都被美化成統一風格。

  時代變遷,技術進化,界面效果變化無窮,現在最流行的界面應該是Windows2007風格,Ribbon風格的界面效果了,國外很多大型的.NET控件商,亦步亦趨,緊跟潮流,也推出不同版本的界面控件,支援這種新潮的界面效果。

  我這裡主要介紹一下DotNetBar這個控件,這個控件使用也非常簡便,更加重要的是,這個控件提供各種各樣的界面控件,支援整體的Ribbon以及更多更複雜的界面效果。我們從該控件的官網效果中可以窺見一斑(http://www.devcomponents.com/dotnetbar/screenshots.aspx),其中的效果非常酷,和Office2007的效果幾乎沒有什麼差異。

  本人閑暇之餘用該控件做了一些界面測試效果,如下所示,這個應該是我下個版本QQ搜通天的界面效果了,呵呵:

一起談.NET技術,用優秀.NET界面控件 打造新潮界面效果

  軟體包含幾部分内容,為了練手,我做了一個布局相對比較飽滿的程式,我通過這個小程式:短信發送程式,來介紹一下界面各部分的内容,以便使我們建立布局更加合理,更加美觀友善的節目效果。

一起談.NET技術,用優秀.NET界面控件 打造新潮界面效果

  下面介紹的幾點内容,是基于上面圖形效果的編号來逐一分解,介紹各部分架構的意圖以及效果:

  1、Office2007中,這部分是一個綜合的菜單界面,我上面的小程式,隻是保留按鈕,沒有設定菜單,類似頁面首頁連接配接的功能,可以快速傳回到主界面中。

  2、Office界面樣式下拉選擇框,可以選擇不同的界面效果,在這裡還可以放置一些快速的按鈕,如Office2007的儲存、建立、撤銷等功能。

  3、 Ribbon樣式可折疊的TabItem控件,集中放置一些功能相對類似的按鈕或者其他界面元素,這裡我放置了一些功能按鈕,附上一些圖檔,就顯得比較好看了。

  4、 是技術支援網站的連接配接位址,也可以放一些幫助快速入口按鈕。

  5、 5、 6 子產品就是主界面顯示的區域了,這裡因為功能界面不多,為了友善操作我使用了一個TabControl控件,把窗體内容控件一股腦的放到一起,這樣友善使用者的切換。

  6、 6其實是主體内容控件的,我在設計的時候,把每一部分内容都設計為一個使用者控件,這樣可以利用TableControl控件,動态統一把需要的使用者控件加載到界面中來。

  7、 用來顯示公司的Logon、操作提示資訊、日期時間、登入使用者等相關資訊的狀态欄。

  通過以上7個子產品,我們把軟體的界面分解出來,各司其職,這樣布局相對比較穩定,容納的東西可以比較多,應該來說,還是一個不錯的界面效果布局,這些有賴于DotNetbar控件來幫助我們設計出專業、符合現代潮流的界面效果。

  其實在很多情況下,我們也可能采用基于單文檔這種方式的展示效果, 這樣使用者看到的東西不至于混亂,注意力相對集中,這樣的效果設計,在一些功能子產品和其他部分相對沒有太多直接關系的時候,就可以采用,如下面我們改變一下展示效果。

一起談.NET技術,用優秀.NET界面控件 打造新潮界面效果

  上面的兩種圖形可以通過界面元素的組裝,來實作不同的效果布局顯示,這樣可以達到比較好的顯示效果。下面貼出一些功能代碼,以飨讀者:  

  1、 改變界面樣式的代碼:

private void ChangeStyle(object sender, EventArgs e)
        {
string style = cbStyleManager.Text;
if ("Office2007Blue".Equals(style))
            {
                styleManager.ManagerStyle = eStyle.Office2007Blue;
            }
else if ("Office2007Silver".Equals(style))
            {
                styleManager.ManagerStyle = eStyle.Office2007Silver;
            }
else if ("Office2007Black".Equals(style))
            {
                styleManager.ManagerStyle = eStyle.Office2007Black;
            }
else if ("Office2007VistaGlass".Equals(style))
            {
                styleManager.ManagerStyle = eStyle.Office2007VistaGlass;
            }
else if ("Office2010Silver".Equals(style))
            {
                styleManager.ManagerStyle = eStyle.Office2010Silver;
            }
else if ("Windows7Blue".Equals(style))
            {
                styleManager.ManagerStyle = eStyle.Windows7Blue;
            }


            config.AppConfigSet(
"UIStyle", style);
        }      

  2、 把使用者控件附加到界面上的代碼:

public void SetDetailPanel(UserControl uc)
        {
if (uc == null)
            {
throw new ArgumentNullException("uc", @"使用者控件uc不能為空");
            }


            uc.Dock
= DockStyle.Fill;
            ribbonDetailPanel.Controls.Clear();
            ribbonDetailPanel.Controls.Add(uc);
        }      
var tabMessage = new CtrlMessageTab();
            SetDetailPanel(tabMessage);      

  3、 使用TabControl控件,我們可以在代碼中動态組裝需要的窗體控件,如下所示:

ctrlMessage = new CtrlMainContent();
            ctrlMessage.Dock = DockStyle.Fill;
this.panelMessage.Controls.Add(ctrlMessage);


            var ctrlTemplate
= new CtrlDictionary();
            ctrlTemplate.Dock = DockStyle.Fill;
            ctrlTemplate.SetText = new SetTextDelegate(SetMessage);
this.panelTemplate.Controls.Add(ctrlTemplate);


            var ctrlLocal
= new CtrlLocalHistroy();
            ctrlLocal.Dock = DockStyle.Fill;
this.panelLocal.Controls.Add(ctrlLocal);


            var ctrlAll
= new CtrlAllHistory();
            ctrlAll.Dock = DockStyle.Fill;
this.panelAllHistory.Controls.Add(ctrlAll);