Implementing Interactive Viewer

Implementing Interactive Viewer in .NET MAUI

The .NET MAUI Interactive Viewer provides an intuitive way to view and navigate visual content through zooming, panning, and rotating. It's ideal for image viewers, document exploration, architectural visualization, medical imaging, and e-commerce product displays.

When to Use This Skill

Use this skill when you need to:

• Display zoomable images in your application
• Enable content panning for large or complex visual content
• Implement rotation for viewing content from different angles
• Reset views to original state after user interactions
• Handle zoom and scroll events for custom interactions
• Configure zoom limits for controlled content navigation
• Build viewers for diagrams, blueprints, or technical drawings
• Create e-commerce product image viewers
• Handle medical imaging or diagnostic visualization

Quick Overview

The Interactive Viewer control wraps visual content (typically images) and provides these core capabilities:

csharpCopy code
using Syncfusion.Maui.InteractiveViewer;

// Basic setup
var viewer = new SfInteractiveViewer
{
    IsZoomEnabled = true,
    ZoomFactor = 1.0,
    MinimumZoomFactor = 0.5,
    MaximumZoomFactor = 10.0,
    Content = new Image { Source = "image.png", Aspect = Aspect.AspectFit }
};

// Methods for interaction
viewer.Rotate();        // Rotate 90 degrees clockwise
viewer.Reset();         // Restore original state

Documentation and Navigation Guide

Navigate to the reference guide that matches your current need:

Getting Started

📄 Read: references/getting-started.md

• .NET MAUI environment setup
• NuGet package installation steps
• Handler registration
• Component namespace imports
• Basic initialization pattern
• Embedding content in XAML

Zooming and Panning

📄 Read: references/zooming-and-panning.md

• Enable/disable zoom capability
• Set programmatic zoom factor
• Configure minimum zoom limit
• Configure maximum zoom limit
• Control pan interactions
• Responsive zoom behavior

Rotation

📄 Read: references/rotation.md

• Rotate method usage
• 90-degree clockwise rotation
• Rotation cycling behavior
• Integration with UI buttons
• Rotation constraints

Reset Functionality

📄 Read: references/reset-functionality.md

• Reset method overview
• Restore default zoom and pan
• Integration with UI
• When to call reset
• Reset behavior guarantees

Events and Interactions

📄 Read: references/events-and-interactions.md

• ZoomFactorChanged event
• ScrollChanged event
• Event argument properties
• Real-time interaction patterns
• Custom event handling

Common Patterns

Pattern 1: Simple Image Viewer with Controls

csharpCopy code
// XAML
<Grid RowDefinitions="0.9*, 0.1*">
    <interactiveViewer:SfInteractiveViewer x:Name="viewer">
        <Image Source="image.png" Aspect="AspectFit" />
    </interactiveViewer:SfInteractiveViewer>
    
    <StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="10">
        <Button Text="Rotate" Clicked="OnRotate" />
        <Button Text="Reset" Clicked="OnReset" />
    </StackLayout>
</Grid>

// Code-behind
private void OnRotate(object sender, EventArgs e) => viewer.Rotate();
private void OnReset(object sender, EventArgs e) => viewer.Reset();

Pattern 2: Zoom Control with Limits

csharpCopy code
<interactiveViewer:SfInteractiveViewer 
    IsZoomEnabled="True"
    MinimumZoomFactor="0.5"
    MaximumZoomFactor="10.0"
    ZoomFactor="1.0">
    <Image Source="document.png" Aspect="AspectFit" />
</interactiveViewer:SfInteractiveViewer>

Pattern 3: Event-Driven Zoom Tracking

csharpCopy code
<interactiveViewer:SfInteractiveViewer 
    ZoomFactorChanged="OnZoomChanged"
    ScrollChanged="OnScroll">
    <Image Source="image.png" Aspect="AspectFit" />
</interactiveViewer:SfInteractiveViewer>

// Track zoom changes in real-time
private void OnZoomChanged(object sender, ZoomFactorChangedEventArgs e)
{
    Debug.WriteLine($"Zoom: {e.OldZoomFactor} → {e.NewZoomFactor}");
}

Key Properties

Key Methods

Key Events

Real-World Use Cases

1. Medical Imaging Viewer - Zoom and pan detailed diagnostic images
2. Architectural Blueprint Viewer - Navigate large technical drawings
3. E-commerce Product Viewer - Interactive product image exploration
4. Document Scanner - View and navigate scanned documents
5. GIS/Map Viewer - Zoom into geographic data and imagery

Next Step: Choose a reference based on your current task, or start with Getting Started if this is your first time.