← 返回所有博客文章

本周二《支持Win8.1、VS2013和触摸设备的ComponentOne 2013v2.5正式发布》的文章发布后,有多位读者来电咨询试用事宜,本文就我们熟悉的Visual Studio风格主界面进行demo解读.

基于“五步实现系统主页面”系列文章:

本文实现了一个ComponentOne 版Winforms系统主页面的简单原型。

clip_image002

开发环境:

1. Window 7 64位英文系统

2. Visual Studio 2012 SP3 英文版 (C#.net)

3. ComponentOne 2013 v2.5套件试用版 (for WinForms)

实现的5个步骤依次如下:

· Step 1:主菜单--- C1Ribbon

自Ribbon问世以来,它几乎成了系统主菜单的“标配”。故,ComponentOne也提供了Ribbon风格的菜单,其智能的向导使得配置Ribbon菜单成为非常容易上手的事情。

不考虑代码事件逻辑的情况下,完全可以实现零代码配置主菜单,对提高效率非常有帮助。

clip_image003

即,在C1Ribbon区域,鼠标移动即可出现如上的智能框,可方便添加Group、Action(Button、Label……) 。 值得一提的是,默认图标和文字是自动,会导致文字折叠

clip_image005

,需要手工修改属性:TextImageRelation:ImageAboveText (修改后效果如上)

· Step 2:导航栏---C1OutBar

· clip_image007

在左侧的导航栏,我们选择了C1OutBar,可灵活多样的在其内部添加C1OutPage分组,把不同功能的导航功能归属在一起。在C1OutPage内部,通过添加C1CommandLink实现功能项,可添加图标以区分不同功能。

为了最大程度上复用主菜单、右键菜单同事件,故间接使用了c1CommandHolder1.CommandClick的功能:

  1:  private void c1CommandHolder1_CommandClick(object sender, C1.Win.C1Command.CommandClickEventArgs e)
  2:         {
  3:             if (e.CallerLink == null)
  4:             {
  5:                 return;
  6:             }
  7: 
  8:             this.c1StatusBar1.Text = e.CallerLink.Text + " Ready.";
  9: 
 10:             if (e.CallerLink.Text == "窗口设计")
 11:             {
 12:                 FormOrder_Employee frm = new FormOrder_Employee();
 13:                 frm.ShowDialog(this);
 14:             }
 15:             else if (e.CallerLink.Text == "付款凭证")
 16:             {
 17:                 Form付款凭证 frm = new Form付款凭证();
 18:                 frm.ShowDialog(this);
 19:             }
 20:         }

· Step 3:工作区---C1FlexGrid、C1DockingTab

在主工作区,为了呈现不同的功能数据,我们首先用C1DockingTab进行多Tab页面划分,每个Tab内嵌入C1FlexGrid来呈现数据,从而通过C1FlexGrid绑定不同的数据源。

clip_image009

数据源使用的Access安装默认的C1NWind数据源。(数据源路径参考如下:C:\Users\用户名\Documents\ComponentOne Samples\Common\C1NWind.mdb)

 

对于C1FlexGrid 数据进行Excel导出,用短短的几行代码可实现,非常高效,

菜单路径:clip_image011

导出代码如下:

  1:       private void c1FlexGrid2_DoubleClick(object sender, EventArgs e)
  2:         {
  3:             SaveFileDialog dlg = new SaveFileDialog();
  4:             dlg.Filter = "(*.xlsx)|*.xlsx";
  5:             if (dlg.ShowDialog(this) == System.Windows.Forms.DialogResult.OK)
  6:             {
  7:                 this.c1FlexGrid2.SaveExcel(dlg.FileName);
  8: 
  9:                 try
 10:                 {
 11:                     System.Diagnostics.Process.Start(dlg.FileName);
 12:                 }
 13:                 catch (Exception)
 14:                 {
 15: 
 16:                 }
 17:             }
 18:         }

· Step 4属性区--- C1DockingTab、C1InputPanel、C1FlexGrid

在右侧的属性区域,为了能多显示几个页面,再次使用了C1DockingTab控件。

注意,如要C1DockingTab的左上角出现clip_image013Pin按钮,则首先需要在右侧的属性区域添加C1CommandHolder控件,再添加C1DockingTab控件,并添加如下代码:

  1: this.c1CommandDock1.Dock = System.Windows.Forms.DockStyle.Right;
  2: this.c1DockingTab.Alignment = System.Windows.Forms.TabAlignment.Right;
  3: this.c1DockingTab.AutoHiding = true;
  4: this.c1DockingTab.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
  5: this.c1DockingTab_right.CanAutoHide = true;
  6: 

为了实现2个C1DockingTabPage按照上下的layOut布局:

clip_image015

采用的是“笨办法”:即先让程序运行起来,拖动C1DockingTabPage为你想要的布局,这时候通过一行代码保存布局为xml; 在Form.Load加载这个layout.xml文件,则可以实现这种上下的Layout布局,保存、加载布局的代码如下:

  1:       private void LoadLayout_DockingBar()
  2:         {
  3:             try
  4:             {
  5:                 //加载保存的Dock LayOut
  6:                 C1DockingTab.RestoreLayout(this, AppDomain.CurrentDomain.BaseDirectory + "layout_DockingBar.xml");
  7:             }
  8:             catch (System.IO.FileNotFoundException)
  9:             {
 10:                 C1DockingTab.SaveLayout(this, AppDomain.CurrentDomain.BaseDirectory + "layout_DockingBar.xml");
 11:             }
 12:         }

· Step 5日志栏--- C1SplitContainer、C1Editor

在主页面的下面用来呈现日志、功能操作提示等信息,以方便软件用户节约使用系统的摸索时间,从而提高系统的亲和力和自说明能力。

 

clip_image017

参考官方控件wiki文档:http://our.componentone.com/wiki/index.php?title=Studio_for_WinForms

代码下载: