Graphics & Visual Effects

This document describes the graphics rendering capabilities, visual effects, and animation systems in Flowery.Uno.

Table of Contents

1. Overview

2. SkiaSharp Infrastructure

3. Glass Blur Effects (DaisyGlass & DaisyCard)

4. Carousel Slide Effects

5. Carousel Slide Transitions

6. Platform Support Matrix

7. Performance Considerations

Overview

Flowery.Uno provides three layers of graphics capabilities:

All effects are designed for cross-platform compatibility across Desktop (Skia), Browser (WASM), Windows, Android, and iOS.

SkiaSharp Infrastructure

Architecture

The Flowery.Skia namespace provides core image processing capabilities:

Flowery.Uno/Skia/
├── SkiaImageProcessor.cs      # Core blur, saturation, glass effect processing
└── SkiaBackdropCapture.cs     # WinUI ↔ Skia bridge for backdrop capture

SkiaImageProcessor

Static utility class for GPU-accelerated image processing:

SkiaBackdropCapture

Bridges WinUI's RenderTargetBitmap with Skia processing:

// Capture area behind element and apply glass effect
var imageSource = await SkiaBackdropCapture.CaptureAndApplyGlassEffectAsync(
    element,
    blurRadius: 40,
    saturation: 0.8,
    tintColor: Colors.White,
    tintOpacity: 0.3,
    cornerRadius: 16);

1. Finds parent element with background

2. Temporarily hides target element

3. Captures region via RenderTargetBitmap

4. Converts to SKBitmap

5. Applies blur + saturation + tint via Skia

6. Returns as WinUI ImageSource

Glass Blur Effects

Both DaisyGlass and DaisyCard (with IsGlass="True" or CardStyle="Glass") support three blur rendering modes:

Blur Modes

Key Properties

Available on both DaisyGlass and DaisyCard:

DaisyGlass Examples

<!-- Simulated glass (lightweight) -->
<controls:DaisyGlass>
    <TextBlock Text="Simulated" Margin="16" />
</controls:DaisyGlass>

<!-- Bitmap capture blur -->
<controls:DaisyGlass EnableBackdropBlur="True"
                     BlurMode="BitmapCapture"
                     GlassBlur="30">
    <TextBlock Text="Captured Blur" Margin="16" />
</controls:DaisyGlass>

<!-- SkiaSharp blur with desaturation -->
<controls:DaisyGlass EnableBackdropBlur="True"
                     BlurMode="SkiaSharp"
                     GlassBlur="50"
                     GlassSaturation="0.5">
    <TextBlock Text="Desaturated Blur" Margin="16" />
</controls:DaisyGlass>

DaisyCard Glass Examples

<!-- Simulated glass card (lightweight) -->
<controls:DaisyCard IsGlass="True">
    <TextBlock Text="Glass Card" Margin="16" />
</controls:DaisyCard>

<!-- Glass card with Skia blur -->
<controls:DaisyCard CardStyle="Glass"
                    EnableBackdropBlur="True"
                    BlurMode="SkiaSharp"
                    GlassBlur="40"
                    GlassSaturation="0.8">
    <StackPanel Margin="16">
        <TextBlock Text="Real Blur Effect" FontWeight="Bold" />
        <TextBlock Text="Content over blurred background" />
    </StackPanel>
</controls:DaisyCard>

<!-- Glass card with custom tint -->
<controls:DaisyCard IsGlass="True"
                    EnableBackdropBlur="True"
                    BlurMode="BitmapCapture"
                    GlassTint="LightBlue"
                    GlassTintOpacity="0.3">
    <TextBlock Text="Tinted Glass" Margin="16" />
</controls:DaisyCard>

Programmatic Refresh

For dynamic backgrounds, manually trigger recapture:

// DaisyGlass
myGlass.RefreshBackdrop();

// DaisyCard with glass enabled
myCard.RefreshBackdrop();

Carousel Slide Effects

Slide effects animate the currently visible slide during display. They create cinematic motion like Ken Burns documentary-style pan/zoom.

Available Effects

Effect Parameters

Usage

<controls:DaisyCarousel SlideEffect="PanAndZoom"
                        ZoomIntensity="0.2"
                        PanDistance="60"
                        SlideInterval="5">
    <Image Source="photo1.jpg" />
    <Image Source="photo2.jpg" />
</controls:DaisyCarousel>

Carousel Slide Transitions

Slide transitions animate the change between slides. They are categorized by implementation complexity.

