NSDrawer-like control for WPF

Question

I'm trying to build a WPF application with a slide-out drawer like a lot of macOS applications have:

How would I go about implementing this?

Have you had a look at the documentation for ``NSDrawer``? Apple is deprecating the class, and urging developers to avoid drawer-like interfaces. If you intend to market your app on the app store, you should heed their advice, and think about an alternative way to display/gather information. — Paul Patterson, Jun 20 '17 at 18:57
No I haven't, since my question is about how to implement something similar using WPF. Last I checked, you can't submit WPF apps to the Mac App Store... — Neil, Jun 20 '17 at 20:22
The question is about how to implement this, not whether it's a good idea to implement it. — Will Custode, Jun 20 '17 at 21:16

Will Custode · Accepted Answer · 2017-06-20T21:22:07.633

In WPF you would typically display something like that using a separate child Window or a Popup within your current window. The Popup is going to be constrained within the borders of your parent window whereas the Window can be anywhere on the screen. You can launch a new window fairly easily:

var window = new Window();
// Initialize your content to whatever you want in the window
window.Content = new TextBlock() { Text = "Hello world };
window.Show();
// Use .Show() if you want to allow users to interact with both windows at the same time
// Otherwise use .ShowDialog() to force the user to interact/dismiss the child first

You'll need to control the position of the child window somehow if you want it to be tied to the side of your parent window. This SO article describes controlling window location. You'll probably want to do this during an event on your parent window that makes sense, like SizeChanged and LocationChanged.

Lastly, depending on how you want the window frame to look (I'd imagine the "drawer" isn't supposed to look like a full blown window just stuck to the side of your parent window) I would at least change the child's WindowStyle. Further, you could make the window transparent and totally restyle the content to look much more like what you have provided as an image.

This is roughly what you're looking for. I hope this helps.

NSDrawer-like control for WPF

1 Answers1