Question

I need to develop several calendar type controls in winforms. These calendars are all vertical in nature. The concept is that the calendar will have a column for each day (in a month view), hour (in a day view) or week (in a yearly view). I’ve attached a sample (rather crude) image of the month view.

So far I’ve had a good crack at this using a table layout panel, with many panels and labels. This works, however it’s messy and is very slow to load. It also comes with a raft of problems that I’ve tried to overcome. I’ve attached a screenshot of how it looks at the moment.

I’ve come up against problems in rendering (the well known stuttering problem), which I’ve gotten over by hiding the grid while its being built, and then showing it when its done. Also, I’ve had problems with getting the table to resize correctly (the number of columns changes depending on the number of days in the month), as you can see in the screenshot the bottom row takes up all space. As you can imagine, this is all very nasty and seems to me to be rather hacky.

I’ve tried WPF a bit to see if I can overcome the problems, but it seems that though it may render a bit better, the issues with columns and row sizing are the same. Is there some other approach I could take to avoid these issues, or is it best to bite the bullet and just switch to WPF? I find it double frustrating because it would be quite an easy job to get this done in HTML using a table.

To reiterate the issues that I’m having are:

1. Columns are not automatically resizing as I would expect (the last column just fills the space making for some odd UI)
2. Rows are similar, with the bottom row taking up all the empty space.
3. Slow rendering
4. When re-sizing the control have to hide the grid otherwise get lots of stuttering
5. The hacky nature of the table layout panel

I appreciate any feedback users have on how I should best approach the problem.

Answer 1

I don’t have a lot of experience with Table Layout Panel, but after taking a quick look at it there seems to be the options of Fixed Size for a fixed number of columns/rows (which you would change in code) and a Percent size setting for each column. For example, when loading a month with 31 days, you would create 31 columns with a percent width of about 3.2258. You could probably do something like this:

int numColumns = 31;
tableLayoutPanel1.ColumnCount = numColumns;
tableLayoutPanel1.ColumnStyles.Clear();

for (int i = 0; i < numColumns; i++)
{
    tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100f / numColumns));
}

This would mean as you resize the window the each day stays the same size and they all expand to fit the width of the control. If that size is too small for you, and you need the columns to be a minimum width, you can put the TableLayoutPanel inside a control which has AutoScroll enabled, and set the minimum size of the TableLayoutPanel like so:

int minColumnWidth = 20;
tableLayoutPanel1.MinimumSize = new Size(numColumns * minColumnWidth, 0);

WPF could do this better but if you aren’t experienced with it, it will probably take much longer to do.

In Windows Forms, you could always draw the Calendar manually using the Graphics class and OnPaint overriding in a custom control. This would avoid the flickering and slow issues that child controls pose, and should be easier to learn than WPF.