Windowscommunitytoolkit: Create a "classic menu" control

[deltakosh]

Things to consider:

• [x] Accelerator (shortcuts) support
• [x] Leverage existing MenuFlyout if possible
• [ ] Provide binding support (ICommand?)

We could start from something like this:

<CommandBar HorizontalAlignment="Center" VerticalAlignment="Center" OverflowButtonVisibility="Auto">
            <AppBarButton Content="File">
                <AppBarButton.Flyout>
                    <MenuFlyout Placement="Bottom">
                        <MenuFlyoutSubItem Text="New">
                            <MenuFlyoutItem Text="Project" />
                            <MenuFlyoutItem Text="Solution" />
                        </MenuFlyoutSubItem>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Content="Edit">
                <AppBarButton.Flyout>
                    <MenuFlyout Placement="Bottom">
                        <MenuFlyoutSubItem Text="Go to">
                            <MenuFlyoutItem Text="Go to project" />
                            <MenuFlyoutItem Text="Go to line" />
                        </MenuFlyoutSubItem>
                        <MenuFlyoutSeparator />
                        <MenuFlyoutItem Text="Undo" Icon="Undo" />
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Content="View" />
        </CommandBar>

[Code-ScottLe]

Any example of this "classic" version that we are talking about?

[deltakosh]

Think about VS:

[hermitdave]

Maybe this might be even better
https://www.thomasclaudiushuber.com/2017/02/18/lessons-learned-from-building-a-visual-studio-shell-with-uwp/

[Code-ScottLe]

Do we have a defined set of features that we want to support? So far i see using keyboard shortcuts and keyboard navigation with this. Styling is going to be weird as well.

[deltakosh]

yep keyboard nav, shortcuts(access keys)

[bkaankose]

Current MenuFlyout is not mvvm compatible afaik. No matter what we do we must consider mvvm approach first imo.

[Code-ScottLe]

Probably a combination of keybinding and button command (both bind to a ICommand) ?

[Odonno]

@hermitdave The blog post of Thomas Claudius Huber is really awesome. I like the look of the menu in his Visual Studio made with UWP.

[mrlacey]

It's important to understand the motivation behind wanting something like this. Is it that someone must have an identical equivalent to the current/traditional/classic menu? Or is it something that's needed as a "stepping stone" to a newer, more modern, interface? I ask because there's no justification here which makes it hard to know that the right thing is being built and I'm reminded of a project I did many years ago which was porting a green-screen app to win32.
With that project, we recreated the green screen experience with something visually similar such that it didn't require any user retraining, even though we'd completely rewritten the front end and there were a few subtle differences in how it worked. The rewrite meant we could slowly replace, update and enhance the app a part at a time with modern (for then) UI without upsetting and confusing users with a big change at a single time.
While I can imagine a menu control as is mentioned here being useful it's important to understand why it's wanted and how it's expected to be used. Without this, you risk just creating a new control that may not be what's actually wanted.

[deltakosh]

One of the motivation here is to provide a required control for desktop developers. They may be motivated to move from WPF or Winforms while keeping some of their UI

[mrlacey]

@deltakosh Sorry, I wasn't clear. The point I was trying to make is that it's valuable to understand why the people who will use this control want it. It's always better to understand what people want and then build that, rather than build something and then ask if it's what they want. Doing the research up front avoids wasted effort and disappointment when people don't get what they were hoping for.

Building a control like this makes sense for a lot of reasons but what are the specifics of should be built?
Is the aim to recreate exactly what's currently possible in WPF? And WinForms? or should it be something updated and more appropriate to a modern app?

WPF, in particular, has a lot of properties, and even more events, for a MenuItem. Are all needed? If not all then which?
Or is the purpose of this item to first define these things?

[deltakosh]

Ok I get your point.
My initial thinking was to provide a WinForms comparable Menu control but you are completely right,let's use this issue to discuss what kind of API do we want.

ANy thoughts on this?

[deltakosh]

My POV here is that we should start by mimicking the WinForms behavior while keeping it simple.

Who is motivated to give a first try?

[skendrot]

Did you really just say

we should start by mimicking the WinForms behavior

[hermitdave]

I read it as start with something simple.

[deltakosh]

Yep, no need to go wild directly. A first step with a really simple menu

[Code-ScottLe]

I will try to find time to do it. Anybody is welcome to pick this up in the mean while.

[mrlacey]

If there's nobody asking for this and able to provide any specific requirements then I'd support the approach of creating something simple at first and then extending it as requested.

Specifically, I think it needs to have:

• Accessor keys for menu items
• Optional icons with text
• Item separators (lines)
• Shortcut keys
• Submenus
• Checkboxes for items
• Ability to enable/disable individual items
• Tap/click event or command support for each item

With no specific requirements coming in from real-life usage, I don't think this needs complex MVVM support.

[hermitdave]

@mrlacey not seen common usage of checkboxes in menu. but agree with general list.. I'd add commanding so be forward looking

[deltakosh]

Agree with both of you. If we have a first version with all of these it's gonna be perfect

[micahiverson]

How critical is Touch support, classic menus get criticized for lack of "Touch" ease of use, so what is primary input needed for this new menu system since it's UWP which focuses heavily on touch friendliness?

[deltakosh]

Keyboard, mouse and touch must be supported

[schemburkar]

Its not a control per say, but I have used something like below in my app.

and

We can replace the icon only to text label to give it a menu feel.

[micahiverson]

Personally, I'd prefer to move away from a "Top" menu with dropdowns and instead have "Shelves" with menu items within a panel.

I'd want the first "Shelf" to be a customized list of actions that I use frequently - Visual Studio has countless menu items, but in reality you only use 10-20 of them on any given day. Let me add the ones I want and let me re-order them.

Secondly, I'd want to have a customizable "Command Bar" at the top of my custom Shelf. And of course the option to "Pin" open my Shelf.

All the other shelves would be whatever that specific app would need. Personally I'd go away from "File, Edit, View, Window, Help and try to merge some of those items together.

Keyboard Shortcuts would be easy to use, Keyboard Navigation would be easy, you could easily show Keyboard Shortcut codes and of course you can have icons. Hover effects could use the new Lights coming in Creative Update.

Having a Shelf would be far more powerful than a bunch of dropdowns, would be far easier to code and customize on the fly, pinning it open would be super helpful and you could have virtually unlimited number of menu items within each shelf as you could add in scrolling. You could dock it to either side of the screen, and those of us who use VS would be used to this type of experience.

[hermitdave]

@micahiverson these changes have to be phased in. If you have a binary option, menu (old way) and something totally different, the adoption would be very small.
The old ways are still in heavy use and desktop bridge and further adoption of XAML / UWP by those apps would depend on how close the UI / UX can be.. not how modern.

[Code-ScottLe]

I think the point of this control is more like a way for older app to be ported to UWP without having to redesigned the whole UI/UX, but i agree that we should also make this more flexible if we can.

I think the question @micahiverson wanted to point out , is how touch-friendliness would this control be. More like how Windows scale the right click menu style from small/clean for mouse and big for touch.

[hermitdave]

Err.. We shouldn't be thinking of one or the other. Any pointer interaction is welcome. So touch is equally important.

[deltakosh]

completely aligned with @code-scottle

[micahiverson]

I was thinking this was in part re-thinking what it means to have a "Classic Menu" that would work well in UWP and offered a more flexible UI experience. Rather than, how can we technically build/support a Windows 32 type of menu system.

[IbraheemOsama]

I will start working on the classic menu in case no one already started :)

[deltakosh]

Wonderful! It's all for you:)

[skendrot]

closing via #1086

[Ajit14Singh]

how to show shortcut key in menuflyoutItem uwp

[skendrot]

@Ajit14Singh For generic UWP questions it is best to ask on stack overflow