CODEWITHSUNDEEP
c#winforms
milan m
milan m

Reputation: 2244

Which control should I use to build a user interface like this in c# winforms?

The number of items in one row should be flexible. i.e, I should be able to set it at runtime depending upon the monitor size. The information shall come from database.

Should I use listview? How?

User Interface

Upvotes: 0

Views: 550

Answers (3)

quetzalcoatl
quetzalcoatl

Reputation: 33506

Well, I'd say that we've got here a:

  • some kind of "wrap panel" that lays items horizontally, with "overflow" to the next line
  • custom control for viewing a single item

That custom control has constant Width-Height (note that the textual data has ellipsis "..." - it did not force the item to grow, so the bounds are constant) and consist of:

  • item-title: label with text-ellipsis
  • item-details: three labels with text-elipsis
  • title-backround: border with rounded rectangle
  • item-background: border with rounded rectangle

I remember that there was some wrapping panel in Winforms, it was probably FlowLayoutPanel, but if you dont like it, you should be able to find some other implementation on the internet. That's a common thing.

I also think that the "border with rounded corners" does not exist in plain WinForms, but you can easily write your own, see i.e this question.

EDIT: if you don't want to handle manually the adding/removing items from the FlowPanel, here's an example of BindableFlowLayout - but be sure to read the comments. You will have to probalby adapt it a little to draw your item-controls. Actually, that should be quite handy approach.

EDIT2: I don't remember any other way of forcing ListView to display your UserControls, etc. If you really want the ListView, then you will probably have to draw all the items manually. Here's an example of custom-drawn items - they are drawing a tiled list of photos in one example - "just" add to that your custom drawings. But that might be not an easy task actually.

EDIT3: the last thing I'd like to add is that you actually can use WPF in legacy apps. There are special "hosting controls" that allow you to embed a WPF view inside WinForms windows and WinForms views inside WPF windows. One of them is ElementHost (that's a WinForms control) inside which you can put a WPF control (or whole view). The only requirement is that the actual underlying Windows version and installed .Net frameworks must be new enough to know WPF at all. Here's a nice tutorial which explains the basics and shows how to place a WPF-y list inside WinForms window.

Upvotes: 1

Jason Williams
Jason Williams

Reputation: 57892

I would use a TableLayoutPanel to auto arrange the tiles.

For the tiles, I would create a UserControl and draw the layout I wanted in the Paint handler. A web search will easily find the code you need to draw a rounded rectangle, and drawing an image and a few lines of text is very simple.

By using a UserControl you get total control of how it looks, and it's much more efficient than using nested PictureBox and Label controls.

An alternative, but slightly more complex, solution is to use a ListView and owner-draw the items.

Upvotes: 2

Shantanu Gupta
Shantanu Gupta

Reputation: 21188

I am not sure how can we give rounded corner effect. Otherwise you can create a user control with properties like

class userControl:UserControl
{
public string Name{get;set;}
public string Desc{get;set;}
public string Price{get;set;}
}

Bind these properties to required labels in User Control. Then create N controls as per no of records in your collection and bind their properties to it.

Upvotes: 0

Related Questions