I want to develop a WinForms application which is similar with Outlook. For the email list part, I use the custom item in the ListView to display the email information(From, Subject, Receive Time, Body Content). The ListView control is inside a split container(Dock Fill). So that, user can change the width of ListView.
The problem is, when the subject or body content is very long, I don't want the item to auto size. I want the item hidden the text when overflow. When user changes the width of ListView via split container, the text can be shown more or less according to the width of ListView. It likes in the outlook, you can change the width of the email list, the body content and the subject can be automatically displayed to fit the width. How to implement this function by using ListView?
7 Answers, 1 is accepted
01.
private
class
MailListVisualItem : SimpleListViewVisualItem
02.
{
03.
private
LightVisualElement element1;
04.
private
LightVisualElement element2;
05.
private
StackLayoutPanel layout;
06.
07.
protected
override
void
CreateChildElements()
08.
{
09.
base
.CreateChildElements();
10.
11.
this
.layout =
new
StackLayoutPanel();
12.
this
.layout.EqualChildrenWidth =
false
;
13.
this
.layout.Margin =
new
Padding(20, 0, 0, 0);
14.
15.
this
.element1 =
new
LightVisualElement();
16.
element1.TextAlignment = ContentAlignment.TopLeft;
17.
element1.Size =
new
Size(260, 0);
18.
element1.MinSize =
new
Size(260, 0);
19.
element1.NotifyParentOnMouseInput =
true
;
20.
element1.ShouldHandleMouseInput =
false
;
21.
this
.layout.Children.Add(
this
.element1);
22.
23.
this
.element2 =
new
LightVisualElement();
24.
element2.TextAlignment = ContentAlignment.TopLeft;
25.
element2.Size =
new
Size(80, 0);
26.
element2.NotifyParentOnMouseInput =
true
;
27.
element2.ShouldHandleMouseInput =
false
;
28.
this
.layout.Children.Add(
this
.element2);
29.
30.
this
.Children.Add(
this
.layout);
31.
}
32.
33.
protected
override
void
SynchronizeProperties()
34.
{
35.
base
.SynchronizeProperties();
36.
37.
if
(
this
.Data.GetType() !=
typeof
(ListViewDataItemGroup))
38.
{
39.
this
.Text =
""
;
40.
var bodyText =
this
.Data[
"BodyText"
] ==
null
?
""
:
this
.Data[
"BodyText"
].ToString().Replace(System.Environment.NewLine,
" "
);
41.
42.
this
.element1.Text =
"<html><span>"
+
43.
"<span style=\"font-size:12\">"
+
this
.Data[
"From"
] +
"</span>"
+
44.
"<br><span style=\"color:#13224D;font-family:Segoe UI;font-size:10\">"
+
this
.Data[
"Subject"
] +
"</span>"
+
45.
"<br><span style=\"color:#13224D;font-family:Segoe UI;font-size:10\">"
+ bodyText +
"</span></span></html>"
;
46.
47.
this
.element2.Text =
"<html><span> </span>"
+
48.
"<br><span style =\"color:#13224D;font-family:Segoe UI;font-size:10\">"
+
this
.Data[
"ReceivedTime"
] +
"</span></html>"
;
49.
50.
this
.TextAlignment = ContentAlignment.TopLeft;
51.
}
52.
}
53.
54.
protected
override
Type ThemeEffectiveType
55.
{
56.
get
57.
{
58.
return
typeof
(SimpleListViewVisualItem);
59.
}
60.
}
61.
}
This would not work when using StackLayouPanel. In this case, you need to manually measure and arrange the items. You need to set the ClipDrawing and ClipText properties as well. Here is the code:
public
class
MailListVisualItem : SimpleListViewVisualItem
{
private
LightVisualElement element1;
private
LightVisualElement element2;
protected
override
void
CreateChildElements()
{
base
.CreateChildElements();
this
.element1 =
new
LightVisualElement();
element1.ClipText =
true;
element1.TextAlignment = ContentAlignment.TopLeft;
element1.ClipDrawing =
true;
element1.NotifyParentOnMouseInput =
true
;
element1.ShouldHandleMouseInput =
false
;
this
.Children.Add(
this
.element1);
this
.element2 =
new
LightVisualElement();
element2.TextAlignment = ContentAlignment.TopLeft;
element2.NotifyParentOnMouseInput =
true
;
element2.ShouldHandleMouseInput =
false
;
this
.Children.Add(
this
.element2);
}
protected
override
void
SynchronizeProperties()
{
base
.SynchronizeProperties();
if
(
this
.Data.GetType() !=
typeof
(ListViewDataItemGroup))
{
this
.Text =
""
;
var bodyText =
this
.Data[
"BodyText"
] ==
null
?
""
:
this
.Data[
"BodyText"
].ToString().Replace(System.Environment.NewLine,
" "
);
this
.element1.Text =
"<html><span>"
+
"<span style=\"font-size:12\">"
+
this
.Data[
"From"
] +
"</span>"
+
"<br><span style=\"color:#13224D;font-family:Segoe UI;font-size:10\">"
+
this
.Data[
"Subject"
] +
"</span>"
+
"<br><span style=\"color:#13224D;font-family:Segoe UI;font-size:10\">"
+ bodyText +
"</span></span></html>"
;
this
.element2.Text =
"<html><span> </span>"
+
"<br><span style =\"color:#13224D;font-family:Segoe UI;font-size:10\">"
+
this
.Data[
"ReceivedTime"
] +
"</span></html>"
;
this
.TextAlignment = ContentAlignment.TopLeft;
}
}
protected
override
Type ThemeEffectiveType
{
get
{
return
typeof
(SimpleListViewVisualItem);
}
}
protected
override
SizeF MeasureCore(SizeF availableSize)
{
var result =
base
.MeasureCore(availableSize);
var dateSize = element2.DesiredSize;
element1.Measure(
new
SizeF(result.Width - dateSize.Width, result.Height));
return
result;
}
protected
override
SizeF ArrangeOverride(SizeF finalSize)
{
var result =
base
.ArrangeOverride(finalSize);
var dateSize = element2.DesiredSize;
element1.Arrange(
new
RectangleF(0, 0, result.Width - dateSize.Width, result.Height));
element2.Arrange(
new
RectangleF(result.Width - dateSize.Width, 0, dateSize.Width, result.Height));
return
result;
}
}
I hope this will be useful. Let me know if you have additional questions.
Regards,
Dimitar
Progress Telerik
It works perfect as I want. Thank you so much.
By the way, If I want the text end with (...) when overflow, how can I set?
I tried to set the property AutoEllipsis to true for the LightVisualElement, but it seems not working.
I also want to draw border for each custom item in the ListView, how can I do?
this
.element1 =
new
LightVisualElement();
element1.DrawBorder =
true
;
element1.BorderTopWidth = 0;
element1.BorderLeftWidth = 0;
element1.BorderRightWidth = 0;
element1.BorderBottomWidth = 1;
element1.BorderBottomColor = Color.FromArgb(239, 239, 239);
I just want to draw bottom border for the item, I set border properties like this. But it still has all borders.
this
.element1 =
new
LightVisualElement();
element1.DrawBorder =
true
;
element1.BorderTopWidth = 0;
element1.BorderLeftWidth = 0;
element1.BorderRightWidth = 0;
element1.BorderBottomWidth = 1;
element1.BorderBottomColor = Color.FromArgb(239, 239, 239);
I just want to draw bottom border for the item, I set border properties like this. But it still has all borders.
The AutoEllipsis would not work when HTML-like formatting is used. if you need this to work consider adding a separate LightVisualElement for the description.
To show only the bottom border you need to set the BorderBoxStyle property as well:
element1.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
Let me know if I can assist you further.
Dimitar
Progress Telerik