We Keep Coding

UWP GridView - How to maintain visible items upon resizing (Column count changes)

I have a GridView that I use to display thousands of images/thumbnails (using data binding). I used ImplicitAnimations to add transitions, so that when the control is resized and the number of columns changes - every item smoothly goes into the new position after the resize.
Problem
This all works fine when the user is at the top of the GridView but becomes a problem the further the user scrolls. The further you scroll, the more items are moved around when the number of columns changes. More rows are added/removed, but the Scrollbar is kept on the same position/offset which causes previously visible items to go far away from the view - and the user gets lost.
What I tried so far...
I tried working around this issue by tracking the first visible item on every scroll change event and then scrolling to it on SizeChanged event. The problem of this solution, however, is that it's really rough. Animations are no longer noticable and the whole experience is laggy.
Is there any better solution to this problem?
Illustration of the problem
Video example
I have also made a video to better illustrate the issue.
(The images have been blurred because some were NSFW)
Video Link
What I am looking for is a way for the scrollbar to adjust it's position on resize and stay on the same items the User was looking at - without messing up the animations.
Edit
So apparently this can't be solved any other way but manually scrolling to the item I wish to have visible on resize, which I already tried doing and had problems with the animations being really rough again because the ScrollToItem was happening AFTER the animations were being triggered.
So my question now is - can I scroll to an item on reorder/resize - BEFORE the animations get triggered? That way I think I could keep the smoothness. Using the resize event, however, doesn't work for this.
Edit 2 - Code sample
<GridView x:Name="mylist" animations:ReorderGridAnimation.Duration="600" ItemsSource="{Binding Source={StaticResource viewSource}}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center" Loaded="ItemsWrapGrid_Loaded"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="300" Height="300" Background="Gainsboro">
<Image Source="{Binding ThumbnailImage}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
GridView ItemSource is binded to the following CollectionView
<UserControl.Resources>
<controls:AdvancedCollectionView x:Key="viewSource" Source="{x:Bind Collection}" />
</UserControl.Resources>
I switched to the Community Toolkit for the animations and the AdvancedCollectionView. The custom panel is being used for 2 reasons - to get the Panel and apply implicit animations to it - and to keep the scrollbar on the rightmost side when HorizontalAlignment is Center.
The CollectionView is binded to an ObservableCollection.
To reproduce the issue - just add a lot of items into the ItemSource and try resizing the GridView at different scroll offsets (check video sample)
.

For your this issue, it may be caused by the ListView and GridView UI virtualization, you can try to use VariableSizedWrapGrid as the GridView's ItemsPanel,
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
But it will cost much device memory and performance without virtualization. So you should also take into consideration displaying many images in once.
As for displaying the Item that the User is looking at, since there are many items displayed in the screen, the GridView does not know to track witch one.So also as #Pratyay's suggestion, you need to keep track of the item then make the ScrollView witch is in the GridView to scroll to the item.

C#/UWP OutOfMemory when change ListView to horizontal

I have a ListView with about 700 entries (one Image per entry). The ListView works just fine in vertical scroll mode. But when I change it to Horizontal it crashes on the phone with an OutOfMemory Exception.
I change the scroll direction with code from Microsoft:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
It seems like Lord Windows is trying to load the complete list at once when the Orienation is changed. Anyone else experience this issue, maybe even provide a solution?

By using StackPanel you loose virtualization. So all the 700 entries are in memory at once when you scroll the list. Use VirtualizingStackPanel or better, use GridView instead of ListView.

make horizontal scrollable custom calendar

I want to make calendar in windows phone 8 using XAML/c#. It should like horizontal bar that has 7 days fit to screen. User can scroll these dates like on phone screen there are 1 to 7 dates and user can scroll to view more dates. If user tap on any date then its color should be changed. I was trying to implement longlistselector and listbox but could do successfully. I am newbie. please help.
Thanks

ongListSelector doesn't allows you to change scroll orientation. In other controls like the ListBox you can specify the property ItemsPanel to use a StackPanel with horizontal orientation. But that property is not available in LongListSelector (i don't know exactly the reason, but i think it might be something related with the complex grouping, jump list capabilities of the LongListSelector.
If you need to make an horizontal list and you don't need to group your data, you can replace the LongListSelector with a ListBox and use the ItemsPanel property to specify a horizontal stackpanel.
So, no issues.
You can of course use the ListBox instead of LongListSelector.
You can have it horizontally scrollable as follows:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Your control... />
</DataTemplate>
</ListBox.ItemTemplate>

