使用C#语言实现的查询条件界面展开和收起功能

时间:2021-12-25 04:50:11

先简单说一下应用场景,现有一个c#客户端的查询界面,上方放置查询条件,下方放置查询结果。因为实际情况中查询条件可能占了好几行的位置,所以希望在界面上默认只保留一行最主要的查询条件,并在右侧有一个“展开/收起”功能。

收起时界面:

使用C#语言实现的查询条件界面展开和收起功能

展开时界面:

使用C#语言实现的查询条件界面展开和收起功能

最开始我的实现方式是这样的,在界面上放置一个linklabel,设置此linklabel的鼠标单击事件,调整查询条件所在panel的height属性。

使用C#语言实现的查询条件界面展开和收起功能

c#代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
using system;
using system.collections.generic;
using system.componentmodel;
using system.data;
using system.drawing;
using system.linq;
using system.text;
using system.windows.forms;
namespace satyrandnymph
{
public partial class formmethod1 : form
{
//收起状态时panel高度
private const int heightwhenfold = 50;
//收起状态时linklabel显示文字
private const string descriptionwhenfold = "展开";
//展开状态时panel高度
private const int heightwhenexpand = 85;
//展开状态时linklabel显示文字
private const string descriptionwhenexpand = "收起";
/// <summary>
/// 窗体构造函数
/// </summary>
public formmethod1()
{
initializecomponent();
//构造函数后将panel调整为收起状态
lnkcontrolheight.text = descriptionwhenfold;
pnlqueryconds.height = heightwhenfold;
}
/// <summary>
/// linklabel单击事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void lnkcontrolheight_linkclicked(object sender, linklabellinkclickedeventargs e)
{
//根据显示文字为展开/收起,调整panel的高度及linklabel展示文字
if (lnkcontrolheight.text == descriptionwhenfold)
{
lnkcontrolheight.text = descriptionwhenexpand;
pnlqueryconds.height = heightwhenexpand;
}
else if (lnkcontrolheight.text == descriptionwhenexpand)
{
lnkcontrolheight.text = descriptionwhenfold;
pnlqueryconds.height = heightwhenfold;
}
}
}
}

不过我认为这样处理还是不够完美:每次使用都需要专门创建一个linklabel,并且每个页面的代码都不一样,因为父容器的标识符是不一样的。

为了解决这两个问题,我设计了一个自定义控件以方便后续的开发工作。

控件名为heightcontroller,界面如下:

使用C#语言实现的查询条件界面展开和收起功能

自定义控件中只包含一个linklabel,autosize属性被设置为false,dock属性被设置为full,textalign属性被设置为middleleft。

c#代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
using system;
using system.collections.generic;
using system.componentmodel;
using system.drawing;
using system.data;
using system.linq;
using system.text;
using system.windows.forms;
namespace satyrandnymph
{
/// <summary>
/// 展开/收起控制器
/// </summary>
public partial class heightcontroller : usercontrol
{
/// <summary>
/// 展开/收起控制器
/// </summary>
public heightcontroller()
{
initializecomponent();
}
private void heightcontroller_load(object sender, eventargs e)
{
//设计器模式时,不触发展开/收起,否则会对设计工作造成干扰
if (!this.designmode)
{
//调整展开/收起情况
if (controllerstatus == controllerstatusenum.fold)
{
fold();
}
else if (controllerstatus == controllerstatusenum.expand)
{
expand();
}
}
}
/// <summary>
/// 控制器状态
/// </summary>
private controllerstatusenum _controllerstatus = controllerstatusenum.fold;
///<summary>
/// 控制器状态
///</summary>
[system.componentmodel.description("控制器状态")]
public controllerstatusenum controllerstatus
{
get
{
return _controllerstatus;
}
set
{
_controllerstatus = value;
}
}
/// <summary>
/// 父容器展开
/// </summary>
public void expand()
{
controllerstatus = controllerstatusenum.expand;
if (this.parent != null)
{
this.parent.height = heightwhenexpand;
}
this.lnkheightcontroller.text = descriptionwhenexpand;
}
/// <summary>
/// 父容器收起
/// </summary>
public void fold()
{
controllerstatus = controllerstatusenum.fold;
if (this.parent != null)
{
this.parent.height = heightwhenfold;
}
this.lnkheightcontroller.text = descriptionwhenfold;
}
/// <summary>
/// 收起时高度
/// </summary>
private int _heightwhenfold = 50;
///<summary>
/// 收起时高度
///</summary>
[defaultvalue(50)]
[system.componentmodel.description("收起时高度")]
public int heightwhenfold
{
get
{
return _heightwhenfold;
}
set
{
_heightwhenfold = value;
}
}
/// <summary>
/// 收起时显示文字
/// </summary>
private string _descriptionwhenfold = "展开";
///<summary>
/// 收起时显示文字
///</summary>
[system.componentmodel.description("收起时显示文字")]
public string descriptionwhenfold
{
get
{
return _descriptionwhenfold;
}
set
{
_descriptionwhenfold = value;
}
}
/// <summary>
/// 展开时高度
/// </summary>
private int _heightwhenexpand = 85;
///<summary>
/// 展开时高度
///</summary>
[defaultvalue(85)]
[system.componentmodel.description("展开时高度")]
public int heightwhenexpand
{
get
{
return _heightwhenexpand;
}
set
{
_heightwhenexpand = value;
}
}
/// <summary>
/// 展开时显示文字
/// </summary>
private string _descriptionwhenexpand = "收起";
///<summary>
/// 展开时显示文字
///</summary>
[system.componentmodel.description("展开时显示文字")]
public string descriptionwhenexpand
{
get
{
return _descriptionwhenexpand;
}
set
{
_descriptionwhenexpand = value;
}
}
/// <summary>
/// 点击linklabel文字
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void lnkheightcontroller_linkclicked(object sender, linklabellinkclickedeventargs e)
{
if (this.parent != null)
{
int height = this.parent.height;
//根据父容器高度判断父容器应是收起还是展开
if (controllerstatus == controllerstatusenum.fold)
{
expand();
}
else
{
fold();
}
}
}
}
}

使用此控件时,直接将此控件拖入要改变高度的panel或其他容器即可。

使用C#语言实现的查询条件界面展开和收起功能

使用前需要先在控件属性中设置好如下5项内容:

使用C#语言实现的查询条件界面展开和收起功能

各属性说明如下:

1、controllerstatus,是一个枚举,包含expand和fold两种选择,决定窗体打开时查询条件是展开或是收起的。

2、descriptionwhenexpand,当查询条件区域处于展开状态时,控制器展示的文字

3、descriptionwhenfold,当查询条件区域处于收起状态时,控制器展示的文字

4、heightwhenexpand,查询条件区域处于展开状态时高度

5、heightwhenfold,查询条件区域处于收起状态时高度

heightcontroller控件使用效果如下:

收起时界面:

使用C#语言实现的查询条件界面展开和收起功能

展开时界面:

使用C#语言实现的查询条件界面展开和收起功能

demo程序下载地址:

链接: http://pan.baidu.com/s/1jhsvvee  密码: qfp7

以上所述是小编给大家介绍的使用c#语言实现的查询条件界面展开和收起功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!

原文链接:https://my.oschina.net/Tsybius2014/blog/791349?utm_source=tuicool&utm_medium=referral