I'm rather new to Xamarin Forms and I am finding some of the rigidness of the UI to be difficult to deal with and would like some expert input. Basically what i'm trying to make is a preferably sleek menu UI like Example Menu (crudely drawn in MS paint) that is nothing more than a list of menu options, and when you click one, the ones below it slide or move down a bit to make room for an area with additional descriptive text. Also, if the menu option opens up and the other options no longer fit on the screen, I would want them to remain out of scope in a ScrollView.
Now my issue is that I don't really know the best way to go about it. My thoughts:
I am currently attempting to nest a grid inside of a scroll view and formulate some kind of function that will add an empty row definition under the indexed menu option button, and populating the empty row. Basically using adding/removing grid rows to handle the 'expanding and contracting' of the menu option. I am struggling to get this function bug free right now but I am wondering if animating this action is possible with a smooth easing sliding motion or if I should explore better easier options. It seems silly to constantly clear the grid and re-add all of the update rowdefinitions each time.
I am curious if perhaps dynamically changing the specific buttons row height when clicked might be cleaner than adding/removing rows. Or using a listview and changing the listview cell's height when clicked. Or would a stacklayout work best in this case since it is technically a stack of buttons. Is it best to add/remove rows or are there easier/better ways to handle this?
Essentially, I am looking for some pointers on which direction I should take that makes the most convenient sense. I chose to start with a grid because it seemed easiest to work with in this case but when looking to animate the menu option and make a sleek smooth menu I am starting to have doubts.
Thanks!
p.s. If someone can also provide or link me a relevant example of how an animation in this case would go down it would be greatly appreciated
Related
It is ugly but I can't find a better place to put Move-up and Down buttons.
What is your suggestion?
I would say remove them and make it drag and droppable :) Of course that isn't as intuitive to the user, but maybe you could have a label that says you can drag them to move them.
Position of buttons are right.
For a more eye catching UI use up arrow and down arrow from Webdings/Wingdings font.
BTW this quesion is more suited for here.(https://ux.stackexchange.com/)
Just remove them, they are superfluous. The user can already directly click the item, can use the up/down arrow keys and has a scrollbar. That's enough.
Not only is it unnecessary, it is actually inferior. Because the key won't repeat unless the user hammers the mouse button on it and it steals away the focus from the list. There are workarounds for those problems but that's just code you shouldn't write in the first place.
I think you can remove text (move up, move down) - arrows are intuitive for people. Also consider how Microsoft implemented same feature in Edit columns dialog for grid:
BTW the best option IMO is drag-and-drop rows (no buttons at all). But you should somehow provide to users information (cursor, border, tooltip), that it is possible..
How can it be done? If there are, for example, four groups of buttons in menu-like panel. How would you dock them to their initial location if the window is resized?
I am trying this using DockPanel and HorizontalAlign, but it seems to only be work for the last button on the right when the window is resized. But how do you dock(anchor) a group of buttons? Maybe put them in border object and use HorizontalAlign for it? Is there more elegant way to do this?
To summarize the comments: I don't know your background but it seems you are used to another way of UI design where you do not explicitely have to specify grouping etc in code. While that might seem more elegant, it is not: the designer generated code is awful and the whole system is not as flexible nor srtaightforward as what WPF gives you..
With WPF you get a clear one-to-one relationship between your intent (treating buttons as a group within a layout) and the actual code (put the buttons in a stackpanel/grid/...). Or draw a border around buttons and organize them vertically within the border vs in xaml use a border with a stackpanel inside. It won't get any more elegant than that.
Read up on WPF layouts and once you'll get a grip of it you will quickly see that it is rather powerful and beatiful at the same time. I found this tutorial pretty helpful when just starting with layouts. And google provides lots and lots and lots more information, as usual.
Like stijn said, put the buttons in a Grid or a Stackpanel and you'll be fine.
You may not think it's beautifull, but it's the best solution for your problem.
I have DataTemplates where the elements don't always fill the entire cell (ie. because I increase the row height).
Now a row gets selected only if I click inside the element, if I click outside the element, but still in the row nothing happens.
How to make a WPF datagrid row selectable even if I click in between to elements.
One idea would be to listen to the MouseDown in the datagrid, but how can I identify the Row
Update: A work around is to give all the cell datatemplate a border with transparent background to fill the cell (I find this not very elegant).
I not sure know why you think adding a "buffer" around your content is not a very elegant way to achieve the goal of enlarging the clickable region of that content.
I think that it is exactly what you should do and that it makes perfect sense architecturally, from the point of view of style, and most importantly from my point of view, for clarity and simplicity.
It is true there are other solutions that will give the same net effect to the user but the buffer approach does have this elegant property:
If you click it and it responds, what you clicked is part of the content that responds
Programming as a whole can be rather inelegant. It is often a bunch of special cases and complicated solutions to what seem like they should be easy problems. The famous computer scientist Donald Knuth has said that he feels what makes programmers programmers is their ability to cope with these inelegant things. The things that would make a mathematician go crazy.
I just switched over to WPF from just regular C# .NET for the more advanced UI design controls. I have managed to become extremely confused over what should be extremely simple, and I hope someone can help.
Basically I want to have sections on either side (for the most part these will be list-boxes inside of expanders), one list-box in the bottom-middle, and then a large rich text box taking up the middle.
My understanding was that I could just take a DockPanel, set the ChildFill to true, dock each one where it should go, and leave the last one to fill the space. The list boxes alone don't seem to work at with the DockPanel, and the DockPanel does not seem to expand when I change the size of the window.
So basically my questions are...
1) Why does the DockPanel not expand/shrink when I change the size of the window?
2) Buttons seem to work fine in the Dock Panel (like all of the examples I found) but using List Boxes instead does not seem to work properly. Why is this?
3) If I put the list boxes inside of Expanders instead, if I have say two of these on the left side, and I shrink the top expander, will the bottom expander grow upwards to fill the gap?
I can't really afford anything like ActiPro, and I was not able to get the AvalonDock controls to show up on the MSVC 2010 toolbar, so I am pretty much stuck using the default controls.
1). I have just tested the DockPanel and it does expand / shrink when the Window is resized - Have you removed the Grid that is placed in the Window by default in Visual Studio? If you mean it doesn't resize proportionally to the Windows size then i think you will need to use a Grid.
2). Again, list boxes work fine for me - Can you provide some more detail explaining why they don't work properly?
3). It depends on what you mean by "Grow upwards". If the top expander is closed, only the header will be displayed and the bottom expander will move up to take the space taken by the first expanders content (this is the default behaviour).
Do you have some XAML you can post as this will help identify your problems.
Just ran into a bunch of random but probably very simple questions while learning to work with WPF. If anyone can answer any of these it would be most appreciated.
I have a Rectangle that I styled to my liking, and then a StackPanel that I am actually placing the content (bunch of labels) in. It looks like Rectangle doesn't have a closing statement so how can I make it the parent of the StackPanel (I want the panel to move with it)?
I need to display text (labels) in a table form. It will only be two columns, and 8 rows (row count may change). I initially looked into just using a Grid, but as this is a intended for Layouts, it didn't work as expected. I also checked out DataGrid, but this seems confusing and overly complicated for my needs. Is there any simple Table style element I can use?
I have some Animated Expanders and I want to give the other UI content elements in my application a similar looking title bar. I haven't seen any sort of element for this, so I am wondering if I just need to use a Label or something and style it as close as possible to match, or if something already exists that I should use instead. If I need to use a label, what is the proper way to group/attach it with the element that it is the title bar for?
Do any controls exist for WPF that would allow for a Mac style menu bar? Something similar to where the icons move and expand as they are mouse over.
I have a grid that has two expanders (one above the other) with Height="Auto", and two rows set to Height="Auto" so that when the top is minimized, the bottom one moves up to close the gap. I am using a MinHeight right now to make sure they are at least somewhat expanded, but I would like to make them take up the full 100% of the Grid height. What should I do for this?
A rectangle cannot have child content, a better approach might be to use a Border, you can use this as that parent of your stackpanel, applying a Background and BorderBrush to make it look like a rectangle.
For a simple table layout Grid is the way to go. Is your problem that you need it to be dynamic? If so, you can create multiple grids with SharedSizeGroup on the columns to make them look like a single grid. See: How to align separate Grids created via templates along their columns / rows?
Learn about creating your own templates!
Not that I know of, but it would be relatively simple to do, create a storyboard that scales the item on mouse over.
No idea ... running out of steam!
As Andrzej Nosal mentioned, these really should be separate questions!