Question

In my application, I have an InkCanvas with an image in the background. When I draw on the InkCanvas to the bottom or left edge, the InkCanvas changes size to fit the sketch, which messes up the rendering of the image in the background. How do I stop the InkCanvas from resizing when strokes are applied outside its current size?

Current XAML:

<InkCanvas x:Name="DrawingArea"
           Width="Auto"
           Height="Auto"
           ClipToBounds="True"
           Background="{x:Null}" />

• Background is set in code-behind

Answer 1

Without specifying a specific size, I found that binding the MaxWidth and MaxHeight to the ActualWidth and ActualHeight of the parent element keeps the InkCanvas from expanding outside the element.

<Grid x:Name="LayoutRoot">
    <InkCanvas x:Name="DrawingArea"
               MaxWidth="{Binding ActualWidth, ElementName=LayoutRoot}"
               MaxHeight="{Binding ActualHeight, ElementName=LayoutRoot}"
               Background="{x:Null}" />
    ...
</Grid>