第三方控件DevExpress学习笔记

DevExpress控件学习

 

 

1.      MDI窗体

Ø 首先需要把父窗体设置为MDI容器：

Ø 在主窗体放一个xtraTabbedMdiManager，如：

Ø 设置MDI窗体样式；

MDI子窗体标签栏的位置

子窗体关闭按钮的样式

多个标签的时候，如何显示标签导航栏

Ø 新建一子窗体，可以是DevExpress的也可以是VS自带的（VS自带的最好改下背景色为如下配置，否则会主子窗体颜色不搭配。 ）

Ø 调用子窗体的代码如下：

///<summary>

///打开子窗体

///</summary>

///<paramname="frm"></param>

privatevoidOpenChildForm(Formfrm)

{

intiCount = 0;

foreach (varmdiChildinthis.MdiChildren)

    {

if (mdiChild.Text == frm.Text)

        {

mdiChild.Activate();

iCount++;

        }

    }

if (iCount> 0)

return;

frm.MdiParent = this;

frm.Show();

}

 

privatevoidbtnMqClient_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)

{

    Text = e.Link.Item.Caption;

if (e.Link.Item.Tag != null)

    {

objectooo = e.Link.Item.Tag;

    }

FrmOutLookfrm = newFrmOutLook();

OpenChildForm(frm);

}

Ø 如果不想关闭子画面，则在子画面窗体上选择属性ControlBox关闭：

 

 

2.      OutLook导航条用法：  

 

 

选中navBarGroup1，在属性栏中选择GroupStyle，可以调整图标显示样式。

 

3.      Ribbon编辑器

Ø 去掉Win7透明窗体，保持所有情况下显示风格都一致。

在Ribbon主窗体中选择属性AllowFormGlass，会在Win7风格时增加一个透明框框，很丑，所以我选择了 False

Group文字过长时，不会自动省略

关联Ribbon后，可以使用Designer进行编辑

 

也可以用代码来改变图标

TabPage使用

Ø 首先拖动XtraTabControl到界面中：

Ø 关闭TabPage的方法，我试验了很久的：

privatevoidxtraTabControl1_CloseButtonClick(object sender,EventArgs e)

{

DevExpress.XtraTab.XtraTabPage page =(DevExpress.XtraTab.XtraTabPage)((DevExpress.XtraTab.ViewInfo.ClosePageButtonEventArgs)(e)).Page;

xtraTabControl1.TabPages.Remove(page);

}

Ø 窗体标题文字被省略：

解决方案：

在属性框中的Text中填写英文，空格，横线等信息

如：客户端程序框架[DEMO] - Adaapter适配器

效果：

4.      Ribbon工具条上的Button控件，如果想使用开关效果，可以选择属性中用

5.      Ribbon工具条上的各控件（BarEditItem），与其子控件（）之间的关系，及使用方式

Ø CheckEdit：如果要设置其默认值，应该用其外部容器来设置，如：chkModeSwitchContainer.EditValue = false;//不是设置这个chkModeSwitch，如图：

Ø TextEdit：如果要设置其默认值，应该用其外部容器来设置，如：txtSendMockNumContainer.EditValue = 2;

Ø 但是用外部容器来的事件（EditValueChanged）来处理内部控件值事件时，会有延迟出现，比如，想检测CheckEdit的CheckedChange事件，这时候，应该用内部控件的事件实现才能及时响应，如：

chkModeSwitch.CheckStateChanged +=ChkModeSwitchCheckStateChanged;

///<summary>

///调试模式开关

///</summary>

///<paramname="sender"></param>

///<paramname="e"></param>

voidChkModeSwitchCheckStateChanged(objectsender, EventArgs e)

{

if (((DevExpress.XtraEditors.CheckEdit)(sender)).Checked)

    {

        _debugMode = true;

    }

else

    {

        _debugMode = false;

    }

}

 

 

Ø 其他

 

6.      Ribbon窗体，可以隐藏Windows自己的标题栏，如图效果：

需要让窗体继承自RibbonForm基类

子窗体继承自XtraForm，这样可以统一界面样式、颜色等

7.      Ribbon窗体去掉快速工具栏按钮：

 

8.      NavBarControl的一些操作

 

隐藏组标签

 

关闭折叠按钮

 

 

关闭UI元素

 

允许选中

 

9.      表格控件

设置只读：

publicvoidSetGridEditEnable(booloptionSet)

{

string option = "Editable";

DevExpress.Utils.SetOptions.SetOptionValueByString(option,gridView2.OptionsBehavior, optionSet);

}

 

设置表头：

privatevoidSetData()

