Fun with Ink & Xaml - Part1: Ink Reflections

  • Article

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.

  <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

InkReflections.xaml

Comments

  • Anonymous
    October 31, 2007
    PingBack from http://msdnrss.thecoderblogs.com/2007/10/31/fun-with-ink-xaml-part1-ink-reflections/

  • Anonymous
    November 02, 2007
    Here is some more fun with ink and Xaml: Scrolling and zooming ink content - in WPF it is as easy as

  • Anonymous
    November 14, 2007
    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 Johan

  • Anonymous
    November 14, 2007
    The comment has been removed

  • Anonymous
    November 28, 2007
    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?

  • Anonymous
    November 29, 2007
    Hi Tad, the shipping version of Microsoft Expression Blend can be used to view/edit/create WPF XAML: http://www.microsoft.com/expression/ 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. Thanks, Stefan Wick

  • Anonymous
    December 02, 2007
    I have received several question from folks about my earlier post on Ink Reflections in WPF . People

  • Anonymous
    March 25, 2009
    One of the things missing from Silverlight 3 is WPF’s Visualbrush . Visualbrush basically allows you