├── Avalonia.ListBoxAnimation.Samples.sln ├── Avalonia.ListBoxAnimation.Samples ├── .gitignore ├── App.axaml ├── App.axaml.cs ├── Assets │ └── avalonia-logo.ico ├── Avalonia.ListBoxAnimation.Samples.csproj ├── Program.cs ├── SelectingItemsControlExtension.cs ├── Themes │ └── ListBoxItemTheme.axaml ├── ViewLocator.cs ├── ViewModels │ ├── MainWindowViewModel.cs │ └── ViewModelBase.cs └── Views │ ├── MainWindow.axaml │ └── MainWindow.axaml.cs ├── LICENSE.md └── README.md /Avalonia.ListBoxAnimation.Samples.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Avalonia.ListBoxAnimation.Samples", "Avalonia.ListBoxAnimation.Samples\Avalonia.ListBoxAnimation.Samples.csproj", "{C2C78DEC-3E02-4713-A214-20C6C7432155}" 4 | EndProject 5 | Global 6 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 7 | Debug|Any CPU = Debug|Any CPU 8 | Release|Any CPU = Release|Any CPU 9 | EndGlobalSection 10 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 11 | {C2C78DEC-3E02-4713-A214-20C6C7432155}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 12 | {C2C78DEC-3E02-4713-A214-20C6C7432155}.Debug|Any CPU.Build.0 = Debug|Any CPU 13 | {C2C78DEC-3E02-4713-A214-20C6C7432155}.Release|Any CPU.ActiveCfg = Release|Any CPU 14 | {C2C78DEC-3E02-4713-A214-20C6C7432155}.Release|Any CPU.Build.0 = Release|Any CPU 15 | EndGlobalSection 16 | EndGlobal 17 | -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Ll]og/ 33 | [Ll]ogs/ 34 | 35 | # Visual Studio 2015/2017 cache/options directory 36 | .vs/ 37 | # Uncomment if you have tasks that create the project's static files in wwwroot 38 | #wwwroot/ 39 | 40 | # Visual Studio 2017 auto generated files 41 | Generated\ Files/ 42 | 43 | # MSTest test Results 44 | [Tt]est[Rr]esult*/ 45 | [Bb]uild[Ll]og.* 46 | 47 | # NUnit 48 | *.VisualState.xml 49 | TestResult.xml 50 | nunit-*.xml 51 | 52 | # Build Results of an ATL Project 53 | [Dd]ebugPS/ 54 | [Rr]eleasePS/ 55 | dlldata.c 56 | 57 | # Benchmark Results 58 | BenchmarkDotNet.Artifacts/ 59 | 60 | # .NET Core 61 | project.lock.json 62 | project.fragment.lock.json 63 | artifacts/ 64 | 65 | # Tye 66 | .tye/ 67 | 68 | # ASP.NET Scaffolding 69 | ScaffoldingReadMe.txt 70 | 71 | # StyleCop 72 | StyleCopReport.xml 73 | 74 | # Files built by Visual Studio 75 | *_i.c 76 | *_p.c 77 | *_h.h 78 | *.ilk 79 | *.meta 80 | *.obj 81 | *.iobj 82 | *.pch 83 | *.pdb 84 | *.ipdb 85 | *.pgc 86 | *.pgd 87 | *.rsp 88 | *.sbr 89 | *.tlb 90 | *.tli 91 | *.tlh 92 | *.tmp 93 | *.tmp_proj 94 | *_wpftmp.csproj 95 | *.log 96 | *.vspscc 97 | *.vssscc 98 | .builds 99 | *.pidb 100 | *.svclog 101 | *.scc 102 | 103 | # Chutzpah Test files 104 | _Chutzpah* 105 | 106 | # Visual C++ cache files 107 | ipch/ 108 | *.aps 109 | *.ncb 110 | *.opendb 111 | *.opensdf 112 | *.sdf 113 | *.cachefile 114 | *.VC.db 115 | *.VC.VC.opendb 116 | 117 | # Visual Studio profiler 118 | *.psess 119 | *.vsp 120 | *.vspx 121 | *.sap 122 | 123 | # Visual Studio Trace Files 124 | *.e2e 125 | 126 | # TFS 2012 Local Workspace 127 | $tf/ 128 | 129 | # Guidance Automation Toolkit 130 | *.gpState 131 | 132 | # ReSharper is a .NET coding add-in 133 | _ReSharper*/ 134 | *.[Rr]e[Ss]harper 135 | *.DotSettings.user 136 | 137 | # TeamCity is a build add-in 138 | _TeamCity* 139 | 140 | # DotCover is a Code Coverage Tool 141 | *.dotCover 142 | 143 | # AxoCover is a Code Coverage Tool 144 | .axoCover/* 145 | !.axoCover/settings.json 146 | 147 | # Coverlet is a free, cross platform Code Coverage Tool 148 | coverage*.json 149 | coverage*.xml 150 | coverage*.info 151 | 152 | # Visual Studio code coverage results 153 | *.coverage 154 | *.coveragexml 155 | 156 | # NCrunch 157 | _NCrunch_* 158 | .*crunch*.local.xml 159 | nCrunchTemp_* 160 | 161 | # MightyMoose 162 | *.mm.* 163 | AutoTest.Net/ 164 | 165 | # Web workbench (sass) 166 | .sass-cache/ 167 | 168 | # Installshield output folder 169 | [Ee]xpress/ 170 | 171 | # DocProject is a documentation generator add-in 172 | DocProject/buildhelp/ 173 | DocProject/Help/*.HxT 174 | DocProject/Help/*.HxC 175 | DocProject/Help/*.hhc 176 | DocProject/Help/*.hhk 177 | DocProject/Help/*.hhp 178 | DocProject/Help/Html2 179 | DocProject/Help/html 180 | 181 | # Click-Once directory 182 | publish/ 183 | 184 | # Publish Web Output 185 | *.[Pp]ublish.xml 186 | *.azurePubxml 187 | # Note: Comment the next line if you want to checkin your web deploy settings, 188 | # but database connection strings (with potential passwords) will be unencrypted 189 | *.pubxml 190 | *.publishproj 191 | 192 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 193 | # checkin your Azure Web App publish settings, but sensitive information contained 194 | # in these scripts will be unencrypted 195 | PublishScripts/ 196 | 197 | # NuGet Packages 198 | *.nupkg 199 | # NuGet Symbol Packages 200 | *.snupkg 201 | # The packages folder can be ignored because of Package Restore 202 | **/[Pp]ackages/* 203 | # except build/, which is used as an MSBuild target. 204 | !**/[Pp]ackages/build/ 205 | # Uncomment if necessary however generally it will be regenerated when needed 206 | #!**/[Pp]ackages/repositories.config 207 | # NuGet v3's project.json files produces more ignorable files 208 | *.nuget.props 209 | *.nuget.targets 210 | 211 | # Microsoft Azure Build Output 212 | csx/ 213 | *.build.csdef 214 | 215 | # Microsoft Azure Emulator 216 | ecf/ 217 | rcf/ 218 | 219 | # Windows Store app package directories and files 220 | AppPackages/ 221 | BundleArtifacts/ 222 | Package.StoreAssociation.xml 223 | _pkginfo.txt 224 | *.appx 225 | *.appxbundle 226 | *.appxupload 227 | 228 | # Visual Studio cache files 229 | # files ending in .cache can be ignored 230 | *.[Cc]ache 231 | # but keep track of directories ending in .cache 232 | !?*.[Cc]ache/ 233 | 234 | # Others 235 | ClientBin/ 236 | ~$* 237 | *~ 238 | *.dbmdl 239 | *.dbproj.schemaview 240 | *.jfm 241 | *.pfx 242 | *.publishsettings 243 | orleans.codegen.cs 244 | 245 | # Including strong name files can present a security risk 246 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 247 | #*.snk 248 | 249 | # Since there are multiple workflows, uncomment next line to ignore bower_components 250 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 251 | #bower_components/ 252 | 253 | # RIA/Silverlight projects 254 | Generated_Code/ 255 | 256 | # Backup & report files from converting an old project file 257 | # to a newer Visual Studio version. Backup files are not needed, 258 | # because we have git ;-) 259 | _UpgradeReport_Files/ 260 | Backup*/ 261 | UpgradeLog*.XML 262 | UpgradeLog*.htm 263 | ServiceFabricBackup/ 264 | *.rptproj.bak 265 | 266 | # SQL Server files 267 | *.mdf 268 | *.ldf 269 | *.ndf 270 | 271 | # Business Intelligence projects 272 | *.rdl.data 273 | *.bim.layout 274 | *.bim_*.settings 275 | *.rptproj.rsuser 276 | *- [Bb]ackup.rdl 277 | *- [Bb]ackup ([0-9]).rdl 278 | *- [Bb]ackup ([0-9][0-9]).rdl 279 | 280 | # Microsoft Fakes 281 | FakesAssemblies/ 282 | 283 | # GhostDoc plugin setting file 284 | *.GhostDoc.xml 285 | 286 | # Node.js Tools for Visual Studio 287 | .ntvs_analysis.dat 288 | node_modules/ 289 | 290 | # Visual Studio 6 build log 291 | *.plg 292 | 293 | # Visual Studio 6 workspace options file 294 | *.opt 295 | 296 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 297 | *.vbw 298 | 299 | # Visual Studio LightSwitch build output 300 | **/*.HTMLClient/GeneratedArtifacts 301 | **/*.DesktopClient/GeneratedArtifacts 302 | **/*.DesktopClient/ModelManifest.xml 303 | **/*.Server/GeneratedArtifacts 304 | **/*.Server/ModelManifest.xml 305 | _Pvt_Extensions 306 | 307 | # Paket dependency manager 308 | .paket/paket.exe 309 | paket-files/ 310 | 311 | # FAKE - F# Make 312 | .fake/ 313 | 314 | # CodeRush personal settings 315 | .cr/personal 316 | 317 | # Python Tools for Visual Studio (PTVS) 318 | __pycache__/ 319 | *.pyc 320 | 321 | # Cake - Uncomment if you are using it 322 | # tools/** 323 | # !tools/packages.config 324 | 325 | # Tabs Studio 326 | *.tss 327 | 328 | # Telerik's JustMock configuration file 329 | *.jmconfig 330 | 331 | # BizTalk build output 332 | *.btp.cs 333 | *.btm.cs 334 | *.odx.cs 335 | *.xsd.cs 336 | 337 | # OpenCover UI analysis results 338 | OpenCover/ 339 | 340 | # Azure Stream Analytics local run output 341 | ASALocalRun/ 342 | 343 | # MSBuild Binary and Structured Log 344 | *.binlog 345 | 346 | # NVidia Nsight GPU debugger configuration file 347 | *.nvuser 348 | 349 | # MFractors (Xamarin productivity tool) working folder 350 | .mfractor/ 351 | 352 | # Local History for Visual Studio 353 | .localhistory/ 354 | 355 | # BeatPulse healthcheck temp database 356 | healthchecksdb 357 | 358 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 359 | MigrationBackup/ 360 | 361 | # Ionide (cross platform F# VS Code tools) working folder 362 | .ionide/ 363 | 364 | # Fody - auto-generated XML schema 365 | FodyWeavers.xsd 366 | 367 | ## 368 | ## Visual studio for Mac 369 | ## 370 | 371 | 372 | # globs 373 | Makefile.in 374 | *.userprefs 375 | *.usertasks 376 | config.make 377 | config.status 378 | aclocal.m4 379 | install-sh 380 | autom4te.cache/ 381 | *.tar.gz 382 | tarballs/ 383 | test-results/ 384 | 385 | # Mac bundle stuff 386 | *.dmg 387 | *.app 388 | 389 | # content below from: https://github.com/github/gitignore/blob/master/Global/macOS.gitignore 390 | # General 391 | .DS_Store 392 | .AppleDouble 393 | .LSOverride 394 | 395 | # Icon must end with two \r 396 | Icon 397 | 398 | 399 | # Thumbnails 400 | ._* 401 | 402 | # Files that might appear in the root of a volume 403 | .DocumentRevisions-V100 404 | .fseventsd 405 | .Spotlight-V100 406 | .TemporaryItems 407 | .Trashes 408 | .VolumeIcon.icns 409 | .com.apple.timemachine.donotpresent 410 | 411 | # Directories potentially created on remote AFP share 412 | .AppleDB 413 | .AppleDesktop 414 | Network Trash Folder 415 | Temporary Items 416 | .apdisk 417 | 418 | # content below from: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore 419 | # Windows thumbnail cache files 420 | Thumbs.db 421 | ehthumbs.db 422 | ehthumbs_vista.db 423 | 424 | # Dump file 425 | *.stackdump 426 | 427 | # Folder config file 428 | [Dd]esktop.ini 429 | 430 | # Recycle Bin used on file shares 431 | $RECYCLE.BIN/ 432 | 433 | # Windows Installer files 434 | *.cab 435 | *.msi 436 | *.msix 437 | *.msm 438 | *.msp 439 | 440 | # Windows shortcuts 441 | *.lnk 442 | 443 | # JetBrains Rider 444 | .idea/ 445 | *.sln.iml 446 | 447 | ## 448 | ## Visual Studio Code 449 | ## 450 | .vscode/* 451 | !.vscode/settings.json 452 | !.vscode/tasks.json 453 | !.vscode/launch.json 454 | !.vscode/extensions.json 455 | -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/App.axaml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | #755394 15 | 16 | 17 | 18 | 21 | 24 | 27 | 30 | 31 | -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/App.axaml.cs: -------------------------------------------------------------------------------- 1 | using Avalonia; 2 | using Avalonia.Controls.ApplicationLifetimes; 3 | using Avalonia.Markup.Xaml; 4 | using Avalonia.ListBoxAnimation.Samples.ViewModels; 5 | using Avalonia.ListBoxAnimation.Samples.Views; 6 | 7 | namespace Avalonia.ListBoxAnimation.Samples 8 | { 9 | public partial class App : Application 10 | { 11 | public override void Initialize() 12 | { 13 | AvaloniaXamlLoader.Load(this); 14 | } 15 | 16 | public override void OnFrameworkInitializationCompleted() 17 | { 18 | if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop) 19 | { 20 | desktop.MainWindow = new MainWindow 21 | { 22 | DataContext = new MainWindowViewModel(), 23 | }; 24 | } 25 | 26 | base.OnFrameworkInitializationCompleted(); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/Assets/avalonia-logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adirh3/Avalonia.ListBoxAnimation.Samples/cc53e061926713798e5b2b9d14e4ed931f38c38a/Avalonia.ListBoxAnimation.Samples/Assets/avalonia-logo.ico -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/Avalonia.ListBoxAnimation.Samples.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | WinExe 4 | net6.0 5 | enable 6 | 7 | copyused 8 | true 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using Avalonia; 3 | using Avalonia.Controls.ApplicationLifetimes; 4 | using Avalonia.ReactiveUI; 5 | 6 | namespace Avalonia.ListBoxAnimation.Samples 7 | { 8 | class Program 9 | { 10 | // Initialization code. Don't use any Avalonia, third-party APIs or any 11 | // SynchronizationContext-reliant code before AppMain is called: things aren't initialized 12 | // yet and stuff might break. 13 | [STAThread] 14 | public static void Main(string[] args) => BuildAvaloniaApp() 15 | .StartWithClassicDesktopLifetime(args); 16 | 17 | // Avalonia configuration, don't remove; also used by visual designer. 18 | public static AppBuilder BuildAvaloniaApp() 19 | => AppBuilder.Configure() 20 | .UsePlatformDetect() 21 | .LogToTrace() 22 | .UseReactiveUI(); 23 | } 24 | } -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/SelectingItemsControlExtension.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Linq; 3 | using System.Numerics; 4 | using Avalonia.Animation.Easings; 5 | using Avalonia.Controls; 6 | using Avalonia.Controls.Primitives; 7 | using Avalonia.Controls.Templates; 8 | using Avalonia.Rendering.Composition; 9 | using Avalonia.Rendering.Composition.Animations; 10 | 11 | namespace Avalonia.ListBoxAnimation.Samples; 12 | 13 | public class SelectingItemsControlExtension 14 | { 15 | public static readonly AttachedProperty EnableSelectionAnimationProperty = 16 | AvaloniaProperty.RegisterAttached("EnableSelectionAnimation", 17 | typeof(SelectingItemsControlExtension)); 18 | 19 | static SelectingItemsControlExtension() 20 | { 21 | EnableSelectionAnimationProperty.Changed.AddClassHandler(OnEnableSelectionAnimation); 22 | } 23 | 24 | private static void OnEnableSelectionAnimation(Control control, AvaloniaPropertyChangedEventArgs args) 25 | { 26 | if (control is SelectingItemsControl listBox) 27 | { 28 | if (args.NewValue is true) 29 | { 30 | listBox.PropertyChanged += SelectingItemsControlPropertyChanged; 31 | } 32 | else 33 | { 34 | listBox.PropertyChanged -= SelectingItemsControlPropertyChanged; 35 | } 36 | } 37 | } 38 | 39 | private static void SelectingItemsControlPropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs args) 40 | { 41 | if (sender is not SelectingItemsControl selectingItemsControl || 42 | args.Property != SelectingItemsControl.SelectedIndexProperty || 43 | args.OldValue is not int oldIndex || args.NewValue is not int newIndex) 44 | return; 45 | 46 | if (selectingItemsControl.ItemContainerGenerator 47 | .ContainerFromIndex(newIndex) is not TemplatedControl newSelection || 48 | selectingItemsControl.ItemContainerGenerator.ContainerFromIndex(oldIndex) is not TemplatedControl 49 | oldSelection) 50 | return; 51 | StartOffsetAnimation(newSelection, oldSelection); 52 | } 53 | 54 | private static void StartOffsetAnimation(TemplatedControl newSelection, TemplatedControl oldSelection) 55 | { 56 | // Find the indicator border 57 | if (newSelection.GetTemplateChildren().FirstOrDefault(s => s.Name == "PART_SelectedPipe") is not Visual 58 | borderPipe || oldSelection.GetTemplateChildren() 59 | .FirstOrDefault(s => s.Name == "PART_SelectedPipe") is not Visual oldPipe) 60 | return; 61 | // Clear old implicit animations if any 62 | ElementComposition.GetElementVisual(oldPipe)?.ImplicitAnimations?.Clear(); 63 | 64 | // Get the composition visuals for all controls 65 | CompositionVisual? pipeVisual = ElementComposition.GetElementVisual(borderPipe); 66 | CompositionVisual? newSelectionVisual = ElementComposition.GetElementVisual(newSelection); 67 | CompositionVisual? oldSelectionVisual = ElementComposition.GetElementVisual(oldSelection); 68 | if (pipeVisual == null || newSelectionVisual == null || oldSelectionVisual == null) return; 69 | 70 | // Calculate the offset between old and new selections 71 | Vector3 selectionOffset = oldSelectionVisual.Offset - newSelectionVisual.Offset; 72 | // Check whether the offset is vertical (e.g. ListBox) or horizontal (e.g. TabControl) 73 | // Note this code assumes the items are aligned in the SelectingItemsControl 74 | bool isVerticalOffset = selectionOffset.Y != 0; 75 | float offset = isVerticalOffset ? selectionOffset.Y : selectionOffset.X; 76 | 77 | Compositor compositor = pipeVisual.Compositor; 78 | // This is required 79 | var quadraticEaseIn = new QuadraticEaseInOut(); 80 | 81 | // Create new offset animation between old selection position to the current position 82 | Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation(); 83 | offsetAnimation.Target = "Offset"; 84 | string expression = (offset > 0 ? "+" : "-") + Math.Abs(offset); 85 | offsetAnimation.InsertExpressionKeyFrame(0f, 86 | isVerticalOffset 87 | ? $"Vector3(this.FinalValue.X, this.FinalValue.Y{expression}, 0)" 88 | : $"Vector3(this.FinalValue.X{expression}, this.FinalValue.Y, 0)" 89 | ); 90 | offsetAnimation.InsertExpressionKeyFrame(1f, "this.FinalValue"); 91 | offsetAnimation.Duration = TimeSpan.FromMilliseconds(250); 92 | 93 | // Create small scale animation so the pipe will "stretch" while it's moving 94 | Vector3KeyFrameAnimation scaleAnimation = compositor.CreateVector3KeyFrameAnimation(); 95 | scaleAnimation.Target = "Scale"; 96 | scaleAnimation.InsertKeyFrame(0f, Vector3.One, quadraticEaseIn); 97 | scaleAnimation.InsertKeyFrame(0.5f, 98 | new Vector3(1f + (!isVerticalOffset ? 0.75f : 0f), 1f + (isVerticalOffset ? 0.75f : 0f), 1f), 99 | quadraticEaseIn); 100 | scaleAnimation.InsertKeyFrame(1f, Vector3.One, quadraticEaseIn); 101 | scaleAnimation.Duration = TimeSpan.FromMilliseconds(250); 102 | 103 | CompositionAnimationGroup compositionAnimationGroup = compositor.CreateAnimationGroup(); 104 | compositionAnimationGroup.Add(offsetAnimation); 105 | compositionAnimationGroup.Add(scaleAnimation); 106 | ImplicitAnimationCollection pipeVisualImplicitAnimations = compositor.CreateImplicitAnimationCollection(); 107 | float currentOffset = isVerticalOffset ? pipeVisual.Offset.Y : pipeVisual.Offset.X; 108 | if (currentOffset == 0) // Visual first shown, offset not calculated, lets trigger using Offset 109 | pipeVisualImplicitAnimations["Offset"] = compositionAnimationGroup; 110 | else // Visual already shown, we can't trigger on Offset as it won't change 111 | pipeVisualImplicitAnimations["Visible"] = compositionAnimationGroup; 112 | 113 | pipeVisual.ImplicitAnimations = pipeVisualImplicitAnimations; 114 | } 115 | 116 | public static bool GetEnableSelectionAnimation(SelectingItemsControl element) 117 | { 118 | return element.GetValue(EnableSelectionAnimationProperty); 119 | } 120 | 121 | public static void SetEnableSelectionAnimation(SelectingItemsControl element, bool value) 122 | { 123 | element.SetValue(EnableSelectionAnimationProperty, value); 124 | } 125 | } -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/Themes/ListBoxItemTheme.axaml: -------------------------------------------------------------------------------- 1 | 4 | 22 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 44 | 48 | 49 | 52 | 53 | 56 | 57 | -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/ViewLocator.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using Avalonia.Controls; 3 | using Avalonia.Controls.Templates; 4 | using Avalonia.ListBoxAnimation.Samples.ViewModels; 5 | 6 | namespace Avalonia.ListBoxAnimation.Samples 7 | { 8 | public class ViewLocator : IDataTemplate 9 | { 10 | public IControl Build(object data) 11 | { 12 | var name = data.GetType().FullName!.Replace("ViewModel", "View"); 13 | var type = Type.GetType(name); 14 | 15 | if (type != null) 16 | { 17 | return (Control) Activator.CreateInstance(type)!; 18 | } 19 | else 20 | { 21 | return new TextBlock {Text = "Not Found: " + name}; 22 | } 23 | } 24 | 25 | public bool Match(object data) 26 | { 27 | return data is ViewModelBase; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/ViewModels/MainWindowViewModel.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Text; 4 | 5 | namespace Avalonia.ListBoxAnimation.Samples.ViewModels 6 | { 7 | public class MainWindowViewModel : ViewModelBase 8 | { 9 | public MainWindowViewModel() 10 | { 11 | for (int i = 0; i < 5; i++) 12 | { 13 | Tabs.Add("Tab " + i); 14 | } 15 | 16 | for (int i = 0; i < 30; i++) 17 | { 18 | Items.Add("Item " + i); 19 | } 20 | } 21 | 22 | public List Tabs { get; } = new(); 23 | public List Items { get; } = new(); 24 | } 25 | } -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/ViewModels/ViewModelBase.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Text; 4 | using ReactiveUI; 5 | 6 | namespace Avalonia.ListBoxAnimation.Samples.ViewModels 7 | { 8 | public class ViewModelBase : ReactiveObject 9 | { 10 | } 11 | } -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/Views/MainWindow.axaml: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Avalonia.ListBoxAnimation.Samples/Views/MainWindow.axaml.cs: -------------------------------------------------------------------------------- 1 | using Avalonia.Controls; 2 | 3 | namespace Avalonia.ListBoxAnimation.Samples.Views 4 | { 5 | public partial class MainWindow : Window 6 | { 7 | public MainWindow() 8 | { 9 | InitializeComponent(); 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Adir Hudayfi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Avalonia.ListBoxAnimation.Samples 2 | Simple item selection animation using Avalonia 11 3 | 4 | 5 | https://user-images.githubusercontent.com/27368554/187793478-164def31-b2e9-4493-81f1-73a5b4275839.mp4 6 | 7 | 8 | 9 | 10 | To make this kind of animation work you need 3 things - 11 | 12 | ## Indicator visual 13 | 14 | The indicator visual needs to be in the control's template, for example for ListBoxItem 15 | ```XAML 16 | 17 | 18 | 28 | 39 | 40 | 41 | ``` 42 | The "PART_SelectedPipe" `Border` is the indicator. 43 | **Important** - you must set `ClipToBounds=False` on both the control and the indicator, otherwise the animation won't be as cool ;) 44 | 45 | ## Attached property 46 | 47 | Create simple [AttachedProperty](https://docs.avaloniaui.net/docs/data-binding/creating-and-binding-attached-properties) for `SelectingItemsControl` - 48 | ```C# 49 | public static readonly AttachedProperty EnableSelectionAnimationProperty = 50 | AvaloniaProperty.RegisterAttached("EnableSelectionAnimation", 51 | typeof(SelectingItemControlExtension)); 52 | 53 | static SelectingItemControlExtension() 54 | { 55 | EnableSelectionAnimationProperty.Changed.AddClassHandler(OnEnableSelectionAnimation); 56 | } 57 | ``` 58 | Using this we can know when an item selection change occured and get the controls of the previous and current selection. 59 | 60 | ## Animation 61 | 62 | Using the new Composition APIs, given the two controls we can calculate the offset between them - 63 | ```C# 64 | // Get the composition visuals for all controls 65 | CompositionVisual? pipeVisual = ElementComposition.GetElementVisual(borderPipe); 66 | CompositionVisual? newSelectionVisual = ElementComposition.GetElementVisual(newSelection); 67 | CompositionVisual? oldSelectionVisual = ElementComposition.GetElementVisual(oldSelection); 68 | if (pipeVisual == null || newSelectionVisual == null || oldSelectionVisual == null) return; 69 | 70 | // Calculate the offset between old and new selections 71 | Vector3 selectionOffset = oldSelectionVisual.Offset - newSelectionVisual.Offset; 72 | bool isVerticalOffset = selectionOffset.Y != 0; 73 | float offset = isVerticalOffset ? selectionOffset.Y : selectionOffset.X; 74 | ``` 75 | Using that information we create a simple `Offset` animation between the old position and the new position! 76 | 77 | ```C# 78 | // Create new offset animation between old selection position to the current position 79 | Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation(); 80 | offsetAnimation.Target = "Offset"; 81 | offsetAnimation.InsertKeyFrame(0f, 82 | isVerticalOffset ? pipeVisual.Offset with {Y = offset} : pipeVisual.Offset with {X = offset}, 83 | quadraticEaseIn); 84 | offsetAnimation.InsertKeyFrame(1f, pipeVisual.Offset, quadraticEaseIn); 85 | offsetAnimation.Duration = TimeSpan.FromMilliseconds(250); 86 | ``` 87 | 88 | --------------------------------------------------------------------------------