Skip to content

Feature Request: Add ConnectedAnimation Support #1557

@ORRNY

Description

@ORRNY

Is your feature request related to a problem? Please describe

Description:

Problem Statement

WPF UI currently lacks support for ConnectedAnimation, a powerful visual continuity feature that is part of the Fluent Design System in UWP/WinUI. Connected animations provide smooth visual transitions between UI elements across different views or pages, significantly improving user experience by maintaining visual context and helping users track their interactions.

Proposed Feature

I would like to propose adding ConnectedAnimation support to WPF UI, similar to what's available in UWP/WinUI through the ConnectedAnimationService API.

Key API requirements:

  • ConnectedAnimationService.GetForCurrentView() - Get animation service for current window
  • PrepareToAnimate(string key, UIElement source) - Prepare source element for animation
  • GetAnimation(string key) - Retrieve prepared animation
  • TryStart(UIElement destination) - Start animation to destination element

Use Cases

  • Smooth transitions between list items and detail views
  • Navigation between pages with shared elements
  • Gallery-to-detail view transitions
  • Any scenario requiring visual continuity between views

Implementation References

There are existing WPF implementations that could serve as inspiration:

  1. WPF Implementation by walterlv: https://blog.walterlv.com/post/connected-animation-of-wpf.html

    • Provides a complete working implementation using AdornerLayer
    • Includes source code and examples
    • Demonstrates the core concept and API design
  2. Stack Overflow Discussion: https://stackoverflow.com/questions/53789331/how-can-i-use-connected-animation-in-wpf-app-like-uwp

    • Community discussion about implementing this feature in WPF

Expected Benefits

  • Better UX: Provides visual continuity and guidance for users
  • Modern Design: Aligns with Fluent Design System principles
  • Feature Parity: Brings WPF UI closer to UWP/WinUI capabilities
  • Developer Experience: Familiar API for developers coming from UWP/WinUI

Example Usage

// Prepare animation on source page
var service = ConnectedAnimationService.GetForCurrentView(this);
service.PrepareToAnimate("imageTransition", sourceImage);

// Navigate to new page/view

// Start animation on destination page
var animation = service.GetAnimation("imageTransition");
animation?.TryStart(destinationImage);

Additional Context

This feature would be particularly valuable for modern WPF applications that want to provide polished, fluid user experiences. It's a key component of Fluent Design and would significantly enhance the visual appeal of applications built with WPF UI.

Describe the solution you'd like

I would like to propose adding support for ConnectedAnimation, similar to what exists in UWP/WinUI. This would allow for seamless transitions between pages or elements, enhancing the user experience with smooth visual continuity. Ideally, it should offer a simple API to start and synchronize animations between source and destination elements during navigation.

Describe alternatives you've considered

I have explored community discussions and articles, such as https://blog.walterlv.com/post/connected-animation-of-wpf.html and this StackOverflow thread: https://stackoverflow.com/questions/53789331/how-can-i-use-connected-animation-in-wpf-app-like-uwp. Some workarounds exist, but they are not as straightforward or robust as the native UWP/WinUI implementation.

Additional context

Integrating a ConnectedAnimation-like feature would be a significant improvement for WPFUI. The resources linked above provide inspiration and possible approaches for implementation. This would make WPFUI even more attractive for developers looking for a modern user experience.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions