Silverlight. Компонент манипулирования над изображением.

Выкладываю свои наработки в Silverlight. Когда  мне захотелось в проект добавить возможность  просмотра изображений (png, jpg, bmp) я не смог найти приемлемого контрола для просмотра изображений. Deep Zoom не подошел так как требует первоначальной обработки тех самых изображений, Image тоже не подошел —  так как требовалось проводить такие манипуляции над изображениями как поворот изображения, масштабирование. Поэтому я сделал свой элемент управления реализующий  масштабирование и вращение изображения.

Скачать проект (Sulverlight4, Visual Studio Expresion 2010)
Скачать только элемент управления

Рис. 1 Компонент за работой

Как Вы видите на рис. 1 видны помимо изображения область залитая синим и зеленым цветом (оставлено для наглядности). Синий - фон  видимой области элемента управления (ScrollViewer), а зеленый — фон активной области, в которой происходит манипуляция над изображением (Grid). Видимая область элемента управления  имеет фиксированное значение ширины и высоты  и отвечает за появление полос прокруток при масштабировании изображений. Активная область определяет размер изображения. Как видно на рисунке 1 при вращение края изображения выступают за пределы активной области (Grid-а), но они не обрезаются, а учитываются в элементе управления путем задания определенных значений свойства margin элемента управления Grid. Наэтом вроде все хитрые моменты закончились, остальное можно увидеть в коде.

xmlns:local="clr-namespace:ImageViewer"

<local:ImageManipulate Width="500" Height="500" x:Name="imageViewer" ActivAreaHeight="600" ActivAreaWidth="600" Background="Blue" ZoomStep="30" RotateStep="3">
    <local:ImageManipulate.Source>
        <!-- Изображение которое будет отображаться -->
        <Image x:Name="imageContent"/>
    </local:ImageManipulate.Source>
    <local:ImageManipulate.CanvasInside>
        <!-- Холст для размещения поверх изображения (может пригодится) -->
                <Canvas Width="auto" Height="auto" x:Name="canavasContent">
        </Canvas>
    </local:ImageManipulate.CanvasInside>
</local:ImageManipulate>Syhi-подсветка кода

параметры Width, Height – ширина и высота элемента управления — видимая часть,
параметры ActivAreaWidth, ActivAreaHight – ширина и высота активной области,
ZoomStep – шаг масштабирования в px,
RotateStep – шаг поворота вокруг оси, проходящей через центральную точку  изображения в градусах.
Методы элемента управления ImageManipulate
Увеличение изображения:
imageViewer.zoomIn();
Уменьшения изображения:
imageViewer.zoomOut();
Поворот против часовой стрелки:
imageViewer.rotateLeft();
Поворот по часовой стрелке:
imageViewer.rotateRight();
Возвращение к первоначальным опциям
imageViewer.setInOriginalSizeAndOrientation();