Share via

Fun with Ink & Xaml - Part2: Zoom and Scroll

  • Article

Here is some more fun with ink and Xaml: Scrolling and zooming ink content - in WPF it is as easy as 1,2,3:

1) place an InkCanvas inside a ScrollViewer

2) assign a ScaleTransform to InkCanvas' LayoutTransform

3) data-bind to ScaleX/ScaleY properties in order to zoom in and out

All of this can be done in XAML - no code-behind required. Compare the below simple piece of markup with the code amount and complexity of the Winforms Ink Zoom & Scroll sample from the TabletPC SDK.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">

<DockPanel>

<Slider Name="zoomSlider" DockPanel.Dock="Top"

Minimum="0.1" Maximum="5" Value="1"/>

<ScrollViewer HorizontalScrollBarVisibility="Auto">

<InkCanvas Background="Yellow">

<InkCanvas.LayoutTransform>

<ScaleTransform ScaleX="{Binding ElementName=zoomSlider,

Path=Value}"

ScaleY="{Binding ElementName=zoomSlider,

Path=Value}"/>

</InkCanvas.LayoutTransform>

</InkCanvas>

</ScrollViewer>

</DockPanel>

</Page>

 

 

The XAML file for this sample is attached to this post. You can load it directly into IE or play with it in XamlPad (see screenshot below). Use the slider on top of the Ink control to adjust the zoom level.

Zoom and scroll ink in XamlPad

Next post in this series: Fun with Ink & XAML Part3: Ink Data Binding

Previous post in this series:  Fun with Ink & Xaml - Part1: Ink Reflections

ScrollZoomInk.xaml

Comments

  • Anonymous
    November 02, 2007
    PingBack from http://blogs.msdn.com/swick/archive/2007/10/31/fun-with-ink-xaml-part1-ink-reflections.aspx

  • Anonymous
    November 04, 2007
    Data binding in WPF provides a great way for applications to present and interact with data. Elements

  • Anonymous
    March 14, 2013
    Can you suggest apart from scrolling using scroll viewer , if there is a way we can actually pan the ink canvas ?

  • Anonymous
    November 12, 2014
    How about scrolling with mouse wheel?