Graphics & Visual Effects

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

Table of Contents

1. Overview

2. SkiaSharp Infrastructure

3. Glass Blur Effects (DaisyGlass & DaisyCard)

4. Carousel Slide Effects

5. Carousel Slide Transitions

6. Native Windows Support

7. Performance Considerations

Overview

Flowery.WinUI provides native animation and image-processing capabilities:

The repository targets Windows with WinUI 3 and Windows App SDK.

SkiaSharp Infrastructure

Architecture

The Flowery.Skia namespace provides core image processing capabilities:

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

SkiaImageProcessor

Static utility class for CPU 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 the background source and serializes capture with other glass panels.

2. Temporarily hides glass overlays in that scene, including sibling panels.

3. Captures native WinUI content with RenderTargetBitmap at the XamlRoot rasterization scale.

4. Restores overlay opacity values and bindings.

5. Processes a padded region with CPU SkiaSharp blur, saturation, and tint.

6. Crops and rounds the result to the panel bounds, then returns a WinUI ImageSource.

Glass Blur Effects

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

Blur Modes

The captured image includes its tint once; a second tint fill does not cover it.

Size, blur, saturation, tint, corner-radius, and rasterization changes invalidate the snapshot.

Unload clears the image and invalidates pending work; reload schedules a new capture.

For background-content changes, use RefreshBackdrop().

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: Native Transforms

Uses native WinUI 3 CompositeTransform and PlaneProjection.

Tier 2: Clip-Based (Advanced)

Uses animated native RectangleGeometry clips.

Tier 3: Windows Composition

The repository's PORTING.md records the native runtime verification scope.

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

Native Geometry and Masks

The optional Flowery.WinUI.Win2D project supplies Composition geometry and masking support.

The native solution uses Microsoft.Graphics.Win2D with Windows Composition.

The native shader-effect host uses WinUI 3 WebView2 and retains the original shader presets.

See Native Carousel Rendering for its API and diagnostics.

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

Native Windows Support

Flowery.WinUI targets Windows with WinUI 3.

Composition animations, Storyboards, bitmap capture, and SkiaSharp image processing run in the native build.

The optional Flowery.WinUI.Win2D project supplies Win2D graphics.

The shader effects and gallery examples use a native WinUI 3 WebView2 host.

Tier 3 carousel transitions use Windows Composition surfaces and mask grids.

The repository's PORTING.md records validated configurations and verification scope.

Performance Considerations

DaisyGlass

• Simulated mode is always the fastest; use for high-frequency scenarios
• Capture modes refresh after relevant state changes; call RefreshBackdrop() after the background content changes
• SkiaSharp blur sigma scales with CPU cost; keep GlassBlur under 50 for smooth performance
• Backdrop capture temporarily hides glass overlays in the sampled scene; avoid unnecessary recaptures 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 use native Composition surfaces and mask grids; cell budgets limit the number of visual elements

Memory

• SkiaSharp bitmaps are disposed after processing
• RenderTargetBitmap captures use the current rasterization scale; large backgrounds increase snapshot and processing memory
• Clear ImageSource on Unloaded to free resources

Snapshot Capture Scope

The glass implementation uses native WinUI snapshots and CPU SkiaSharp processing.

It does not continuously sample the backdrop or use a Composition blur pipeline.

Use RefreshBackdrop() when background content changes independently of the panel's properties.