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 - 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

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

Ink Reflections - in Silverlight

Fun with Ink & Xaml - Part1: Ink Reflections