New ListViewBase extensions - SmoothScrollIntoView

[Vijay-Nirmal]

SmoothScrollIntoView extensions allow scrolling the item into the view with animation.

Properties

Properties	Type	Description
Index	int	Index of the item to be scrolled
ItemPosition	Enum	Specify the position of the Item after scrolling
DisableAnimation	bool	To disable the scrolling animation

ItemPosition	Description
Default	If visible then it will not scroll, if not then the item will be aligned to the nearest edge
Left	Aligned left
Top	Aligned top
Centre	Aligned centre
Right	Aligned right
Bottom	Aligned bottom

Sample code - SmoothScrollingHelper

[IbraheemOsama]

Seems interesting to me :) maybe we can also include delay in scroll so the developer can control the scroll speed. let see what the community members think

[michael-hawker]

Based on discussions on this topic I've had, you probably want to make the ScrollIfVisibile a Boolean to separate it from where to scroll the object to. e.g. you may want to scroll the item to the center, but only if it's not already visible.

[Vijay-Nirmal]

@IbraheemOsama We should add 'Speed' (pixels per second) instead for 'Delay' or 'Duration'. So the duration of the animation will be (Math.Abs(previousOffset - newPosition)*1000)/speed. Also, we could have MaxDuration property to override calculated duration if it exceeds MaxDuration.

@michael-hawker I like the idea and it would be easy to do.

I am sorry guys. I can't create a PR for this because I don't think I have enough knowledge to do it. I have never created a helper or control other than for my own use.

[IbraheemOsama]

@Vijay-Nirmal everyone had this moment of 'First PR' :) when I created a gitHub account I didn't have any previous PR :P
Submit a PR and we'll help and share the knowledge through reviewing the PR.

[nmetulev]

@Vijay-Nirmal, please let us know if you would be able to submit a PR for this. Most of us would be more than happy to help :)

[Vijay-Nirmal]

Thanks, but I don't think I have enough knowledge about UWP development. I am sorry I can't create a PR for this. But in the future, when I am well versed in UWP development, I will create a PR to create a different feature.

[thecodrr]

@nmetulev I can take a look at this as soon as possible, if you want? This will be an exciting adventure.

[nmetulev]

Feel free to take this one @theweavrs

[nmetulev]

@theweavrs, were you planing on implementing this one? If so, I'll set the milestone for 2.1

[Vijay-Nirmal]

@nmetulev I will do it.

When I build the solution it gives me errors and warnings. I didn't change any code.

Here is the full error list

Error List pdf

[nmetulev]

That's great @Vijay-Nirmal.

This is a known issue with the new design project. We believe it's a VS/NuGet bug and those errors can be safely ignored.

[Vijay-Nirmal]

For some reason, I can't navigate to my helper page. Update: I fixed navigation part. Now, .bind file is causing an exception.

Also in .csproj file, it shows <None> tag instead of <Content> tag.

@nmetulev Is this method should be part of Microsoft.Toolkit.Uwp.UI.Helpers or Microsoft.Toolkit.Uwp.UI.Extensions?

@nmetulev Is there is a way to manually create controls in Property panel and link it to .xaml.cs file?

because SmoothScrollIntoView takes 5 parameters (item: object, itemPlacement: ItemPlacement, disableAnimation: bool, scrollIfVisibile: bool, horizontalOffset: int, verticalOffset: int) I want to create corresponding controls for every parameter in Property panel.

@IbraheemOsama I use ChangeView method in ScrollViewer to change the position. So I can't control the speed. Also, using ScrollViewer.ChangeView will standardize the scrolling animation.

[michael-hawker]

@Vijay-Nirmal since it's effectively an extension to ListViewBase, why not create a ListViewBase.Methods.cs class in the ListViewBase Extension directory?

Also, I didn't see scrollIfVisibile in the repo yet, is that on the todo list still?

As for the properties panel, they get added from looking at the .bind file. If you have a reference to the 'CurrentSample' then you could modify the descriptor manually after the XAML rendered event. @nmetulev do we expose that to the Sample Page? I couldn't find an example.

I'd see the sample maybe exposing the placement enum and the checkboxes and then just having a button (with the Shell.Current.RegisterNewCommand) which 'Scrolls Into View'?

[Vijay-Nirmal]

@michael-hawker Good idea.

I didn't see scrollIfVisibile in the repo yet, is that on the todo list still?

No. I have finished the whole implementation except sample app part. It is on my local computer.

they get added from looking at the .bind file

But this is a method I don't have xaml .bind only c# .bind to show the syntax of the method. I have planned to remove the c# .bind because syntax can be easily seen on the documentation panel.

[Vijay-Nirmal]

@michael-hawker Hmm... It's not a good idea. If I want to create this helper method inside Extensions/ListViewBase then do I have to share the same sample page? If not, I will create a separate page (SmoothScrollIntoView.xaml) but the file name (ListViewBase.Methods.cs) and the sample page name (SmoothScrollIntoView) won't be same. This may cause some confusion.

[michael-hawker]

@Vijay-Nirmal We don't really explicitly point to where the code lives via sample name, it's just been a convention. That's what the doc tab is supposed to be for. However, @nmetulev was planning to expand the samples so that each page could provide more than one sample, so that would be another solution because I would think code structure wise it would make sense if it's a ListViewBase method to stay with ListViewBase.

@nmetulev thoughts? (Also, when we do get to building the multiple samples per page, they should still be individually searchable for discoverability...?)

[Vijay-Nirmal]

@michael-hawker So the only option is to wait until next sample app update? or I will create a PR with a separate sample page and after update sample app update we can merge the two pages.

