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 GitHubchristian289/dotnet-with-claudecode
wpf-dev-pack
wpf-dev-pack/skills/checking-image-bounds-transform/SKILL.md
January 23, 2026
Select agents to install to:
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-transformInstallation paths:
.claude/skills/checking-image-bounds-transform/# 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