Results 1 to 13 of 13

Thread: MonthPicker control

Threaded View

  1. #1

    Thread Starter
    Join Date
    Apr 2007
    The Netherlands

    MonthPicker control

    Huge update! See below

    Here is a simple MonthPicker control. It displays a calendar-like list of the months as well as a dropdown to select a year. The user can click on the month names to select a month, and use the dropdown (or the buttons on either side) to change the year.

    The control features properties like SelectedMonth, SelectedYear and SelectedDate (the date is just the selected year and month with a day of 1).
    It also raises a SelectedMonthChanged event whenever the month, year or date changes.

    You can choose whether to display full month names or abbreviated names via the MonthDisplay property.

    The control also features a Culture property which allows you to set a culture ('language'). If you don't specify, the default culture of the user's computer will be used. The month names (actually the abbreviations are shown in the control) will be in the language of the selected culture.

    Update 1
    I am now rendering the months using a MonthPickerRenderer class. You can create a new class that inherits MonthPickerRenderer and use your own drawing code. There's methods you have to override such as OnPaintMonthBackground, OnPaintMonthText, etc, which provide you with a Graphics object and the coordinates (ClipRectangle) to draw, so you don't need to do any calculations or something; you just draw it in whatever way you like.
    I added a DefaultRenderer to show you how it's done.

    If you don't like all that work, but you do want to change the colors, you can also create your own MonthPickerColorTable and pass it to a new DefaultRenderer. Create a class that inherits MonthPickerColorTable and return the colors you want in the read-only property overrides. Then create a new DefaultRenderer and pass along your ColorTable:
    MonthPicker1.Renderer = New Renderers.DefaultRenderer(New YourCustomColorTable())
    That's it, the renderer will now use the colors you defined instead.
    If you need an example, see the DefaultColorTable.

    Due to the renderers I was able to make it look a lot more pretty, but as I said, if you don't like the looks, change it, it's easy!

    Oh, the months now resize according to the size of the control, and you can specify how many columns you want. In the last screenshot it was the default of 4 columns, but here's a silly example with 9 columns (the number of columns must be between 1 and 12 obviously):

    Update 2
    The year selection dropdown and the next/previous year buttons on either side are now custom drawn as well, and included in the Renderers and ColorTables.
    The 'Default' (example) renderer (and colortable) include the drawing for this part so you can see how it's done.

    The year selection dropdown is still a ComboBox but it is hidden (except for the dropdown itself) behind a Panel to make it look a bit neater.

    I've reworked the Renderer and ColorTable classes quite a bit. The ColorTables no longer use regular Colors, but GradientColors and SelectableColors.
    A GradientColor is just a set of two colors (one for the top of the gradient, one for the bottom) with a few helpful methods such as GetBrush (to create a LinearGradientBrush from these two colors) and GetPen (to create a gradient pen).
    A SelectableColor is an object with three GradientColors: one for the normal state, one for the selected state and one for the hovering state (mouse hovering over the element to draw).

    These classes allowed me to make the ColorTables and Renderers a bit neater.

    Finally, I made an example of a custom renderer to mimic the Windows 7 MonthCalendar control in month view mode. Drawing is all done in the Windows7CalendarRenderer. I've included a couple of helper methods in the Helpers class (available via MonthPickerRenderer.DrawingHelpers) that draw rounded rectangles to make life easier.

    As you can see, it's quite easy to make a renderer like this and it looks nearly spot on in my opinion

    Known bugs after update 2:
    The previous/next year buttons and the year label do not repaint when the mouse is hovering over them. The Renderers and ColorTables support a Hovering color and will draw them if the panels in question would get repainted, but for some reason they don't so you never see it.

    Feel free to edit it in any way you want and enjoy.
    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts


Click Here to Expand Forum to Full Width