How to display InkCanvas in Viewbox with ruler in inktoolbar

Question

The ruler (InkPresenterRuler) in the inktoolbar doesn't display correctly when the InkCanvas is a child of the Viewbox.

Anyone got any idea how to fix it?

Answer 1

Could you please elaborate on how exactly the ruler doesn't display correctly for you (maybe provide a screenshot and XAML snippet)? I made a quick demo of your scenario and the ruler displays correctly for me (everything is enlarged 200% as expected).

<Grid Background="Black">
    <Viewbox Width="600" Height="600">
        <Grid Width="300" Height="300" Background="White">
            <InkCanvas x:Name="inkCanvas"/>
            <InkToolbar TargetInkCanvas="{x:Bind inkCanvas}" VerticalAlignment="Top"/>
        </Grid>
    </Viewbox>
</Grid>

Answer 2

After hours of trying and error, this is what I have however I couldn't get the ruler display in a diagonal direction.

private void ResizeInkRuler() {
  var viewBoxWidth = ImageViewBox.ActualWidth;
  var viewBoxHeight = ImageViewBox.ActualHeight;
  var widthIsGreater = viewBoxWidth.CompareTo(viewBoxHeight) > 0;

  var scaleFactor = widthIsGreater ? InkImage.ActualWidth / viewBoxWidth : InkImage.ActualHeight / viewBoxHeight;
  var length = widthIsGreater ? viewBoxWidth : viewBoxHeight;
  ruler.Transform = Matrix3x2.CreateScale((float) scaleFactor);
  ruler.Length = length;
}