CODEWITHSUNDEEP
wpfuser-controlspopup
PeteH
PeteH

Reputation: 2454

Extending a WPF control into a dropdown

I've been developing with WPF and "vanilla" controls for a while, but I came across a scenario where nothing quite hit the spot.

I was looking for a TimePicker control, my constraint is that I'm looking for somehing I can both use and distribute free of charge. I found a control which looks like it might almost be ideal.

analog clock face

courtesy of https://www.roy-t.nl/2016/03/05/customizable-touch-friendly-timepicker-clock-for-wpf.html. This already exists as a WPF control, I can write a test app and use it. The user pulls the hands around (I'm using a mouse on a non-touch laptop) and sets the time. I have no requirement to set seconds, so....ideal.

Almost. The only thing is that this control is flat, the 150x150 pixels, or whatever, of real estate that it takes up right now is fixed.

I'm thinking of putting it into some kind of dropdown [popup], I guess like Microsoft's DatePicker control. A control which, when contracted, will just show digital time (read-only), but when expanded, will show this control and allow the time to be set. In the same way that DatePicker displays a calendar.

The trouble is that I'm not sure how best to go about it. I'm not sure what kind of task I'd be taking on. Can anybody give me some pointers? And give me an idea of the size of the task? Have you maybe seen an example of something similar, just so I can get an idea of the volume and complexity of the code involved? When I'm finished, this control will sit on a dialog, which will sit inside an application where capturing the time is a tiny fraction of the functionality. Also iirc there is only one place in the app where I need to capture the time. So whilst I'd like my control to look as good as I can make it, I don't want to get too bogged down developing "just" a control.

contracted DatePicker control (contracted)

enter image description here (expanded)

Upvotes: 0

Views: 420

Answers (1)

Andy
Andy

Reputation: 12276

Coincidentally I've also been looking at timepicker controls for my own project. I don't need draggable hands so I'm just doing two spinners. This will be in a usercontrol.

It's not a huge piece of work if you're OK with it not being re-templateable. Templating means a custom control which are harder. Fixed look can work in a usercontrol.

Drop downs usually mean a popup. Or at least the container your stuff goes in. https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/popup-overview This is in a separate window to the containing one so if you say dragged a browser window over it whilst open then you will find something odd happens. The popup will appear on top of the browser. Popups are fairly easy to use though. You can set datacontext in a similar way to what you might have seen for the likes of context menus.

 x:Name="myPopup" 
 DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Mode=Self}}"

An alternative is an adorner. They go in a special layer which is on top of everything else in a window. But they're in a window - so if you have one showing and drag that browser window over it, the browser will be on top.

Whether this is significant depends on how ephemeral that popup/adorner will be. It's not usually considered to be a problem for say combo boxes. Adorners are tricky to work with if you never did them before. There are people who already crossed that bridge and created re-usable approaches:

http://www.nbdtech.com/Blog/archive/2010/07/12/wpf-adorners-part-4-ndash-simple-and-powerful-system-for.aspx

Upvotes: 1

Related Questions