{

DataTabledt = newDataTable("data");

dt.Columns.Add("ID");

dt.Columns.Add("Type");

dt.Columns.Add("Content");

dt.Columns.Add("Comment");

dt.Rows.Add(newobject[] { "001","错误", "数据库连接已断开!", "建议尽快解决." });

dt.Rows.Add(newobject[] { "002","警告", "SQL 语句错误!", "检查拼写." });

dt.Rows.Add(newobject[] { "003","警告", "登陆失败!", "重新输入用户名密码." });

dt.AcceptChanges();

BindingSourcebs = newBindingSource();

bs.DataSource =dt;

    gridControl2.DataSource = bs;

 

//gridControl1

    gridView2.Columns[0].Caption = "编号";

    gridView2.Columns[1].Caption = "类型";

    gridView2.Columns[2].Caption = "错误信息";

    gridView2.Columns[3].Caption = "备注";

 

//若有一列不设置值，且其他列宽度不超出容器总宽度时，设置了列宽的列按照列宽展示，未设置列宽的列填充剩余宽度；

//若所有列均设置了列宽，在列宽总和与容器长度不匹配时，列宽按照设置的列宽数值的比例进行显示

gridView2.Columns[0].Width= 25;

gridView2.Columns[1].Width= 25;

//gridView2.Columns[2].Width= 50;

gridView2.Columns[3].Width= 50;

 

SetGridEditEnable(false);

}

 

 

10.  设置皮肤

首先，要获取多种皮肤的话，必须在Program.cs中的Main函数中注册

 

///<summary>

///应用程序的主入口点。

///</summary>

[STAThread]

staticvoid Main()

{

DevExpress.UserSkins.BonusSkins.Register();

DevExpress.Skins.SkinManager.EnableFormSkins();

Application.EnableVisualStyles();

Application.SetCompatibleTextRenderingDefault(false);

Application.Run(newFrmMain());

}

 

privatevoidSetSkin(stringskinName)

{

DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(skinName);

}

 

//获取所有皮肤名字

voidInitSkins()

{

foreach(DevExpress.Skins.SkinContainercntinDevExpress.Skins.SkinManager.Default.Skins)

    {

repositoryItemComboBox3.Items.Add(cnt.SkinName);

    }

   repositoryItemComboBox3.SelectedIndexChanged += newEventHandler(RepositoryItemComboBox2SelectedIndexChanged);

}

//ComboBox下拉事件

voidrepositoryItemComboBox1_SelectedIndexChanged(objectsender, EventArgs e)

{

DevExpress.XtraEditors.ComboBoxEditcomboBoxEdit= (DevExpress.XtraEditors.ComboBoxEdit)sender;

SetSkin(comboBoxEdit.SelectedItem.ToString());

}

 

 

11.  ComboBox下来列表（repositoryItemComboBox）

 

12.  Wizard 向导控件

Ø 有两个构造函数，只能在其中一个构造函数中初始化向导中的数据。

Ø 此向导最大的作用是导航，及动画，向导中每个页面上的控件都是自己手工添加的，在同一个页面中，可以直接操作控件，给控件赋值、取值。

Ø 向导提供一些API，可以控制向导上的元素，如：上一页，下一页等控件的使能。

Ø 可以修改向导每一页上的信息；

Ø 可以增加、删除向导页；

Ø 使用示例

                        i.             增加控件

                      ii.             其他

13.  DataGrid表格

Ø 设置列展现形式。

Ø 多选

Ø 字段绑定

Ø 通过代码设置只读

string option = "Editable";

DevExpress.Utils.SetOptions.SetOptionValueByString(option,gridView1.OptionsBehavior, false);

Ø 表头、单元格居中设置

全局调整：

 

单列调整：

如果是动态生成列，则可以如此设置：

列自动宽度开关，设置好后，拖动列宽

 

Ø 去掉分组头。

 

 

 

Ø 去掉网格线。

 

 

 

 

Ø 隐藏表行头。

 

 

 

14.  时间控件（DevExpress.XtraEditors.DateEdit、DevExpress.XtraEditors.TimeEdit）用法

Ø 这两个控件最重要的属性是有两个掩码（Mask）

Ø 区别：DevExpress.XtraEditors.DateEdit有一个向导，用起来比较方便、DevExpress.XtraEditors.TimeEdit上下图标选择时间

15.  图表

Ø 两柱状图之间距离调节

                        i.             如图：有两根柱状图

通过BarDistance调节两个柱状图之间的距离，调节为0时：

调节为2时，我们看到蓝色无条纹的柱状图整体往后平移了2个单位：

Ø 柱状图宽度调节

Ø 坐标文字方向

选中坐标轴，然后找到 Label 属性，修改角度即可：

Ø 其他

