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.
Related
I am new to cross platform development using Xamarin and currently I'm into the "trial and error"-phase.
I want to create my own drawer menu, that goes from bottom and upwards on slide. The menu will have different stop stages since the buttons (navigations) will be grouped by some logical things such as "Favorites", "Frequently used" etc. where each row (group) will contain the buttons.
Is it possible to create a "master page" with a header and also the footer which is the drawer?
I stumbled upon the ControlTemplate, however to me that only seem to be a master layout that can be used in pages to get the same look-and-feel without redundant style coding. As per Xamarin documentation
Control templates provide a clean separation between the appearance of a page and its content, enabling the creation of pages that can easily be themed.
But I need to add some behavior to it such as the sliding animation etc. and I would really not like to add a container in each xaml-file that I place the drawer menu in within each xaml.cs file.
Is there a good way of achieving something like this?
All help is appreciated.
The Slide Over Kit may help. It is a free plug in that allows you to create slide in panels from any direction.
https://github.com/XAM-Consulting/SlideOverKit
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.
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.
I'm trying to add some icons to the right hand side of a menu next to a menu item, ideally all right justified. I'm aware that NSMenuItem allows you to add menu items (for instance, see the MenuMadness example). I'm really looking for something like the security / signal strength indicators in the OS X Wifi menu.
One approach that I've seen is to add items to the menu, and use setView to provide an NSView for each item. However, that seems to be more complicated than it should be. Is there a way to just add an icon / multiple icons to the menu?
On the left side of the menu, it's easy, and even possible from Interface Builder.
For the right side, I assume you have read the Apple doc Views in Menu Items. I agree, its far more complicated than it needs to be, with many drawbacks.
Have you considered a hacky workaround?
Just create your menus with no title, and set up an icon that is a very wide icon image, including your title and icon.
You loose the keyboard navigation if the user wants to navigate in your menu by typing the beginning of the menu's title, and it might not work if your titles need to be dynamic, but depending on the context of this feature, it's worth a shot.
Similar to the last item of this menu:
I'd like to know how I can make a side panel which when collapsed only shows a button that upon click will be pushed out by an expanded area which contains a control of choice. Clicking the button again will collapse the expanded area and the only thing you'll see is the button at the edge of the screen again.
I don't have any good examples of something similar so I hope you understand what I mean.
in toolbox there is a control called Expander, which is exactly for that purpose