Custom TimePicker Control in Gtk# using MonoDevelop and Gtk3

• Download source files - 23.4 KB

This control is written in C# and uses the GTK version 3.

Background

About a year ago, I finally made the switch to Linux (Linux Mint with the Cinnamon desktop) and I am very happy with it. For many years, I was a Windows user, writing C# programs in Visual Studio, and taking full advantage of WPF and the MVVM pattern. Over the years, I had developed a few GUI applications that I use every day, and porting them to Linux seemed a daunting task, so this is what kept me “tied” to the Windows platform for so long.

Thanks to the valiant efforts of the Mono and MonoDevelop teams, porting the programs has been much easier than I originally thought. I have always used a multi-tiered approach - my programs consist of a data-layer DLL, a business-logic DLL and the executable which contains the GUI-specific code. Porting the two DLLs was trivial, since they needed no modifications at all, so that left only the GUI code to be re-written.

Let me say here that I miss the WPF bindings and the components supplied by the WPF Toolkit. They made for some easy programming. But the good thing about being a programmer is that you can always craft your own tools.

The focus of this article is one such “tool”, the TimePicker. I developed it to use in my programs, and, since it works, I hope it will help to make your life easier as well.

Goals

• Encourage other programmers to use the Mono / MonoDevelop / Gtk# combination by sharing this example.
• Make it as simple to use as a basic Gtk widget.
• Simplify the form design wherever Time values are required.

Solution

The TimePicker control derives from HBox and contains two SpinButtons and a Label for the “:” separator.

It exposes the following:

Properties

• Get / Set the Height / Width
• Get / Set the Orientation
• Get / Set the Hour
• Get / Set the Minute
• Get the Time as a decimal value, e.g., 1 hour 30 minutes will return 1.5 not 1.3

You can also initialize the Hour and Minute values via two functions:

void SetTime( int nHour, int nMinute )

or:

void SetTime( double dTime )

to avoid having to convert from one to the other.

Events

It exposes the TimeChanged event which the clients can use to know when the Time has changed.

Points of Interest

The Minute control advances / retards the Hour also, i.e., when the Minute value increases past 59, the Hour value is incremented, or if it goes from 0 to 59, the Hour value is decremented.

The default Orientation is Vertical, as I find it to be more compact than the Horizontal.

Sample Usage

Initialization

TimePicker m_tpkr    = new TimePicker() ;

is equivalent to:

TimePicker m_tpkr    = new TimePicker() { Orientation = Orientation.Vertical };

but:

TimePicker m_tpkr    = new TimePicker() { Orientation = Orientation.Horizontal };

works just as well.

// 1. Set the Hour only                   : m_tpkr.Hour = 9;
// 2. Set the Minute only                 : m_tpkr.Minute = 15;
// 3. Set the Time via Hour & Minute      : m_tpkr.SetTime( 9, 15 );
// 4. Set the Time via a double value     : m_tpkr.SetTime( 9.25 );   // will show 09:15

Wire-Up an Event-Handler

m_tpkr.TimeChanged += OnTimeChanged;

Retrieve Values

    void OnTimeChanged( object sender, EventArgs e )
    {
        m_lblTime.Text = String.Format( "{0} -> {1} HH:mm", _
                             m_tpkr.Time.ToString( "N2" ), m_tpkr.StrTime ); 
        // alternate ways to retrieve the Time as a String :
        // m_lblTime.Text = m_tpkr.StrTime ;
        // m_lblTime.Text = m_tpkr.ToString() ;
        }
// double dTime =  m_tpkr.Time ;
// int nHour = m_tpkr.Hour;
// int nMins = m_tpkr.Minute;

Requirements

• Mono (currently I have version 6.6.0.166)
• MonoDevelop (current version 7.8.4)
• Gtk3 libraries

The supplied sample application is a MonoDevelop Solution. It requires the Gtk 3 packages.

Since these are DLLs, they are not included in the sample project, but the packages.config file is included. After opening the solution in MonoDevelop, select restore / update Packages and NuGet will fetch them.

Exercises for the Reader

This is the part where the authors put all the difficult stuff they avoided doing themselves! :-)

• Add Toolbox / Design-time support

  I build my UI in code. I have not used Glade or any other GUI design tool, so I am not familiar with them and what is required to make a widget available in the Toolbox.

• Combine with DatePicker to make a full DateTimePicker control

History

• 24^th March, 2020: Initial version