skills.rest
unoplatform
unoplatformOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatformGitHub

uno-toolkit-zoomcontentcontrol

Create a zoomable and pannable container for images, maps, diagrams, and documents.

9|1|Updated Dec 10, 2024
Search Tags:#interaction#pan#zoom#ui-controls#uno-toolkit#image-viewer
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-zoomcontentcontrol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uno-toolkit-zoomcontentcontrol
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-toolkit-zoomcontentcontrol
Command: npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-zoomcontentcontrol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a zoomable and pannable container to inspect high-detail content such as images, maps, diagrams, or documents, enabling users to explore details without leaving the interface.

Core Features & Use Cases

  • Zoom and Pan: Supports mouse wheel zoom, middle-click pan, pinch-to-zoom, and programmatic control.
  • Content Types: Works with images, maps, diagrams, and documents in complex layouts.
  • Use Case: Design dashboards or editors requiring precise inspection of media and diagrams within constrained viewports.

Quick Start

Instantiate the Uno Toolkit ZoomContentControl in your XAML or code, configure MinZoomLevel and MaxZoomLevel, and enable user gestures to begin interactive viewing.

Frequently Asked Questions about uno-toolkit-zoomcontentcontrol

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add zoom and pan functionality to an image viewer in XAML?▼

To add zoom and pan to an image viewer, instantiate the ZoomContentControl, configure MinZoomLevel and MaxZoomLevel, and enable mouse wheel zoom, middle-click pan, and pinch-to-zoom gestures in your UI layout.

Does Uno Toolkit support pinch-to-zoom and mouse wheel interactions for inspecting high-detail maps?▼

Yes, the Uno Toolkit supports pinch-to-zoom, mouse wheel zoom, and middle-click pan interactions. These gestures allow users to inspect high-detail maps, diagrams, and documents without leaving the interface.

What is the best way to programmatically control zoom levels for a pannable document container?▼

The best way to programmatically control zoom levels is configuring the MinZoomLevel and MaxZoomLevel properties. This enables automated workflows for precise inspection of documents and media within constrained viewports.

Can I use ZoomContentControl with complex UI layouts containing diagrams and documents?▼

Yes, you can use ZoomContentControl with complex UI layouts. It works with images, maps, diagrams, and documents, enabling users to explore details within constrained viewports across various UI layouts.

How do I configure min and max zoom levels for a pannable content container?▼

To configure min and max zoom levels for a pannable content container, set the MinZoomLevel and MaxZoomLevel properties in your XAML or code. This restricts user zoom gestures to precise inspection boundaries.

Related Skills

Explore More Software Engineering Skills→
unoplatformunoplatform
9

uno-toolkit-progress-extensions

Toggle descendant ProgressRing and ProgressBar controls with a single boolean binding.

Official
Intermediate
loagmaloagma

workspace-page-ui-zoom

Apply 80% UI zoom to workspace surfaces using CSS zoom containers.

Community
Intermediate
rally19rally19

liveblocks-ui-skills

Apply Liveblocks-inspired dark-mode UI constraints with Inter font and a 4px grid.

Community
Advanced
MerkyorLynnMerkyorLynn
37

image-lightbox

Open chat images in a full-screen overlay with zoom, pan, and download controls.

Community
Basic