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.Services"

<!-- 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);

FlowerySlideEffectParams

Configuration record for fine-tuning effect parameters.

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

Platform Support

Slide effects require HAS_UNO or WINDOWS compilation symbols. On other platforms, effects gracefully fall back to static display.

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.Uno project: