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
Was it helpful?

Solution

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>

OTHER TIPS

You could hardcode the widths instead of using auto: Width = "200" Height = "200"

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top