Fun with Ink & Xaml – Part1: Ink Reflections

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.

Ink Reflections - using XAML

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.

      Visual=”{Binding ElementName=inkBorder}”>
          <ScaleTransform ScaleX=”1″ ScaleY=”-1″ />
          <TranslateTransform Y=”1″ />

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


Comments (8)

  1. Here is some more fun with ink and Xaml: Scrolling and zooming ink content – in WPF it is as easy as

  2. Johan says:

    Hi Stefan and thanks for a couple of great seminars at Öredev.

    When you showed this cool ink and reflections demo I offcourse wanted to try that out(not the ink part just the reflections) only to discover that there are no such thing as a visual brush in Silverlight is that right?

    Ofcourse I can mimic the reflections on pictures and videos using a image brush or a video brush but there are nothing that can reflect the content of a canvas?

    Then i discovered that your exaplecode runs in IE and it seams that it is running from the web server how is that?

    I’m a little bit confused here could you please clarify this to me…

    Best Regards


  3. swick says:

    Hi Johan,

    The Ink Reflection sample is a WPF-specific sample that takes advantage of WPF’s VisualBrush feature.

    Silverlight’s current feature set is a subset of WPF’s features and VisualBrush is one of the features that are not yet available in the Silverlight platform.

    As you pointed out, you can create reflections from images and videos by using the ImageBrush and VideoBrush. There is currently not a direct way to reflect the content of a Canvas in Silverlight. You would have to duplicate and manage the content – as well as any updates to the content – yourself, in your code. For this ink scenario, you’d have to create a second InkPresenter in the bottom half – and then when user draws a stroke, you’d have update the reflection from your code.

    To answer your other question:

    When you click on the attachment to this post (InkReflections.xaml) the .xaml file gets pushed down to your browser. If your machine has WPF installed, then the sample will run directly in the browser as a so called ‘XBAP’ (XAML Browser Application). You can also create compiled XBAP’s in Visual Studio that have C# or VB.NET code behind the XAML markup and deploy that via the browser. If your app doesn’t have any code-behind (like my little sample here) then you don’t even need to compile it. You can just deploy the .xaml and compilation will happen on the file.

    More information about XBAP’s:

    Please let me know if you have more questions.


    Stefan Wick

  4. Tad Carter says:

    Hey Stefan,

    I am brand new to WPM and Silverlight… question for you… if Silverlight is a subset of WPF… what tools do you use to view the WPF elements such as the Visual Brush?   I tried copying the xaml code into Expression Blend 2 (beta) but failed.  I get an error: The name "VisualBrush" does not exist in the namespace…

    Is there a tool like Expression Blend for viewing WPF xaml?

  5. swick says:

    Hi Tad,

    the shipping version of Microsoft Expression Blend can be used to view/edit/create WPF XAML:

    It should also work in the Expression Blend 2 Preview release. Just make sure you create a WPF project (as oppossed to a Silverlight project).

    You can also use XamlPad (a very simple, lightweight tool) to view and edit WPF XAML. It ships as part of the Windows SDK.

    Hope this helps.


    Stefan Wick

  6. I have received several question from folks about my earlier post on Ink Reflections in WPF . People

  7. One of the things missing from Silverlight 3 is WPF’s Visualbrush . Visualbrush basically allows you