WinUI3/UWP의 ListView/GridView에서 데이터 바인딩 되어 있는 데이터가 일정 기준에 따라 묶여 있는 그룹으로 처리하는 경우 헤더가 스크롤이 되더라도 그룹이 변경되지 않는 경우 고정되어 있고, 다른 그룹으로 변경될 때 애니메이션 효과가 적용되도록 되어 있습니다.
하지만 보다 복잡한 데이터 형태, 그룹 형태들을 처리할 수 있는 ItemsRepeater의 경우 이런 효과를 컨트롤에서 기본으로 제공하지 않고, 편한 방법을 제공하지도 않습니다. 실제 앱을 개발할 때 보다 복잡한 형태의 데이터 구조를 UI에 표시하거나, 특정 데이터 조건에 따라서 UI를 다르게 처리해 줘야 할 때가 많아서 ListView보다는 ItemsRepeater를 편하게 사용할 때가 많은데요, ListView에서 지원하는 효과를 지원하지 않아 고민하던 중 실험으로 가능한지 시도해보았고, 실제로 적용할 수 있을 것 같아 여기에 공유합니다.
기본적인 구현 원리는 스크롤 포지션에 따라서 Header의 위치를 이동시켜 실제로는 고정되어 있지 않지만 고정되어 있는 것 처럼 보이도록 만들었습니다. 떨림이 아예 없는 것은 아니지만, 향후 더 개선된 방법을 찾을 때까지 일단 이 방법을 개발하는 앱에 적용할 생각입니다. Composition API를 사용해 60FPS로 적용되고, 시스템 자원을 효율적으로 사용합니다.
소스코드는 Github에 올려놓았습니다.
lunelake/ItemsRepeaterHeaderEffect (github.com)