Skip to content

The ListView Extensions, SmoothScrollIntoView, should have options that only centers vertically or horizontally #647

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
3 of 24 tasks
HotCakeX opened this issue Feb 28, 2025 · 2 comments · May be fixed by #648
Open
3 of 24 tasks

The ListView Extensions, SmoothScrollIntoView, should have options that only centers vertically or horizontally #647

HotCakeX opened this issue Feb 28, 2025 · 2 comments · May be fixed by #648

Comments

@HotCakeX
Copy link
Contributor

HotCakeX commented Feb 28, 2025 •
edited
Loading

Describe the bug

When we use the SmoothScrollIntoView feature in the ListView Extensions on a ListView like this

SmoothScrollIntoViewWithIndexAsync(index: DeployedPolicies.SelectedIndex, itemPlacement: ScrollItemPlacement.Center, disableAnimation: false, scrollIfVisible: true, additionalHorizontalOffset: 0, additionalVerticalOffset: 0);

On a ListView with over 20 columns and 100k rows, it centers the selected row both vertically and horizontally, which is problematic and undesired because the user needs to scroll back horizontally all the way to the left side again.

There needs to be 2 more separate options such as CenterVertically and CenterHorizontally.

The code responsible for it is located here:
https://github.com/CommunityToolkit/Windows/blob/e2eb2c7b5dcc55e0a0f1923a4f4ea45f49a4fb77/components/Extensions/src/ListViewBase/ListViewExtensions.SmoothScrollIntoView.cs#L149C16-L154C27

Steps to reproduce

SmoothScrollIntoViewWithIndexAsync(index: DeployedPolicies.SelectedIndex, itemPlacement: ScrollItemPlacement.Center, disableAnimation: false, scrollIfVisible: true, additionalHorizontalOffset: 0, additionalVerticalOffset: 0);

Expected behavior

Only center vertically.

Screenshots

No response

Code Platform

  • UWP
  • WinAppSDK / WinUI 3
  • Web Assembly (WASM)
  • Android
  • iOS
  • MacOS
  • Linux / GTK

Windows Build Number

  • Windows 10 1809 (Build 17763)
  • Windows 10 1903 (Build 18362)
  • Windows 10 1909 (Build 18363)
  • Windows 10 2004 (Build 19041)
  • Windows 10 20H2 (Build 19042)
  • Windows 10 21H1 (Build 19043)
  • Windows 10 21H2 (Build 19044)
  • Windows 10 22H2 (Build 19045)
  • Windows 11 21H2 (Build 22000)
  • Other (specify)

Other Windows Build number

Windows 11 26120.3291

App minimum and target SDK version

  • Windows 10, version 1809 (Build 17763)
  • Windows 10, version 1903 (Build 18362)
  • Windows 10, version 1909 (Build 18363)
  • Windows 10, version 2004 (Build 19041)
  • Windows 10, version 2104 (Build 20348)
  • Windows 11, version 22H2 (Build 22000)
  • Other (specify)

Other SDK version

No response

Visual Studio Version

Preview

Visual Studio Build Number

Version 17.14.0 Preview 1.1

Device form factor

Desktop

Additional context

No response

Help us help you

Yes, but if others can assist.
HotCakeX added a commit to SpyNetGirl/Windows that referenced this issue Feb 28, 2025
@HotCakeX
Added CenterHorizontally and CenterVertically
82d8634 
Added CenterHorizontally and CenterVertically

Fixes this issue: CommunityToolkit#647
@HotCakeX HotCakeX linked a pull request Feb 28, 2025 that will close this issue
Draft
11 tasks
@michael-hawker
Copy link
Member

We should add this to another type of template, but it'd be good to discuss at a high level more about the suggested changes to the API like this:

```diff
public class Hello1
{
public static void Main()
{
- System.Console.WriteLine("Hello, World!");
+ System.Console.WriteLine("Rock all night long!");
}
}
```

Which gets nicely rendered like this:

public class Hello1
{
   public static void Main()
   {
-      System.Console.WriteLine("Hello, World!");
+      System.Console.WriteLine("Rock all night long!");
   }
}

It'd be nice if we can consolidate some of the underlying code across new functions and the existing one. But we may need separate enums for them all for the configuration?

I think ultimately, there's 9 different ways to pin the viewport to a corner/edge/center of the rect, right? But if we had Horizontal/VerticalAlignment with 3 options that gets us all the combinations, for instance, I think.

@HotCakeX
Copy link
Contributor Author

HotCakeX commented Feb 28, 2025 •
edited
Loading

I should do the - + style for every line i add/remove? But GitHub desktop app and the website itself already does it automatically for us.

Yes there can be more improvements but you wrote in the PR notes that we should only fix 1 issue at a time.

I followed the same coding style, comments etc. just like the rest of the code.

@michael-hawker michael-hawker linked a pull request Mar 3, 2025 that will close this issue
Added CenterHorizontally and CenterVertically to the ListView Extensions | Smooth Scroll Into View #648
Draft
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@michael-hawker @HotCakeX