# PanAndZoom **Repository Path**: LFDCC/PanAndZoom ## Basic Information - **Project Name**: PanAndZoom - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-11 - **Last Updated**: 2025-12-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # PanAndZoom [![Gitter](https://badges.gitter.im/wieslawsoltes/PanAndZoom.svg)](https://gitter.im/wieslawsoltes/PanAndZoom?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Build Status](https://dev.azure.com/wieslawsoltes/GitHub/_apis/build/status/wieslawsoltes.PanAndZoom?branchName=master)](https://dev.azure.com/wieslawsoltes/GitHub/_build/latest?definitionId=98&branchName=master) [![CI](https://github.com/wieslawsoltes/PanAndZoom/actions/workflows/build.yml/badge.svg)](https://github.com/wieslawsoltes/PanAndZoom/actions/workflows/build.yml) [![NuGet](https://img.shields.io/nuget/v/PanAndZoom.svg)](https://www.nuget.org/packages/PanAndZoom) [![NuGet](https://img.shields.io/nuget/dt/PanAndZoom.svg)](https://www.nuget.org/packages/PanAndZoom) [![MyGet](https://img.shields.io/myget/panandzoom-nightly/vpre/PanAndZoom.svg?label=myget)](https://www.myget.org/gallery/panandzoom-nightly) PanAndZoom control for Avalonia ![](images/PanAndZoom.png) ## NuGet PanAndZoom is delivered as a NuGet package. You can find the NuGet packages here for [Avalonia](https://www.nuget.org/packages/PanAndZoom/) or by using nightly build feed: * Add `https://www.myget.org/F/panandzoom-nightly/api/v2` to your package sources * Alternative nightly build feed `https://pkgs.dev.azure.com/wieslawsoltes/GitHub/_packaging/Nightly/nuget/v3/index.json` * Update your package using `PanAndZoom` feed You can install the package for `Avalonia` based projects like this: `Install-Package PanAndZoom -Pre` ### Package Sources * https://api.nuget.org/v3/index.json * https://www.myget.org/F/panandzoom-nightly/api/v2 ## Resources * [GitHub source code repository.](https://github.com/wieslawsoltes/PanAndZoom) ## Using PanAndZoom `MainWindow.xaml` ```XAML ``` `MainWindow.xaml.cs` ```C# using System.Diagnostics; using Avalonia; using Avalonia.Controls; using Avalonia.Controls.PanAndZoom; using Avalonia.Input; using Avalonia.Markup.Xaml; namespace AvaloniaDemo { public class MainWindow : Window { private readonly ZoomBorder? _zoomBorder; public MainWindow() { this.InitializeComponent(); this.AttachDevTools(); _zoomBorder = this.Find("ZoomBorder"); if (_zoomBorder != null) { _zoomBorder.KeyDown += ZoomBorder_KeyDown; _zoomBorder.ZoomChanged += ZoomBorder_ZoomChanged; } } private void InitializeComponent() { AvaloniaXamlLoader.Load(this); } private void ZoomBorder_KeyDown(object? sender, KeyEventArgs e) { switch (e.Key) { case Key.F: _zoomBorder?.Fill(); break; case Key.U: _zoomBorder?.Uniform(); break; case Key.R: _zoomBorder?.ResetMatrix(); break; case Key.T: _zoomBorder?.ToggleStretchMode(); _zoomBorder?.AutoFit(); break; } } private void ZoomBorder_ZoomChanged(object sender, ZoomChangedEventArgs e) { Debug.WriteLine($"[ZoomChanged] {e.ZoomX} {e.ZoomY} {e.OffsetX} {e.OffsetY}"); } } } ``` ### Getting zoom ratio To get current zoom ratio use `ZoomX` and `ZoomY` properties. ### Getting pan offset To get current pan offset use `OffsetX` and `OffsetY` properties. ### Constrain zoom ratio To constrain zoom ratio use `MinZoomX`, `MaxZoomX`, `MinZoomY` and `MaxZoomY` properties. ### Constrain pan offset To constrain pan offset use `MinOffsetX`, `MaxOffsetX`, `MinOffsetY` and `MaxOffsetY` properties. ### Enable or disable constrains To enable or disable constrains use `EnableConstrains` flag. ## Advanced Features ### Animation Support Enable smooth animations for zoom and pan operations: ```csharp zoomBorder.EnableAnimations = true; zoomBorder.AnimationDuration = TimeSpan.FromMilliseconds(300); ``` ### Double-Click to Zoom Configure double-click zoom behavior: ```csharp zoomBorder.EnableDoubleClickZoom = true; zoomBorder.DoubleClickZoomMode = DoubleClickZoomMode.ZoomInOut; // ZoomIn, ZoomOut, ZoomInOut, ZoomToFit, None zoomBorder.DoubleClickZoomFactor = 2.0; ``` ### Content Bounds Restriction Prevent panning beyond content boundaries: ```csharp zoomBorder.BoundsMode = ContentBoundsMode.KeepContentVisible; // Unrestricted, KeepContentVisible, FillViewport, KeepCentered, Custom zoomBorder.BoundsPadding = new Thickness(10); zoomBorder.MinimumVisibleContentPercentage = 0.1; // 10% of content must remain visible ``` **Bounds Modes:** - **Unrestricted**: No bounds checking (default) - **KeepContentVisible**: Ensures minimum percentage of content stays visible - **FillViewport**: Centers small content and prevents empty space for large content - **KeepCentered**: Always keeps content centered - **Custom**: Override `GetContentBounds()` and `ValidateTransform()` for custom logic ### Resize Behavior Control how the view adjusts when the control is resized: ```csharp zoomBorder.ResizeBehavior = ResizeBehaviorMode.MaintainCenter; // None, MaintainCenter, MaintainTopLeft, MaintainZoom, ReapplyStretch, Custom ``` **Resize Modes:** - **None**: No special handling (default) - **MaintainCenter**: Keeps the center point stable during resize - **MaintainTopLeft**: Keeps the top-left position stable - **MaintainZoom**: Maintains zoom level and adjusts position proportionally - **ReapplyStretch**: Reapplies the current stretch mode (calls AutoFit) - **Custom**: Override `OnResized(Size oldSize, Size newSize)` for custom logic ### Configurable Wheel Behavior Customize mouse wheel behavior with modifier key support: ```csharp zoomBorder.WheelBehavior = WheelBehaviorMode.Zoom; // Zoom, PanVertical, PanHorizontal, None zoomBorder.WheelWithCtrl = WheelBehaviorMode.Zoom; zoomBorder.WheelWithShift = WheelBehaviorMode.PanHorizontal; zoomBorder.WheelZoomSensitivity = 1.0; zoomBorder.WheelPanSensitivity = 1.0; ``` **Wheel Modes:** - **Zoom**: Zoom in/out (default) - **PanVertical**: Pan up/down - **PanHorizontal**: Pan left/right - **None**: Disable wheel **Example:** By default, `Shift`+`Wheel` pans horizontally while regular wheel zooms. ### Keyboard Navigation Navigate and zoom using keyboard shortcuts: ```csharp zoomBorder.EnableKeyboardNavigation = true; zoomBorder.KeyboardPanStep = 50.0; zoomBorder.KeyboardZoomStep = 1.1; ``` **Built-in Keyboard Shortcuts:** - **Arrow Keys**: Pan in the respective direction - **`+` / `=`**: Zoom in - **`-`**: Zoom out - **`Ctrl` + `0`**: Reset view to identity matrix - **`Home`**: Fit content to viewport - **`Ctrl` + `Left`**: Navigate back in view history - **`Ctrl` + `Right`**: Navigate forward in view history ### View History (Undo/Redo) Track navigation history with undo/redo support: ```csharp zoomBorder.EnableViewHistory = true; zoomBorder.ViewHistorySize = 50; // Maximum history entries // Navigate through history if (zoomBorder.CanNavigateBack) zoomBorder.NavigateBack(); if (zoomBorder.CanNavigateForward) zoomBorder.NavigateForward(); // Clear history zoomBorder.ClearViewHistory(); // Listen for history changes zoomBorder.ViewHistoryChanged += (sender, args) => { // Update UI state for back/forward buttons }; ``` ### Center On Methods Programmatically center the viewport on specific points, rectangles, or elements: ```csharp // Center on a point in content coordinates zoomBorder.CenterOn(new Point(100, 100)); // Center on a point with specific zoom zoomBorder.CenterOn(new Point(100, 100), zoom: 2.0); // Center on a rectangle (automatically calculates appropriate zoom) zoomBorder.CenterOn(new Rect(50, 50, 200, 150)); // Center on a control element var targetControl = this.FindControl("MyElement"); zoomBorder.CenterOn(targetControl); // Add padding when centering zoomBorder.CenterPadding = new Thickness(20); ``` ### Coordinate System Helpers Convert between viewport and content coordinate systems: ```csharp // Point conversions Point contentPoint = zoomBorder.ViewportToContent(viewportPoint); Point viewportPoint = zoomBorder.ContentToViewport(contentPoint); // Rectangle conversions Rect contentRect = zoomBorder.ViewportToContent(viewportRect); Rect viewportRect = zoomBorder.ContentToViewport(contentRect); // Vector conversions Vector contentVector = zoomBorder.ScreenToContent(screenVector); Vector screenVector = zoomBorder.ContentToScreen(contentVector); // Size conversions Size contentSize = zoomBorder.ScreenToContent(screenSize); Size screenSize = zoomBorder.ContentToScreen(contentSize); // Get transformation matrices Matrix contentToScreen = zoomBorder.GetContentToScreenMatrix(); Matrix screenToContent = zoomBorder.GetScreenToContentMatrix(); // Get bounds Rect visibleContent = zoomBorder.GetVisibleContentBounds(); Rect viewport = zoomBorder.GetViewportBounds(); ``` ### MVVM Command Support Use built-in ICommand implementations for MVVM scenarios: ```xml