16.  其他

 

 

DevExpress控件学习

 

 

1.      MDI窗体

Ø 首先需要把父窗体设置为MDI容器：

Ø 在主窗体放一个xtraTabbedMdiManager，如：

Ø 设置MDI窗体样式；

MDI子窗体标签栏的位置

子窗体关闭按钮的样式

多个标签的时候，如何显示标签导航栏

Ø 新建一子窗体，可以是DevExpress的也可以是VS自带的（VS自带的最好改下背景色为如下配置，否则会主子窗体颜色不搭配。 ）

Ø 调用子窗体的代码如下：

///<summary>

///打开子窗体

///</summary>

///<paramname="frm"></param>

privatevoidOpenChildForm(Formfrm)

{

intiCount = 0;

foreach (varmdiChildinthis.MdiChildren)

    {

if (mdiChild.Text == frm.Text)

        {

mdiChild.Activate();

iCount++;

        }

    }

if (iCount> 0)

return;

frm.MdiParent = this;

frm.Show();

}

 

privatevoidbtnMqClient_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)

{

    Text = e.Link.Item.Caption;

if (e.Link.Item.Tag != null)

    {

objectooo = e.Link.Item.Tag;

    }

FrmOutLookfrm = newFrmOutLook();

OpenChildForm(frm);

}

Ø 如果不想关闭子画面，则在子画面窗体上选择属性ControlBox关闭：

 

 

2.      OutLook导航条用法：  

 

 

选中navBarGroup1，在属性栏中选择GroupStyle，可以调整图标显示样式。

 

3.      Ribbon编辑器

Ø 去掉Win7透明窗体，保持所有情况下显示风格都一致。

在Ribbon主窗体中选择属性AllowFormGlass，会在Win7风格时增加一个透明框框，很丑，所以我选择了 False

Group文字过长时，不会自动省略

关联Ribbon后，可以使用Designer进行编辑

 

也可以用代码来改变图标

TabPage使用

Ø 首先拖动XtraTabControl到界面中：

Ø 关闭TabPage的方法，我试验了很久的：

privatevoidxtraTabControl1_CloseButtonClick(object sender,EventArgs e)

{

DevExpress.XtraTab.XtraTabPage page =(DevExpress.XtraTab.XtraTabPage)((DevExpress.XtraTab.ViewInfo.ClosePageButtonEventArgs)(e)).Page;

xtraTabControl1.TabPages.Remove(page);

}

Ø 窗体标题文字被省略：

解决方案：

在属性框中的Text中填写英文，空格，横线等信息

如：客户端程序框架[DEMO] - Adaapter适配器

效果：

4.      Ribbon工具条上的Button控件，如果想使用开关效果，可以选择属性中用

5.      Ribbon工具条上的各控件（BarEditItem），与其子控件（）之间的关系，及使用方式

Ø CheckEdit：如果要设置其默认值，应该用其外部容器来设置，如：chkModeSwitchContainer.EditValue = false;//不是设置这个chkModeSwitch，如图：

Ø TextEdit：如果要设置其默认值，应该用其外部容器来设置，如：txtSendMockNumContainer.EditValue = 2;

Ø 但是用外部容器来的事件（EditValueChanged）来处理内部控件值事件时，会有延迟出现，比如，想检测CheckEdit的CheckedChange事件，这时候，应该用内部控件的事件实现才能及时响应，如：

chkModeSwitch.CheckStateChanged +=ChkModeSwitchCheckStateChanged;

///<summary>

///调试模式开关

///</summary>

///<paramname="sender"></param>

///<paramname="e"></param>

voidChkModeSwitchCheckStateChanged(objectsender, EventArgs e)

{

if (((DevExpress.XtraEditors.CheckEdit)(sender)).Checked)

    {

        _debugMode = true;

    }

else

    {

        _debugMode = false;

    }

}

 

 

Ø 其他

 

6.      Ribbon窗体，可以隐藏Windows自己的标题栏，如图效果：

需要让窗体继承自RibbonForm基类

子窗体继承自XtraForm，这样可以统一界面样式、颜色等

7.      Ribbon窗体去掉快速工具栏按钮：

 

8.      NavBarControl的一些操作

 

隐藏组标签

 

关闭折叠按钮

 

 

关闭UI元素

 

允许选中

 

9.      表格控件

设置只读：

publicvoidSetGridEditEnable(booloptionSet)

{

string option = "Editable";

DevExpress.Utils.SetOptions.SetOptionValueByString(option,gridView2.OptionsBehavior, optionSet);

}

 

设置表头：

privatevoidSetData()