Tier 1: Transform-Based (Universal)

Uses CompositeTransform and PlaneProjection. Works on all platforms.

Tier 2: Clip-Based (Advanced)

Uses animated RectangleGeometry clips. Works on most platforms.

Tier 3: Skia-Based (Experimental)

Requires SkiaSharp rendering. Only on Skia-enabled targets (Desktop, WASM).

Special Transitions

Transition Parameters

Transition Usage

<controls:DaisyCarousel SlideTransition="Fade"
                        TransitionDuration="0.6"
                        WrapAround="True">
    <Image Source="slide1.jpg" />
    <Image Source="slide2.jpg" />
</controls:DaisyCarousel>

Slideshow Modes

<controls:DaisyCarousel Mode="Kiosk"
                        SlideInterval="4"
                        SlideTransition="Random">
    <!-- Slides -->
</controls:DaisyCarousel>

Helper Classes & APIs

Slide Effect Helpers

Located in Flowery.Helpers namespace:

xmlns:helpers="using:Flowery.Helpers"

<Image Source="photo.jpg"
       helpers:FlowerySlideEffects.Effect="PanAndZoom"
       helpers:FlowerySlideEffects.Duration="5"
       helpers:FlowerySlideEffects.ZoomIntensity="0.15"
       helpers:FlowerySlideEffects.AutoStart="True" />

using Flowery.Helpers;

// Apply effect to any UIElement
FlowerySlideEffects.SetEffect(myImage, FlowerySlideEffect.PanAndZoom);
FlowerySlideEffects.SetDuration(myImage, 5.0);
FlowerySlideEffects.SetAutoStart(myImage, true);

// Start/stop manually
FlowerySlideEffect applied = FlowerySlideEffects.StartEffect(myImage);
FlowerySlideEffects.StopEffect(myImage);

// Preserve transform during stop (for smooth transitions)
FlowerySlideEffects.StopEffectPreservingTransform(myImage);

Slide Transition Helpers

using Flowery.Helpers;

var transitionParams = new FlowerySlideTransitionParams
{
    Duration = TimeSpan.FromMilliseconds(500),
    SliceCount = 10,
    StaggerSlices = true
};

FlowerySlideTransition applied = FlowerySlideTransitionHelpers.ApplyTransition(
    container,
    oldSlideWrapper,
    newSlideWrapper,
    FlowerySlideTransition.Checkerboard,
    transitionParams,
    onComplete: () => { /* cleanup */ });

Slideshow Controller

Carousel GL Effects (Browser Only)

Located in Flowery.Effects namespace:

xmlns:fx="using:Flowery.Effects"

<fx:CarouselGlEffectHost Effect="MatrixRain"
                         OverlayEffect="Dissolve"
                         IntervalSeconds="4">
    <Image Source="slide.jpg" />
</fx:CarouselGlEffectHost>

Skia Infrastructure

using Flowery.Skia;

// Apply blur to image bytes
byte[]? blurred = SkiaImageProcessor.ApplyBlur(pngBytes, sigmaX: 5, sigmaY: 5);

// Apply glass effect to bitmap
byte[]? glass = SkiaImageProcessor.ApplyGlassEffect(
    skBitmap,
    blurSigma: 4.0f,
    saturation: 0.8f,
    tintColor: SKColors.White,
    tintOpacity: 0.3f,
    cornerRadius: 16f);

Platform Support Matrix

Legend: ✅ Full support | ⚠️ Experimental/Limited | ❌ Not supported

Performance Considerations

DaisyGlass

• Simulated mode is always the fastest; use for high-frequency scenarios
• BitmapCapture captures once on load; call RefreshBackdrop() sparingly
• SkiaSharp blur sigma scales with CPU cost; keep GlassBlur under 50 for smooth performance
• Backdrop capture temporarily hides the element; avoid during animations

Carousel Effects

• Slide effects run continuously; prefer lower ZoomIntensity and PanDistance for smooth 60fps
• PanAndZoom is the most versatile but most complex; test on target devices
• Tier 3 transitions require Skia rendering; may not work on all platforms

Memory

• SkiaSharp bitmaps are disposed after processing
• RenderTargetBitmap captures can be large; scale factor (0.75) reduces memory
• Clear ImageSource on Unloaded to free resources

Future Enhancements

• Real-time blur via SKCanvasElement (live backdrop sampling)
• Composition API blur using GaussianBlurEffect where available
• Hardware backdrop on platforms that support native acrylic
• Animated glass with continuous background sampling