ImageViewer

A full-screen image overlay with pinch-to-zoom, pan when zoomed, double-tap to toggle zoom, animated open/close transitions, and a close button.

• 
• 

Frameworks

.NET MAUI

Blazor

Gallery	Viewer

Basic Usage

<Grid>
    <!-- Page content with tappable images -->
    <ScrollView>
        <VerticalStackLayout>
            <Image Source="photo.png">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding OpenViewerCommand}"
                                          CommandParameter="photo.png" />
                </Image.GestureRecognizers>
            </Image>
        </VerticalStackLayout>
    </ScrollView>

    <!-- ImageViewer overlays on top -->
    <shiny:ImageViewer Source="{Binding SelectedImage}"
                       IsOpen="{Binding IsViewerOpen}" />
</Grid>

Caution

Like SheetView, ImageViewer must be placed inside a Grid that fills the page so it can overlay correctly.

Properties

Property	Type	Default	Description
Source	ImageSource?	null	The image to display
IsOpen	bool	false	Show/hide the viewer (TwoWay bindable)
Aspect	Aspect	AspectFit	Image aspect ratio mode (MAUI only)
MaxZoom	double	5.0	Maximum pinch zoom scale
CloseButtonTemplate	DataTemplate?	null	Custom close button template (tapping closes the viewer)
HeaderTemplate	DataTemplate?	null	Custom header overlay at the top of the viewer
FooterTemplate	DataTemplate?	null	Custom footer overlay at the bottom of the viewer
UseFeedback	bool	true	Haptic click on double-tap zoom

Features

• Pinch-to-zoom — Two-finger pinch scales around the pinch origin, clamped between 1x and MaxZoom
• Pan when zoomed — One-finger pan enabled after zooming in, translation clamped to image bounds
• Double-tap to zoom — Double-tap zooms to 2.5x centered on the tap point; double-tap again resets
• Animated open/close — Backdrop, image, and close button fade together (250ms)
• Close button — ”✕” button in the top-right corner (customizable via CloseButtonTemplate)
• Header/Footer templates — Optional overlays at the top/bottom for custom UI (e.g. image info, action buttons)
• Backdrop — Black overlay that swallows touches so nothing passes through to the page behind

ViewModel Pattern

public partial class ImageViewerViewModel : ObservableObject
{
    [ObservableProperty] ImageSource? selectedImage;
    [ObservableProperty] bool isViewerOpen;

    [RelayCommand]
    void OpenViewer(string imageSource)
    {
        SelectedImage = imageSource;
        IsViewerOpen = true;
    }
}

Tip

Always set Source before setting IsOpen = true to ensure the image is ready when the viewer opens.

Blazor Usage

@using Shiny.Blazor.Controls

<div style="position: relative;">
    <!-- Tappable image -->
    <img src="photo.jpg" @onclick="() => OpenViewer("photo.jpg")"
         style="cursor: pointer;" />

    <!-- ImageViewer overlay -->
    <ImageViewer Source="@selectedImage"
                 IsOpen="@isViewerOpen"
                 IsOpenChanged="v => isViewerOpen = v"
                 MaxZoom="5.0" />
</div>

@code {
    string? selectedImage;
    bool isViewerOpen;

    void OpenViewer(string imageUrl)
    {
        selectedImage = imageUrl;
        isViewerOpen = true;
    }
}

Note

On Blazor, Source is a URL string instead of ImageSource. IsOpen uses IsOpenChanged callback for two-way binding. The Aspect property is not applicable on Blazor.

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-controls@shiny

View shiny-controls Plugin