I've created a listview in WPF. The items in there are changing their backgroundcolor by clicking, in this case i deactivated the listview prop 'Focusable'.
For my usecase (on a touchscreen) i want to hide the scrollbar and just scroll by clicking an up/down button at the bottom. One click should scroll the whole page (UP/DOWN) and show the next (so far hided) items.
I'm seraching for a flexible solution and don't want to calculate pixels or smth like that (also the items haven't a fixed height, also the window)
Thanks in advance
First off, it might benefit you to take a look at How do I ask a good question?. Specifically, in your case it would be easier to understand the sitution if you included some of your XAML. However, I do think I have a solution for you.
ItemsControls like the ListView support "content scrolling", meaning the ability to scroll by content/items instead of by pixel. This question gives a solution to finding which items are currently visible in the ListView by accessing the internal ScrollViewer. ScrollViewer.VerticalOffset will tell you the index first visible item and ScrollViewer.ViewportHeight will tell you how many items are visible. To scroll to the "next page", you should just need to:
ScrollViewer.VerticalOffset += ScrollViewer.ViewportHeight;
Related
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
I have the following application:
I am developing a Windows Store app in which I need to show a big grid filled with buttons. The content of the buttons are some numbers and when I click any of them, I open a Popup with editor, where I edit those numbers. For that purpose I use a GridView, I put an ItemsWrapGrid as ItemsPanel. This makes the grid look exactly as I need it to look. I put the GridView inside a ScrollViewer, because I need to scroll the grid in both directions, since it has a lot of elements. Also I need to have the pinch-to-zoom effect that the ScrollViewer gives out of the box. I need to change the ItemsSource for that GridView when the user chooses different source in a ListView next to the GridView.
The problem:
Putting the GridView inside the ScrollViewer breaks the Virtualization inside and this has a major impact on my performance. When I switch the ItemsSource of the GridView, it takes more than 3-4 seconds for the rendering and during that time, the UI is frozen.
My question:
How can I keep the awesome stuff that the ScrollViewer gives me and also keep the virtualization? Because when I remove the ScrollViewer, changing between the ItemsSources happens almost instantly.
Any idea?
You'll be best off implementing virtualization yourself since you're trying to use the GridView far from the use cases it was designed for.
Put a Canvas in a ScrollViewer that does both pan and zoom and handle view change events on the ScrollViewer by laying out item containers inside and around the viewport. Avoid unnecessary changes too, so keep containers in place if they are to stay realized between view change events and recycle containers that are leaving the viewport neighborhood.
I have a ListBox that contains two columns - column one contains a Toggle Button, column two contains an Expander with multiple controls within it. If the expander is collapsed, the overall scrolling of the ListBox works fine. However, if the Expander is open and the expander contains a large quantity of items, the ListBox will scroll the entire row size, often not showing part of the expander list.
This would be similar to placing an image in the list box that is larger than the viewable area of the list box. In this case, if you click the scrollbar, you would want to "step" down the image, without it scrolling off the screen in one click.
Is there a setting for the ListBox that will allow the partial scrolling as I've described? My listBox is defined in a xaml, the controls are added via C# code.
Have you tried turning on smooth scrolling by setting ScrollViewer.CanContentScroll to false? This is what controls whether the ScrollViewer will scroll an item at a time, or smoothly with partial items available.
"ScrollViewer currently allows two scrolling modes: smooth
pixel-by-pixel scrolling (CanContentScroll = false) or discrete
item-by-item scrolling (CanContentScroll = true). Currently WPF
supports UI virtualization only when scrolling by item. Pixel-based
scrolling is also called 'physical scrolling' and item-based scrolling
is also called 'logical scrolling'."
(From this answer).
If you have a lot of items in your ListBox, this may not be an ideal solution, however, because it turns off Virtualization, and therefore may have a performance impact. Take a look at this answer to see more about smooth scrolling and virtualization. (One answer suggests a hack that allows for smooth scrolling and virtualization).
Sorry, I don't have any codes or markups to show you.
I just want help to get my scroll bar scroll to 10 rows down in a ListView when I drag the thumb button.
For a visualization just take an example of navigation home screen in Android home page. I want to implement exactly same idea in the vertical ListView or any ScrollViewer container.
If you have focus on one item within a ListView, scrolling is automatic.
item.Focus();
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.