{

DataTabledt = newDataTable("data");

dt.Columns.Add("ID");

dt.Columns.Add("Type");

dt.Columns.Add("Content");

dt.Columns.Add("Comment");

dt.Rows.Add(newobject[] { "001","错误", "数据库连接已断开!", "建议尽快解决." });

dt.Rows.Add(newobject[] { "002","警告", "SQL 语句错误!", "检查拼写." });

dt.Rows.Add(newobject[] { "003","警告", "登陆失败!", "重新输入用户名密码." });

dt.AcceptChanges();

BindingSourcebs = newBindingSource();

bs.DataSource =dt;

    gridControl2.DataSource = bs;

 

//gridControl1

    gridView2.Columns[0].Caption = "编号";

    gridView2.Columns[1].Caption = "类型";

    gridView2.Columns[2].Caption = "错误信息";

    gridView2.Columns[3].Caption = "备注";

 

//若有一列不设置值，且其他列宽度不超出容器总宽度时，设置了列宽的列按照列宽展示，未设置列宽的列填充剩余宽度；

//若所有列均设置了列宽，在列宽总和与容器长度不匹配时，列宽按照设置的列宽数值的比例进行显示

gridView2.Columns[0].Width= 25;

gridView2.Columns[1].Width= 25;

//gridView2.Columns[2].Width= 50;

gridView2.Columns[3].Width= 50;

 

SetGridEditEnable(false);

}

 

 

10.  设置皮肤

首先，要获取多种皮肤的话，必须在Program.cs中的Main函数中注册

 

///<summary>

///应用程序的主入口点。

///</summary>

[STAThread]

staticvoid Main()

{

DevExpress.UserSkins.BonusSkins.Register();

DevExpress.Skins.SkinManager.EnableFormSkins();

Application.EnableVisualStyles();

Application.SetCompatibleTextRenderingDefault(false);

Application.Run(newFrmMain());

}

 

privatevoidSetSkin(stringskinName)

{

DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(skinName);

}

 

//获取所有皮肤名字

voidInitSkins()

{

foreach(DevExpress.Skins.SkinContainercntinDevExpress.Skins.SkinManager.Default.Skins)

    {

repositoryItemComboBox3.Items.Add(cnt.SkinName);

    }

   repositoryItemComboBox3.SelectedIndexChanged += newEventHandler(RepositoryItemComboBox2SelectedIndexChanged);

}

//ComboBox下拉事件

voidrepositoryItemComboBox1_SelectedIndexChanged(objectsender, EventArgs e)

{

DevExpress.XtraEditors.ComboBoxEditcomboBoxEdit= (DevExpress.XtraEditors.ComboBoxEdit)sender;

SetSkin(comboBoxEdit.SelectedItem.ToString());

}

 

 

11.  ComboBox下来列表（repositoryItemComboBox）

 

12.  Wizard 向导控件

Ø 有两个构造函数，只能在其中一个构造函数中初始化向导中的数据。

Ø 此向导最大的作用是导航，及动画，向导中每个页面上的控件都是自己手工添加的，在同一个页面中，可以直接操作控件，给控件赋值、取值。

Ø 向导提供一些API，可以控制向导上的元素，如：上一页，下一页等控件的使能。

Ø 可以修改向导每一页上的信息；

Ø 可以增加、删除向导页；

Ø 使用示例

                        i.             增加控件

                      ii.             其他

13.  DataGrid表格

Ø 设置列展现形式。

Ø 多选

Ø 字段绑定

Ø 通过代码设置只读

string option = "Editable";

DevExpress.Utils.SetOptions.SetOptionValueByString(option,gridView1.OptionsBehavior, false);

Ø 表头、单元格居中设置

全局调整：

 

单列调整：

如果是动态生成列，则可以如此设置：

列自动宽度开关，设置好后，拖动列宽

 

Ø 去掉分组头。

 

 

 

Ø 去掉网格线。

 

 

 

 

Ø 隐藏表行头。

 

 

 

14.  时间控件（DevExpress.XtraEditors.DateEdit、DevExpress.XtraEditors.TimeEdit）用法

Ø 这两个控件最重要的属性是有两个掩码（Mask）

Ø 区别：DevExpress.XtraEditors.DateEdit有一个向导，用起来比较方便、DevExpress.XtraEditors.TimeEdit上下图标选择时间

15.  图表

Ø 两柱状图之间距离调节

                        i.             如图：有两根柱状图

通过BarDistance调节两个柱状图之间的距离，调节为0时：

调节为2时，我们看到蓝色无条纹的柱状图整体往后平移了2个单位：

Ø 柱状图宽度调节

Ø 坐标文字方向

选中坐标轴，然后找到 Label 属性，修改角度即可：

Ø 其他

16.  其他