I am developing an application on the UWP primarily targeted to W10 mobile users, however I believe this issue will also be valid if attempted on a touchscreen W10 device.
I am using a ListView to lay out a set of buttons (ListViewItems, technically) which have text and an icon. They are in my SplitView and are used similar to how you see in the Windows default apps such as Groove Music and News, as pictured:
It works perfectly as I'd hoped, except that if the user pulls up or down on the ListView with their finger it will 'squash' the list up or down - a useful animation for lists of emails, for example, but something undesirable on the UI of my program.
Is there a way of disabling this behaviour? If not, is there an alternative control that could suit my needs, or should I use a custom control?
Set the ScrollViewer.VerticalScrollMode to Auto or Disabled on your ListView:
<ListView
x:Name="ListView"
ScrollViewer.VerticalScrollMode="Auto"
</ListView>
The default value is Enabled which will always "squash" the top and bottom. When set to Auto, then if there is no need to scroll (less elements than the viewport can fill), the "squash" effect will be disabled. And if you set the value to Disabled, then the scrolling will be disabled no matter how many elements need to be displayed.
For the official documentation see here.
Related
I'm working on a UWP app and I'm having some trouble with the visual states of some UI controls, specifically with buttons and toggle buttons.
Basically, I'd like the borders that become visible when you press the TAB key (to navigate using the keyboard) to have the same ZIndex of the rest of the control, ie. if part of the control is covered, they should be covered too in the same way. But, it looks like these borders are always displayed on top of the UI, no matter what. Here's a screen:
You can see the border going over the rest of the UI, while the rest of that toggle button is correctly covered. The same happens for buttons as well (not only toggle buttons), see here:
I've looked at the template for these controls, but I couldn't find anything related to these specific borders, nor to anything like an explicit Canvas.ZIndex setting or something like that.
I guess this behavior is on purpose, but is there a way to change this and make those borders behave like the rest of the UI?
Thanks!
EDIT: here you can see how a reveal highlight effect is correctly covered by the shadow and the other UI elements on the right, but the TAB border ignores that and is displayed on top of them.
I have noticed similar behavior was previously present in the Start menu as well (although it wasn't with focus border, but with the reveal effect clearly "continuing" into the cut-off portion of the button.
One workaround that comes to mind is to observe the state of the SplitView and when it is closed to actually change the width of the buttons (for example via a StateTrigger). This way the button's area will no longer be "hidden" and the focus border will work properly, as the buttons will end where they should.
Windows Explorer is able to display semi-visible items when scrolling. This behaviour produces a smooth scrolling.
Is there a way to reproduce this effect with the ListView in Windows Forms?
Update
I found by change another ListView with same behaviour:
Being able to scroll by a partial line is not generally a useful feature.
However, if you really want to be able to do it, just set ShowGroups to true. The ListView control will then allow pixel level scrolling.
For example:
I need to create an app for TV guide. Requirement is that UI must be a copy of one you can see here: raspored.bnet.hr. As you can see, there's a lot of data. So, basically it would be a large scrollable table. Since there is no such UI control as table on Windows Phone, I found out that the best approach would be to create one vertical listbox with horizontal listboxes as its items. This is all ok and I'm able to create it. But, to make it behave like a table I also need to make these horizontal listboxes scroll in sync, not to scroll one row at a time. Then I disabled horizontal scroll on horizontal listboxes, and enabled it on the parent (vertical) listbox and while it gave the result I wanted to achieve one big problem came up - UI virtualization. I know ListBox has UI virtualization enabled by default and I can see it while scrolling on vertical listbox, but when I disable horizontal scroll on horizontal listboxes, performance is really bad, and sometimes there's an OutOfMemoryException. I understand why this happens because when I disabled horizontal scroll, those listboxes didn't know which items are on screen anymore, so the loaded all of them into memory.
What I also tried is to leave scroll on every listbox so they have UI virtualization, and then place ScrollViewer above them. Then I tried to listen on Manipulation events on scrollviewer and progamatically scroll all of the listboxes as needed. This didn't work good, first of all ManipulationDelta event doesn't appear to fire frequently enough to make scrolling smooth, and I think there could be a performance problem with calling ScrollToHorizontalOffset on ~180 listboxes.
I also tried the LongListSelector from WP8 as I read that it has much better UI virtualization and should be used instead of ListBox. The problem with this is that I couldn't make it scroll horizontally. Is it possible at all? I tried to wrap it into ScrollViewer which can scroll horizontally and it's working, but only if I set fixed width on LLS.
I also tried Telerik's RadDataBoundListBox and the problem was similar, I can't get both horizontal and vertical scrolls on the same listbox. So I could only get that each list scrolls on its own.
Can someone tell me if they had similar situation and what would be the best approach to solve this? I believe I'm not the only one that has this requirement to implement large scrollable table.
Thanks
UPDATE:
I'll just inform you that I didn't find a proper way to implement this, instead I've done it in HTML with WebBrowser control. Seems like IE already has UI virtualization implemented so it can work with large pages very well.
May be in your listbox there are images? and Out of memory Execption will occur you can do 2 things:
Don't load data in one time use BackgroundWorker
Have one local image in the App of the image you are downloading and set it as default image & when you scroll to some 50 values in forward clean the image Url to local and when it comes back give again the image url you want to show .
Because i have used it to scroll around 20k values.
So I have made an app and set the layout so it appears ok in portrait mode. For the snapped view I created a ListView that contains different instances of the same objects. This ListView is initially collapsed and then when it changes to snapped the listview becomes visible and the portrait mode objects become collapsed.
This works fine, but as they are two different sets of objects it messes up the user experience. If they enter text into the boxes in portrait mode and then switch to snapped view all of their text will have gone (as they put it in the now collapsed text box).
The question is is it possible to just change the position / size of the elements so that they are the same objects just in a different place, depending on if we're in snapped mode or not?
Hope this is clear. Thanks.
Yes, in fact, that functionality is built-in to the LayoutAwarePage class, which is the type of Page you get when you add a Basic Page (vs. Blank Page) to your project. If you started with the Grid or Split App template, the provided pages likewise extend LayoutAwarePage.
These pages have some boilerplate XAML that leverages the VisualStateManager and defines states for the various application layouts. What you can do is design your layout for the full landscape mode and then use the Device window to record changes to your layout (placement, colors, etc.) for Snapped, Filled, and Portrait.
For instance, here's a simple UI in landscape mode:
Then by switching Visual state to Snapped and turning on Enable State Recording, I made changes to the layout:
At runtime, the app looks like the following in each of the two states. No code needed - it's all being handled by LayoutAwarePage switching between VisualStates as the orientation of the app changes.
I would like the same tool tip message (the one entered in the "ToolTip on myControlId" field) to be displayed when the mouse is hovered over an area which contains multiple controls. I tried putting the controls inside a Panel and GroupBox, but it only works when the mouse is in the "white space" area of the Panel/GroupBox, and, of course, does not work when the mouse is on a control within the Panel/GroupBox.
I'm from the web dev world so I'm open to suggestions for a new approach if I'm going about this the wrong way.
In standart windows developmern (WindowsForms) tootltip or tooltip control is associated to a single control. But you can use ToolTip control (see example how: ToolTip: Windows Forms .NET) and assign to all controls that recieve mouseover event.
If you're in WPF, the story becomes easier as you have message routing so usually it's enought to have subscription in one place.
Hope this helps.