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.
Related
I have a chart with multiple chart areas and I want to have a listview where the user checks different signals, that are being plotted in the areas.
Since I want some signals to be displayed in more than one chart areas, I need the listview to reset every time the user selects a different chart Area.
To achieve this I think it is a good idea to create a new listview every time the user selects another chart area and bring the new to front.
My question is , how can I create multiple listviews at the exact same location, and also if someone has a better idea to this.
As you know, you can define the listview in code and do all the styling by hand or you can create a customControl for that.
But then, when the load event of your main form is fired, you create all the listview/customListViewObjects that you need and place them in the same location with the same size by setting their Location and Size property. Finally, you can use BrintToFront() on the required listview when an area is selected.
There are some other ways, but they aren't beautiful in winforms.
A) you can create a tab control with N tabs, then place a listview in each tab and set the tabControl style to the tab header/title is not shown. But as far as I remember, the tabControl will add a border frame that your cannot get rid of.
B) If you don't have many areas and its number is not going to change, you can create the listviews manually in your form editor, and place them wherever in your form (with the appropriate parent, of course). Then in your load event, you can set their location and size properties to the one you need. This is kind of ugly and you may see the controls moving when the form is loaded if you are not careful.
On the other hand, you can just have one listview and then, when the area is clicked you can reload all its child controls for the different signals.
I want a grid in my page to have a single column in portrait mode and have two columns in Landscape mode. Some of the content should move to the second column when the device is Landscape. I've tried to do this but couldn't.
I'm doing everything from code behind. Generating the grid, adding children etc. When Orientation changes, I destroy the current layout and create a new one. The problem with this approach is, any entered data will be gone. It's a huge code and not possible to put here. I want this layout change to happen automatically. So, any data that is entered is preserved after the orientation change.
Any help would be appreciated.
The trick is to have one grid that accommodates both states. You can use VisualStates to assign different Grid.Row, Grid.Column, Grid.RowSpan and Grid.ColumnSpan values to controls. This is done using Blend and is declarative in XAML. you give each state a name. In the code you detect size change of the window to trigger the different states using the VisualStateManager.
You can also do this without VisualStates. In that case in the event handler of the SizeChanged you have to set the appropriate values for all the controls yourself.
In Windows 10 UWP it got much simpler using RelativePanel. You can position controls in a more flexible way then with grids.
Martin
I am making an app for windows store; Like in c# we used Scroll bars to move down to the end of page and view all content, How can we do it for windows store? Like how to arrange data and use scroll bars to move to right and view all the data?
Typically you don't use ScrollBar controls directly and rather put your content in a Panel (usually Grid/StackPanel/Canvas) and put that panel inside of a ScrollViewer. Make sure to set Horizontal/Vertical-Scroll-Mode/BarVisibility and ZoomMode properties to match the direction of scrolling you want supported.
The benefit of using the ScrollViewer instead of ScrollBar is that you get smooth panning with touch that the platform handles for you with the Direct Manipulation layer that is not exposed to you in WinRT/XAML and also handles all the other inputs in a standard way.
Also if you are dealing with a list of items you want to scroll through, especially when the list is long - you would use some ItemsControl subclass - typically a vertical ListView for long, mostly text content lists or horizontal GridView for lists of richer media items. The benefit of using those is that they handle list virtualization for you - i.e. for lists of thousands of items you only get few item containers generated for the items currently visible in the control's view port and ones that are near the view port so they are ready when you scroll to them.
The templates of these list controls internally already have a ScrollViewer and the ScrollViewer's template has ScrollBars inside.
Is it possible to check has item already been rendered (therefore visible to user) on screen? I am trying to create image control with automatic "image swapping animation" but when I have hundreds of images on page (for instance in GridView) performance is terrible. I'd like to know which controls are visible to user so I'd run animation only for them.
You can check the item's position by getting UIElement.TransformToVisual() and then using it to get the coordinates of the item relative to the clipping frame of the ScrollViewer in your GridView, but the performance of it might not be very good if you check it on each ScrollViewer view change event and could use some optimization, which would also be difficult if your GridView supports virtualization, which it needs to if you want to be able to scroll through hundreds of images.
Oleh's suggestion is your best best if you don't want to spend days or weeks figuring it out. Your GridView will be virtualized if you use a virtualizing panel for its ItemsPanel property, e.g. a WrapGrid (Windows 8.0 default) or ItemsWrapGrid (Windows 8.1 default). Note that VariableSizedWrapGrid is NOT virtualized.
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).