Stefan Wick's Weblog - Development with Silverlight, WPF and Tablet PC : XAML

TabletPC Development Gotchas Part 6: InkCanvas Element Selection/Move/Resize

swick — Tue, 18 Dec 2007 20:46:00 GMT

WPF's InkCanvas element provides a lot of built-in functionality for several common, ink-related tasks like stylus gesture recognition, point and stroke erase, as well as the selection, resizing and moving of ink strokes. The key to those features is the 'EditingMode' property - which is nicely demonstrated in the InkCanvas EditingModes SDK sample (btw, it also demonstrates an implementation of an Undo/Redo stack for ink operations).

One little known, yet very cool feature is not demonstrated in this sample, though: The selection, resizing and moving functioality (i.e. EditingMode="Select") can not only be applied to ink strokes, but also to child elements of the InkCanvas. This can be very handy if you want to build, for example, a note-taking application that can also host text, pictures and other content besides the handwritten ink. You can then use the 'Select" mode to let the user re-arrange and resize all their content.

The "gotcha" I wanted to point in this blog post is a limitation in this feature: Child elements in an InkCanvas may be positioned in a variety of different ways: for example you can position them by setting a "Margin" or by setting any combination of "Canvas.Left/Right/Top/Bottom" attached properties. InkCanvas's selection/moving/resizing feature, however, only works on elements that have absolute positioning set via "Canvas.Left/Top".

Let's look at the following example markup:

<Window x:Class="InkCanvasElementSelection.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="InkCanvasElementSelection"

ResizeMode="NoResize"

Height="450" Width="450">

<Window.Resources>

</Style>

</Window.Resources>

<Grid>

<InkCanvas Name="inkCanvas" EditingMode="Select"

Background="LightGoldenrodYellow"

SelectionChanging="OnSelectionChanging">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</InkCanvas>

</Grid>

</Window>

Note that the markup subscribes to the 'SelectionChanging' event on the InkCanvas. Let's leave the implementation of that event handler empty for now to demonstrate the limitation. Also note that the four rectangles use different ways to position themselves on the InkCanvas. Only the blue rectangle uses the "Canvas.Left/Top" attached properties for positioning.

Now you can use the lasso tool to select one or more elements, and then try to move and resize them. You will notice that it only works correctly for the blue rectangle (because that one has been positioned via "Canvas.Left/Top"). For the other rectangles you won't get the desired move or resize results.

Now what can I do if there are child elements that have not been positioned via "Canvas.Left/Top"? Here is a workaround to make this feature work even for those elements: In the 'SelectionChanging' event - which fires whenever you change what content is selected - you can walk the list of child elements and ensure they are positioned via "Canvas.Left/Top". Here is a piece you can add to the above sample to demonstrate this approach:

void OnSelectionChanging(object sender, InkCanvasSelectionChangingEventArgs e)

{

ReadOnlyCollection<UIElement> elements = e.GetSelectedElements();

foreach (UIElement element in elements)

{

// obtain actual location of element relative to InkCanvas

Point locationInInkCanvas = element.TranslatePoint(new Point(0, 0),

inkCanvas);

// set the location via Left/Top properties

element.SetValue(InkCanvas.LeftProperty, locationInInkCanvas.X);

element.SetValue(InkCanvas.TopProperty, locationInInkCanvas.Y);

// un-set right/bottom properties

element.SetValue(InkCanvas.RightProperty, double.NaN);

element.SetValue(InkCanvas.BottomProperty, double.NaN);

// re-translate any render transform

Matrix matRender = element.RenderTransform.Value;

matRender.Translate(-matRender.OffsetX, -matRender.OffsetY);

element.RenderTransform = new MatrixTransform(matRender);

// set margins to zero

if (element is FrameworkElement)

{

((FrameworkElement)element).Margin = new Thickness(0d);

}

Now if re-run the sample you will find all rectangles from the original markup can be selected, moved and resized as expected:

Full source code of this example is included in the attached Visual Studio project.

Ink Reflections - in Silverlight

swick — Sun, 02 Dec 2007 08:25:00 GMT

I have received several question from folks about my earlier post on Ink Reflections in WPF. People were curious how to accomplish the same or a similar effect in Silverlight, in the absence of the VisualBrush object.

Clearly, WPF's VisualBrush is the main object that enables scenarios like this and it definitely makes their implementation straightforward. However, in Silverlight you can also accomplish effects like this with little bit of extra coding.

First of all, Silverlight has an ImageBrush and a VideoBrush, so as long as the visul you want to mirror is an image or a video, you can apply the same technique as used in my WPF sample and you are done.

If you want to mirror a different type of visual, you will have to manage the mirror yourself, meaning you have to create a secondary, mirrored visual and update it whenever the original changes.

I have created a sample that demonstrates both techniques together. The yellow background with silver border is an image that gets mirrored using an ImageBrush. The ink you draw (and erase) gets mirrored programmatically using some JavaScript code-behind.

The sample's source code is attached. A live version, hosted via Silverlight Streaming, is included below for you try out.

Fun with Ink & Xaml - Part2: Zoom and Scroll

swick — Fri, 02 Nov 2007 02:01:00 GMT

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="http://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.

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

Fun with Ink & Xaml - Part1: Ink Reflections

swick — Thu, 01 Nov 2007 00:44:00 GMT

With the InkCanvas element in WPF you can create stunning inking experiences for TabletPC users (mouse users can play along, too!). Several very cool scenarios can be enabled just by writing markup - without any additional code behind.

Here is a first example: an ink input field (takes input from either stylus or mouse) that has a dynamic reflection effect. While the user is inking, the reflection gets updated dynamically, in real-time. Implemented entirely in markup.

The key feature (besides InkCanvas) here is the VisualBrush. The bottom part of the scene is a Rectangle that gets painted with a VisualBrush that is bound to the ink input control. As a result it gets updated dynamically as the user draws onto the control. Below is the relevant piece of markup. The full XAML file is attached to this post. You can load it into XamlPad to play with it, or just open in IE and ink away.

<Rectangle.Fill>
    <VisualBrush
      Visual="{Binding ElementName=inkBorder}">
      <VisualBrush.RelativeTransform>
        <TransformGroup>
          <ScaleTransform ScaleX="1" ScaleY="-1" />
          <TranslateTransform Y="1" />
        </TransformGroup>
      </VisualBrush.RelativeTransform>
    </VisualBrush>
</Rectangle.Fill>

More information about creating reflections using VisualBrush can be found in this MSDN How-To Topic. Additional How-To topics on Ink in WPF are also available on MSDN.

Next post in this series: Fun with Ink & Xaml - Part2: Zoom and Scroll