when we do get to building the multiple samples per page, they should still be individually searchable for discoverability?

Use folders like live tiles folder when we click on it, it will show all the pages containing in that folder.

[Vijay-Nirmal]

@michael-hawker Since this is an extension method I want to change LisViewBase class as static. It causes different problems like ListViewBaseExtensions can't be derived from a static ListViewBase class, I need using static Microsoft.Toolkit.Uwp.UI.Extensions.ListViewBase to access the enum inside the ListViewBase.Data.cs

How can I resolve it?

[nmetulev]

Makes sense for this to be in the ListViewBaseExtensions class. There is a naming collision between the extension class and the ListViewBase platform class (we are going to resolve that with #1561), I think that's what you are running into here.

#1438 is tracking multiple samples per feature. I'd recommend adding the sample on the existing page if possible and then we can separate them in a it's own sample once possible.

[Vijay-Nirmal]

Since I am creating Extension methods, I want a static class. So even though I use ListViewBaseExtensions class I want to convert it to a static class. Creating a static partial class is not a good idea because only Extension methods need a static class, properties and enums don't need a static class. So the only solution I can see is to create a different standalone (without partial) class for Extension methods.

I'd recommend adding the sample on the existing page if possible

Yes, it is possible but it will not a good idea because it will not explain the method properly.

[Vijay-Nirmal]

@nmetulev What shall I do?

[nmetulev]

Seeing how we will be changing the ListVIewBase class to ListViewBaseEx, it's a good opportunity to make it a static class. My recommendation here is to create a new static class in the ListViewBase folder called ListViewBaseEx and add your code there.

I can then go in an mark the old class obsolete and move the appropriate methods there to prepare them for 3.0.

What do you think?

[nmetulev]

Actually, per this comment, we will not be using the Ex extension, so the name will go back to ListViewBaseExtensions per the naming convention.

Is there a reason why the class needs to be static for your extensions @Vijay-Nirmal ?

[Vijay-Nirmal]

@nmetulev Because I am creating an extension method for ListViewBase just link LogicalTree for FrameworkElement.

[Vijay-Nirmal]

@nmetulev Any ideas?

[Vijay-Nirmal]

@michael-hawker

I didn't see scrollIfVisibile in the repo yet, is that on the todo list still?

I have updated my SmoothScrollingHelper repository.

---

If I use ItemsStackPanel as ItemsPanel then it is not working properly. For more info: Vijay-Nirmal/SmoothScrollingHelper#1

I can't debug this. I have tested all the value at runtime using breakpoints. My code is working properly. I think it is a bug with ItemsStackPanel. I need help to fix this issue.

[Kyaa-dost]

@Vijay-Nirmal What's the status on this?

[Vijay-Nirmal]

@Kyaa-dost I will do it. Currently, I am working in ASP.Net Core and .Net Core Framework. I can't find my motivation to get back to UWP. But I promise my self that I will do this. ✌

[Kyaa-dost]

@Vijay-Nirmal, not a problem at all. Thank you so much for responding 🙂

[Vijay-Nirmal]

Can I use Visual Studio 2019? Or Visual Studio 2017 only.

Because I am getting the below issue in VS 2019.

Unable to locate the .NET Core SDK. Check that it is installed and that the version specified in global.json (if any) matches the installed version.

I don't have Visual Studio 2017 installed. So I can't test it.

[Kyaa-dost]

@Vijay-Nirmal It has to do with the certain SDK dependency which VS 2019 doesn't install by default. See the issue and resolution provided by Michael.

#3132 (comment)

[Vijay-Nirmal]

I was actually thinking, you could make the current ListViewExtensions sample a longer list, you could add command buttons to call the new method and demonstrate it.

@michael-hawker Is there a way to create Properties Panel items from code (not from xaml.bind)? Because I need to get the inputs for my extension method.

Update: Currently, I am using hidden TextBlock to bind value and get it through c#. Using this workaround, except enum every other thing is working

Update: Found the reason for enum not showing in the Properties Panel. Problem is that the below line of code checks enum in Microsoft.Toolkit.Uwp.UI.Media not in Microsoft.Toolkit.Uwp.UI

https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/ef6527227539362125a0617d9b9821b2c009e11e/Microsoft.Toolkit.Uwp.SampleApp/Models/Sample.cs#L696-L697

Current Sample Page with the workaround

[Vijay-Nirmal]

@Kyaa-dost @michael-hawker Any update?

[Vijay-Nirmal]

@michael-hawker Update?

[michael-hawker]

@Vijay-Nirmal can you summarize what items are you waiting on from me at the moment? It sounds like you worked around most of your sample app issues?

If you're pretty close to completeness, can you open a Draft PR with the changes? It'll make it easier to review and point-out any assistance with any open questions you have as well.

Thanks!

[Vijay-Nirmal]

@michael-hawker I have created Draft PR #3222. I have two questions

1. I am using invisible TextBlock to create the properties in Properties Panel. Is it ok to do it?

https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/9ad0b20029c9266d0f3d162520fe549a9a9243fe/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ListViewExtensions/ListViewExtensionsXaml.bind#L20-L21
https://github.com/windows-toolkit/WindowsCommunityToolkit/blob/9ad0b20029c9266d0f3d162520fe549a9a9243fe/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ListViewExtensions/ListViewExtensionsPage.xaml.cs#L32-L33

2. Not working properly when using ItemsStackPanel as ItemsPanel. See SmoothScrollingHelper#1 for more details. I don't think it is the problem of the virtualized panel because ItemsWrapGrid works properly.