Stylus problem while Scaling InkCanvas in ViewBox

Windows Presentation Foundation (WPF)

Alexey Teterev

Hi.

I am wrapping my Ink Canvas with View Box to scale canvas content (I need this kind of behavior).

<Viewbox StretchDirection="Both" Stretch="Fill">

<InkCanvas Width="100" Height="100"/>

</Viewbox>

All is working pretty well (Content is scaled).

But then I have noticed that View Box transformations are not applied to Ink Canvas Stylus.

So if I will create very small Ink Canvas and then make my View Box large (canvas will be scaled too) my Stylus over the Ink Canvas will be very small but when I will start drawing on this canvas my strokes will be very very thick (because they are properly scaled).

No matter how I resize my window ¨C stylus size is always the same.

Of course somehow I can find View Box transformation matrix and then apply it on Stylus (DefaultDrawingAttributes.StylusTipTransform) only when it is moving and reset this transformation when I am actually drawing (if I will not reset the transformation my strokes will be even bigger). But it seems to me incorrect from programming prospective.

Is there another way to make stylus look correct on the Ink Canvas It looks like kind of bug of the View Box class ¡­

Thanks, Alex.



Top

Re: Windows Presentation Foundation (WPF) Stylus problem while Scaling InkCanvas in ViewBox

Stefan Wick - MSFT

Hi Alex,

the Stylus cursor for the InkCanvas gets dynamically created whenever the DrawingAttributes change or a transform gets applied directly on the InkCanvas element. We do not generate a new cursor (for performance reasons) if the transform is animated or applied higher up in the tree. Unfortunately, this limitation affects the Viewbox scenario as you pointed out (since the transform is applied on InkCanvas's parent here).

There are two ways to workaround this:

1) you can set InkCanvas.UseCustomCursor=true and then managed the cursor creation yourself

2) switch to a different layout mechanism that accomplishes the desired result by setting the transform directly on the InkCanvas

Here is a code example for #2:

Code Snippet

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="500">
<Canvas Name="canvas" SizeChanged="Viewbox_SizeChanged">
<InkCanvas Name="myInkCanvas" Background="Yellow" Width="50" Height="50">
<InkCanvas.LayoutTransform>
<ScaleTransform x:Name="scaleTransform"/>
</InkCanvas.LayoutTransform>
<Label>foo</Label>
</InkCanvas>
</Canvas>
</Window>


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace WpfApplication1
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}

private void Viewbox_SizeChanged(object sender, SizeChangedEventArgs e)
{
scaleTransform.ScaleX = canvas.ActualWidth / myInkCanvas.ActualWidth;
scaleTransform.ScaleY = canvas.ActualHeight / myInkCanvas.ActualHeight;
}
}
}

Thanks,

Stefan Wick

Microsoft - Windows Experience





Top

Re: Windows Presentation Foundation (WPF) Stylus problem while Scaling InkCanvas in ViewBox

Alexey Teterev

Thank you very much.

>> We do not generate a new cursor if the transform is animated or applied higher up in the tree.

That is what I need to know. I will try one of your workarounds.





Top