This is a migrated thread and some comments may be shown as answers.

How to handle the width of customized items?

7 Answers 152 Views

ListView

This is a migrated thread and some comments may be shown as answers.

红耀 asked on 24 Aug 2018, 09:11 AM

outlook-email-list.jpg

my-email-list.jpg

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

answered on 24 Aug 2018, 09:14 AM

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>" +

43. "" + this.Data["From"] + "" +

44. " " + this.Data["Subject"] + "" +

45. " " + bodyText + "</html>";

46.

47. this.element2.Text = "<html> " +

48. " " + this.Data["ReceivedTime"] + "</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. }

Accepted

answered on 24 Aug 2018, 11:45 AM

Hello,

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>" +

"" + this.Data["From"] + "" +

" " + this.Data["Subject"] + "" +

" " + bodyText + "</html>";

this.element2.Text = "<html> " +

" " + this.Data["ReceivedTime"] + "</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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to handle the width of customized items?

7 Answers, 1 is accepted