DevExpress使用心得三：界面设计（2）-控件新闻-慧都网

DevExpress使用心得三：界面设计（2）

转帖|使用教程|编辑：我只采一朵|2014-06-09 10:02:45.000|阅读 7122 次

概述：本文接着完成上一节的未完的界面设计内容，DevExpress换肤功能已经讨论过了，这里就不再重复了。首先建立三个全局变量，一个存放文件路径，一个存放数据，一个存放过滤条件。

相关链接：

本文接着完成上一节未完的界面设计内容，DevExpress换肤功能已经讨论过了，这里就不再重复了。首先建立三个全局变量，一个存放文件路径，一个存放数据，一个存放过滤条件。

取得数据并绑定到表格中：

string DBFileName;
        DataView dataView;
        string[] filter = new string[3];

给 imageList 添加一些图标（随便找的）：

DBFileName = DevExpress.Utils.FilesHelper.FindingFileName(Application.StartupPath, "Products.xml");

            if (!string.IsNullOrEmpty(DBFileName))
            {
                DataSet dt = new DataSet();
                dt.ReadXml(DBFileName);
                gridControl1.DataSource = dataView = dt.Tables[0].DefaultView;
            }

将工具栏中的种类项与图标和表格关联起来：

string[] s = new string[] { "Beverages","Condiments","Confections","Dairy Products",
                                        "Grains/Cereals","Meat/Poultry","Produce","Seafood"};
            for (int i = 0; i < s.Length; i++)
                repositoryItemImageComboBox1.Items.Add(new ImageComboBoxItem(s[i], i + 1, i));
            RepositoryItem ri = repositoryItemImageComboBox1.Clone() as RepositoryItem;
            colCategoryID.ColumnEdit = ri;

修改种类项的属性：

this.repositoryItemImageComboBox1.SmallImages = this.imageList1;

此时运行后界面应该是这样的：

下面添加条件筛选的功能，首先定义一个设置筛选的方法：

private void SetFilter()
        {
            string f = "";
            foreach (string s in filter)
            {
                if (f != "" && (!string.IsNullOrEmpty(s)))
                {
                    f += " And";
                }
                if (!string.IsNullOrEmpty(s))
                {
                    f += s;
                }

                dataView.RowFilter = (f == "") ? "No Filter" : "Filter: " + f;
                iRecords.Caption = "Records: " + dataView.Count.ToString();
            }
        }

然后定义3种点击事件，一个是筛选checkBox，一个是小于所选日期，一个选择种类：

private void discontinued_EditValueChanged(object sender, EventArgs e)
        {
            if (discontinued.EditValue == null)
                filter[0] = "";
            else
                filter[0] = string.Format("[Discontinued] = {0}", discontinued.EditValue.ToString());
            SetFilter();
        }

        private void lastOrder_EditValueChanged(object sender, EventArgs e)
        {
            if (lastOrder.EditValue == null)
            {
                filter[1] = "";
            }
            else
            {
                filter[1] = string.Format("[LastOrder] < #{0}#", StringDataToFormat(lastOrder.EditValue.ToString()));
            }
            SetFilter();
        }

        private static string StringDataToFormat(string s)
        {
            try
            {
                DateTime dt = DateTime.Parse(s);
                return string.Format("{0}/{1}/{2}", dt.Month.ToString(), dt.Day.ToString(), dt.Year.ToString());
            }
            catch
            {
                return s;
            }
        }

        private void categories_EditValueChanged(object sender, EventArgs e)
        {
            if (categories.EditValue == null)
                filter[2] = "";
            else
                filter[2] = string.Format("[CategoryID] = {0}",categories.EditValue.ToString());
            SetFilter();
        }

此时效果如下：

此时界面基本完成，剩下的就是加上一些边边角角的东西，比如设置清除筛选条件按钮：

private void iClearFilter_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)
        {
            discontinued.EditValue = null;
            lastOrder.EditValue = null;
            categories.EditValue = null;
        }

然后总体效果图就出来了：