FloweryAnimationHelpers

Overview

FloweryAnimationHelpers provides a comprehensive, reusable animation and slideshow infrastructure for building cinematic UI experiences. It includes enums for visual effects, a controller for slideshow logic, and attached properties for declarative animations.

Components

FlowerySlideEffect Enum

Specifies visual effects for slide/image animations. Usable by any control that displays content with cinematic transitions.

FlowerySlideEffectParser

// Parse string to enum (returns None for invalid/null)
FlowerySlideEffect effect = FlowerySlideEffectParser.Parse("PanAndZoom");

// Try-parse pattern
if (FlowerySlideEffectParser.TryParse(value, out var effect))
{
    // Valid effect
}

FlowerySlideshowMode Enum

Specifies navigation modes for slideshow controls. Usable by carousels, galleries, and other slideshow-style components.

FlowerySlideshowModeParser

// Parse string to enum (returns Manual for invalid/null)
FlowerySlideshowMode mode = FlowerySlideshowModeParser.Parse("Kiosk");

FlowerySlideTransition Enum

Specifies visual animations that occur when navigating between slides.

FlowerySlideTransitionParams

Configuration record for transition animation properties.

var myTransition = FlowerySlideTransitionHelpers.ApplyTransition(
    container, oldElement, newElement, 
    FlowerySlideTransition.CubeRight,
    new FlowerySlideTransitionParams { Duration = TimeSpan.FromSeconds(0.6) }
);

FlowerySlideshowController

A batteries-included controller for building slideshow-style controls. Encapsulates timer management, shuffle algorithms, and navigation logic.

Constructor

var controller = new FlowerySlideshowController(
    navigateAction: index => SelectedIndex = index,  // Called when navigating
    getItemCount: () => Items.Count,                  // Returns item count
    getCurrentIndex: () => SelectedIndex);            // Returns current index

Properties

Methods

Example: Custom Gallery Control

public class MyGallery : Control, IDisposable
{
    private FlowerySlideshowController _controller;

    public MyGallery()
    {
        _controller = new FlowerySlideshowController(
            index => SelectedIndex = index,
            () => Items.Count,
            () => SelectedIndex);
    }

    public void StartSlideshow()
    {
        _controller.Mode = FlowerySlideshowMode.Random;
        _controller.Interval = 5.0;
        _controller.WrapAround = true;
        _controller.Start();
    }

    private void OnPreviousClick() => _controller.Previous();
    private void OnNextClick() => _controller.Next();

    public void Dispose() => _controller.Dispose();
}

FlowerySlideEffects (Attached Properties)

Apply cinematic effects to any UIElement declaratively in XAML.

Attached Properties

XAML Usage

xmlns:services="using:Flowery.Helpers"

<!-- Pan And Zoom effect on a hero image -->
<Image Source="ms-appx:///Assets/hero.jpg"
       services:FlowerySlideEffects.Effect="PanAndZoom"
       services:FlowerySlideEffects.Duration="8"
       services:FlowerySlideEffects.ZoomIntensity="0.2"/>

<!-- Pulsing logo -->
<Image Source="ms-appx:///Assets/logo.png"
       services:FlowerySlideEffects.Effect="Pulse"
       services:FlowerySlideEffects.Duration="2"
       services:FlowerySlideEffects.PulseIntensity="0.05"/>

<!-- Slow pan across a wide image -->
<Image Source="ms-appx:///Assets/panorama.jpg"
       services:FlowerySlideEffects.Effect="PanLeft"
       services:FlowerySlideEffects.Duration="10"
       services:FlowerySlideEffects.PanDistance="100"/>

Programmatic Control

// Start effect manually
FlowerySlideEffects.StartEffect(myImage);

// Stop effect
FlowerySlideEffects.StopEffect(myImage);

// Configure and start
FlowerySlideEffects.SetEffect(myImage, FlowerySlideEffect.ZoomIn);
FlowerySlideEffects.SetDuration(myImage, 5.0);
FlowerySlideEffects.SetAutoStart(myImage, false);
FlowerySlideEffects.StartEffect(myImage);

Loaded and Unloaded

Setting AutoStart="False" cancels a pending automatic start before Loaded.

Use StartEffect for explicit control; on an unloaded element, it waits for that element to load.

Unload stops the effect and releases its tracked target.

An automatic effect starts again after reload; a manual effect requires another StartEffect call.

FlowerySlideEffectParams

Configuration record for fine-tuning effect parameters.

The parameter record defaults to ZoomIntensity=0.2; the attached property defaults to 0.15.

The attached effect forwards its intensity to both ZoomIntensity and PanAndZoomZoom.

When you configure the record directly for PanAndZoom, set PanAndZoomZoom.

Locked zoom can keep the image enlarged to cover the viewport; only its pan position changes.

var customParams = new FlowerySlideEffectParams
{
    ZoomIntensity = 0.25,
    PanDistance = 80,
    PulseIntensity = 0.12
};

FloweryAnimationHelpers (Static Methods)

Low-level animation factory methods for building custom effects.

Key Methods

The Add methods append animations to the supplied Storyboard.

Call Begin() when the target is loaded and the Storyboard is ready.

Platform Support

Slide effects use native WinUI 3 animation APIs in the Windows application.

Tips & Best Practices

• Use FlowerySlideshowController to add slideshow behavior to any control without reimplementing timer/shuffle logic.
• Set AutoStart="False" on attached effects when you need programmatic control over when animations begin.
• Combine Mode="Slideshow" with short Interval values (2-4s) for dynamic hero banners.
• Use Mode="Random" for digital signage or kiosks to prevent repetitive patterns.
• Use PanAndZoom for photo galleries - it randomly selects pan/zoom combinations per image.
• Use Throw for high-energy tech or motion-oriented slide decks.
• Use Kiosk mode for hands-off displays (signage) to maximize visual variety.
• Effects automatically stop when elements are unloaded to prevent memory leaks.
• Call controller.OnItemCountChanged() when your items collection changes to reinitialize shuffle order.
• Always call controller.Dispose() when your control is disposed to clean up timers.

Technical Reference (Implementation Files)

For deep implementation details, consult the following source files in the Flowery.WinUI project: