How to implement the Windows 10 OneNote Menu in Universal Windows Platform app - xaml

I would like to implement the OneNote app menu in my own UWP app. In the closed state, the menu only shows the 'hamburger' button, but when clicked a menu pane slides in from the left.
I have tried to use the SplitView, but it doesn't allow me to set the width to 0 when collapsed, always showing a narrow line on the left side. I also considered using the 8.1 Flyout control, but that doesn't see to animate the correct way.
So, what's the correct way to implement the OneNote menu behavior?

You need the SplitView, but don't mess with the width of its pane.
Instead, set the DisplayMode to Inline (or Overlay) and toggle the IsPaneOpen property.

Related

UWP menu without hamburger

This is my first UWP app
I have a SplitView. On the right side I want a menu. On the left side I want to be able to load different pages into it(frame)
The only menu I can find have that hamburger in it(AppBarButton).
This app will only run on windows desktop machines so I do not have need of the hamburger and it will be rather useless.
I have spent the last two nights looking for options but all I get are hamburgers.
Can someone please point me to an example of a no hamburger menu or a tutorial of some kind?
I am sure I can figure it out once I know what elements to use, I just need a push in the correct direction.
What you need is a base page (let's call it "HostView") this will simply have a SplitView control with the DisplayMode set to Inline and the IsPaneOpen set to true. You can also set the side panel width by using the OpenPaneLength property.
Your menu buttons go into the SplitView.Pane and you place a Frame control in the SplitView.Content. This frame will navigate to the correct page when a menu item is selected.
If you set the properties as I said above then you will not need a Hamburger menu to open the side panel at all. However, please consider the fact that users will want to resize your app, and they might resize to a very narrow size which means it might not have enough space to display all the content. IN which case you will need to collapse the side panel and show a hamburger menu to open it when needed. You don't have to do this, but it is something to consider.

FinderSync issues with sidebar icon, toolbar icon and context menu

I am developing a mac app that must provide support for FinderSync application extension. Everything works fine, except some sidebar and toolbar icon issues.
Is there a way to programatically add the toolbar and sidebar icons without user intervention?
As from documentation, I didn't find anything to help me do that. They refer to these icons, by mentioning that the user must manually drag the folder manually to sidebar, or manually customize the toolbar, but not API to achieving this at runtime.
However there are apps that add themselves back if someone removes them from the toolbar.
Is there other way to display an icon for my folder, except iconset? I noticed that there are other apps out there which do have an icon in the sidebar, but they do not seem to have an icon set in bundle resources and the CFBundleIconFile is set to an icns resource.
Is there a way to disable a menu item in menuForMenuKind: ? In a normal NSMenu situation, the menu item should have no action or target, but this is not the case. Even if I do so, menu item is still enabled.
Thanks a lot for your help!
Welcome to the world of pain.
I've been developing Finder Sync extension as well, so here are answers to your questions:
Now I'm searching for the way to add programmatically Toolbar button, I saw some phrases that this can be done.
To add item to sidebar, you should use some LSSharedFileList code:
Add Item to Finder Sidebar
Via the same API you can check if your item is present in the sidebar, and do not add the duplicate.
Now (since Mac OS X 10.11) sidebar icon can be changed only via iconset. Previously it was possible to change it via Finder code injection, which is not allowed in 10.11.
Just use [menuItem setEnabled:NO]. Also please note that not all menu stuff is available in 10.10 - for instance, checkboxes are not shown and separator item is shown as space. Also, sender parameter in your handlers is always empty NSMenuItem object.

How to implement facebook like menu (left menu) in windows store app

Basically, I want to be able to create a menu which on clicking on some button will appear from left (or right) and on clicking anywhere on main screen the user would be able to dissmis the menu. For example the facebook app has something similar on all platforms (so on Windows 8 also).
I have found a solution for Windows phone (http://sviluppomobile.blogspot.cz/2013/08/add-lateral-menus-to-windows-phone.html), which is not the way to go for Windows 8. Maybe I could use some hand made animation for aflyover, which would be in default outside of viewport. However, I guess there must be better or ideally already proofed solution.
Also I found two questions here on SO, which asked for same thing I guess, but no answers there ...
How to do: lateral menu like in "Music" app on Windows 8 / 8.1 and
https://stackoverflow.com/questions/22613421/windows-8-1-apps-left-menu
I know, that it is not the best way on windows platform to implement menu (we have top app bar, right), but our customer just wants this.
I would like to ask for some hints or ideally a code for a native implementation for Windows 8.1 using XAML (C# or VB.NET). Thanks to everybody who will give it a thought.
You'd put a StackPanel with Orientation="Horizontal" in a ScrollViewer. Put three panels in the StackPanel - let's make them Grids and call them: left, middle and right. On SizeChanged events of the ScrollViewer - set the Width and Height of the middle grid to the same values as ActualWidth and ActualHeight of the ScrollViewer and perhaps set the left and right grids to be a little bit narrower to leave space to see a little bit of the middle panel when you scroll to the ends. Make the ScrollViewer scroll horizontally by setting Horizontal/VerticalScrollMode and scroll bar visibilities and make the ScrollViewer snap to your grid panels by setting the HorizontalSnapPointsType and HorizontalSnapPointsAlignment properties. Also set IsHorizontalRailEnabled on the horizontal ScrollViewer to true if you have any vertical ScrollViewers in your panels and make their IsVerticalRailEnabled="true" so only one of them scrolls depending on the manipulation direction. Finally - put a transparent overlay panel as a top child of the middle panel handle the tap events on the overlay to scroll the middle panel back into view when it isn't centered and in the handlers of the menu buttons scroll the horizontal ScrollViewer to the start/end.

how to align text center in nsMenuItem Cocoa Mac osx

I am new in MAC OS X development, I have to align text centre in nsMenuItem but I not find any particular solution. I checked on google but not find any tutorial.
Find some tutorial but not exactly same, in these tutorial we take a NSView in nsMenuItem and then Insert subview in NSVIEW to accomplish it centre align.
Is there is any better solution? Please provide me link if possible.
Edit : I attached screen shot, but this is not working for me.
Thanks
You can set the Attributed String of the menu item, which does allow you to center the text, as well as change the font, color and size of the text as well.
I do not know which version of Xcode/OSX you are using, but under Xcode 5.0.2 you can use the built-in interface builder to edit the attributed strings of menu items.
Click the MainMenu.xib entry, then click the menu you want to edit to open it, then click the menu entry. On the right side of the window there should be some options, if not click the right most square in the group of 3 at the top right of the Xcode window 1.
Once you have the right panel open click the Attributes Inspector icon [2] (4th from the left, looks like a slider type icon). At the bottom of the list of attributes you will see an entry for "Attrib. Title" [3].
That is where you can set a custom font, color and alignment for your menu item.
If you need more control then that provides, you can also embed custom NSViews into your menus which gives you complete control over how the menu will look.

Why the WebView is always on top and can't handle focus etc.?

Suppose you have in your Metro application the WebView component taking all the "page" height (except the "title bar" of course). At the left side from the WebView you have some other elements. You also have some buttons in appBar with ListView menus attached to the button press events. Now try to see your ListViews and also try to move focus between the page elements with TAB key ;)
I already have some workarounds.
I just wanted to ask if somebody knows WHY Microsoft did it so?
Thanks.
The WebView has it's own HWND (Window), while your Metro app renders in a second HWND. There is a long history in Windows development regarding windows and overlaps. Usually when a window is in front of another window, the OS only draws the top window pixels.
That's what's happening here. The WebView windows is drawing over top of your other UI elements.