Trying to animate lines of a grid onto the screen in a WPF app and detect how many can fit on the screen at a time

I am creating a food menu that displays on a TV screen in a restaurant. There will be no interaction of the menu itmes, so I need to automatically display the items and rotate through them when all the items do not fit on the screen at one time.
I have all of the components of the project built, even the administration of what the menu items are and which day to display them. Now, I need to finish the display of the items for the TV screen(s).
I am new to WPF, so I'm trying to figure out the best way to do this:
Menu items are listed with the name of the item along with calories, protein, fat, and cholesterol. Because of this, they need to be displayed in a grid.
There is no user interaction with the menu, so I need to make sure that I can properly break up the list of items into "pages" that animate on and off the screen after displaying for several seconds. The way I was thinking of doing this was to add each item on the view and evaluate how much space is available beneath it. If the space is less than a certain height, the rest of the menu items are queued for display on the next "page". It would be nice to have each line item rapidly slide in from the left, having all of them appear on the screen within 1-2 seconds.
What is the best control to display them with? An ItemsControl, perhaps?
Any great ideas you guys have that can point me in the right direction will be greatly appreciated!
Update: Here's a very rough mockup of what I'm talking about:

You can probably get away with using a Grid or StackPanel and animate the margin value of your elements (use negative margins to slide items in). You need to ensure that the parent element has ClipToBounds set to false so that items can be drawn outside of its bounds.
To measure an element's height, just use the Measure method on the row element to figure out how much space it needs vertically. Based on that, you can determine how many elements you can fit in one page.

There's too much work to build everything, however the following should lead you to your goal :
Inherit from Listview add create a 'PartialListView' , with added dependencies properties StartIndex and ItemHeight. It should build a listview of the right height showing items from StartIndex to StartIndex+ItemHeight. (scroller not shown. Use FindDescendant (of type scrollviewer) to find the scrollViewer after listView is loaded, and set its VerticalOffset)
Create a UserControl with two dependency properties :
1) bind to an ObservableCollection of MenuItems (Item, Calories, ...)
2) an ItemHeight (integer property).
Then on each collection change you modify IndexList, an Observable collection of numbers {1, 6, 11 }, which are the first indexes of each menu.
The control code will look like :
<ListBox ItemsSource="{Binding IndexList, ElementName = mycontrolname}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<ScrollViewer x:Name="PageScroller" ... set to horizontal only, not
showing any bar >
<StackPanel Orientation="Horizontal" />
</ScrollViewer>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<app:PartialListView StartIndex="{Binding }"
IndexCount = "{Binding IndexCount, ElementName = mycontrolname}"
ItemsSource = "{Binding MenuItems , ElementName = mycontrolname}"
/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
switching 'screen' will be done by changing the HorizontalOffset of the PageScroller ScrollViewer.

Sync two listboxes

I have a layout where there are two listboxes, I was trying to make them sync and found some tutorials on the net like http://www.software-architects.com/TechnicalArticles/ScrollSync/tabid/101/Default.aspx or Listboxes, scrolling in sync but they dont seem to work under WP7 SDK because there are missing events or properties. Does anybody out there solved the problem of syncing two or more listboxes under windows phone 7?
Thanks in advance

See my answer in this question: WP7 ScrollViewer programatically scroll a background ScrollViewer in sync with front ScrollViewer
You will be able to keep the scrollviewers in sync, but it may not be smooth, as the WP7 scroll viewer does not have a Scroll event.
To get the ScrollViewer's generated by the ListBox's, use this solution by ColinE WP7 - Scrolling ListBox in external ScrollViewer.

I came up with a solution using the WarpPanel available from the Silverlight Toolkit for Wp7
<ListBox Height="350" HorizontalAlignment="Left" Margin="102,72,0,0" Name="lsScore" VerticalAlignment="Top" Width="450" HorizontalContentAlignment="Center">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="220" ItemHeight="50"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
This solution uses one listbox which is ofc always on sync and in order to seperate the data and align them I use the ItemWidth thats why it has such a high value. If you know any other way to seperate the data without using the ItemWidth property feel free to add an answer. Thanks in advance.