Back to Skills

checking-image-bounds-transform

verified

Checks and clamps mouse coordinates within transformed image bounds in WPF. Use when implementing measurement tools or annotations that should only work inside Pan/Zoom/Rotate transformed images.

View on GitHub

Marketplace

dotnet-claude-plugins

christian289/dotnet-with-claudecode

Plugin

wpf-dev-pack

development

Repository

christian289/dotnet-with-claudecode
5stars

wpf-dev-pack/skills/checking-image-bounds-transform/SKILL.md

Last Verified

January 23, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/christian289/dotnet-with-claudecode/blob/main/wpf-dev-pack/skills/checking-image-bounds-transform/SKILL.md -a claude-code --skill checking-image-bounds-transform

Installation paths:

Claude
.claude/skills/checking-image-bounds-transform/
Powered by add-skill CLI

Instructions

# WPF Image Bounds Checking (With Transforms)

A pattern for checking if mouse coordinates are within the image area and clamping coordinates to image bounds when Pan, Zoom, Rotate transforms are applied.

## 1. Problem Scenario

### Requirements
- Measurement tools, annotation tools in image viewers should only work **within the image area**
- Need accurate boundary detection even when image is zoomed, panned, or rotated

### Complexity
- `Image` control position varies based on `Stretch="None"`, `HorizontalAlignment="Center"` settings
- When `RenderTransform` applies Pan, Zoom, Rotate, calculating actual image position becomes complex

---

## 2. Solution Pattern

### 2.1 Image Bounds Check Method

```csharp
namespace MyApp.Controls;

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

public class ImageViewer : Control
{
    // DependencyProperties (omitted)
    public ImageSource? ImageSource { get; set; }
    public double ZoomFactor { get; set; } = 1.0;
    public double PanX { get; set; }
    public double PanY { get; set; }
    public double RotationAngle { get; set; }

    /// <summary>
    /// Check if the given point is within the image area.
    /// </summary>
    /// <param name="point">Point in parent container coordinates</param>
    /// <returns>True if within image area</returns>
    public bool IsPointWithinImage(Point point)
    {
        if (ImageSource is null)
            return false;

        // 1. Original image size
        var imageWidth = ImageSource.Width;
        var imageHeight = ImageSource.Height;

        // 2. Transformed image size (with zoom)
        var transformedWidth = imageWidth * ZoomFactor;
        var transformedHeight = imageHeight * ZoomFactor;

        // 3. Viewer center (if image is center-aligned)
        var viewerCenterX = ActualWidth / 2;
        var viewerCenterY = ActualHeight / 2;

        // 4. Image center (with pan)
        var imageCenterX = viewerCenterX + PanX;
        var i

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
8676 chars