locked
Constraining Ink in an InkCanvas RRS feed

  • Question

  • If you run this trivial XAML program, it displays an ellipse and lets you draw on it. If you resize the window, the ink stay nicely in proportion to where it was drawn. This is all great!

     

    Code Block

     

    <Window x:Class="WpfApplication4.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Viewbox>

    <InkCanvas>

    <InkCanvas.Background>

    <DrawingBrush>

    <DrawingBrush.Drawing>

    <GeometryDrawing Brush="Red">

    <GeometryDrawing.Geometry>

    <EllipseGeometry RadiusX="9" RadiusY="5"/>

    </GeometryDrawing.Geometry>

    </GeometryDrawing>

    </DrawingBrush.Drawing>

    </DrawingBrush>

    </InkCanvas.Background>

    </InkCanvas>

    </Viewbox>

    </Window>

     

     

    Now try scribbling outside the ellipse (start drawing in the ellipse and make a big sweeping loop outside the window by the lower right corner). The ink essentially keeps collecting outside of the window and this causes the viewbox to resize everything. Is there some way to constrain the ink to only within the original bounds of the InkCanvas?

     

    I want the viewbox so that the ellipse resizes nicely to the screen, I just don't want the inkcanvas to change sizes relative to the ellipse. I tried setting the Width and Height of the InkCanvas and that helps but causes some other issues if I substitute an image for the ellipse (due to differences between the DPI of the image and that of the particular machine it's running on).

     

    Is there some property I haven't found yet that controls the InkCanvas? Any other suggestions? Thanks!

     

     

     

    Monday, November 12, 2007 1:54 AM

Answers

  • Sorry for being vague there. The problem occurs if the image being displayed behind the ink is not 96 dpi. Because of WPF's device independence, any image that's not exactly 96 dpi will get scaled when it's displayed. That's fine if you control the images being displayed, but if they're coming from an uncontrolled source it's hard to say what dpi they're created with. If it doesn't match, you end up with an image that doesn't quite work.

     

    But after playing with it for awhile I decided that fixing the images to 96 dpi and assigning a fixed width and height to the InkCanvas really was the best way to go. I'm finding the InkCanvas a bit quirky to work with and simplifying everything around it is the cleanest solution for me.

     

    Thanks for the help!

    Thursday, November 15, 2007 9:26 AM

All replies

  • Hello, if you don’t want to set a specific size on the InkCanvas, you can handle its PreviewMouseMove event, and if mouse is moved outside the InkCanvas, you can release mouse capture so it won’t draw anything more.

             private void Ink1_PreviewMouseMove(object sender, System.Windows.Input.MouseEventArgs e)

             {

                  Point p = e.GetPosition(ink1);

                  if ((p.X > ink1.ActualWidth) || (p.Y > ink1.ActualHeight))

                  {

                       ink1.ReleaseMouseCapture();

                  }

             }

     

    Wednesday, November 14, 2007 7:56 AM
  •  sbussinger wrote:

    I tried setting the Width and Height of the InkCanvas and that helps but causes some other issues if I substitute an image for the ellipse (due to differences between the DPI of the image and that of the particular machine it's running on).

     

    I find that giving the InkCanvas a specified size (Height and Width) can help here, could you please be more specific to the "some other issues" you mentioned here?

     

    Thanks

    Thursday, November 15, 2007 5:47 AM
  • Sorry for being vague there. The problem occurs if the image being displayed behind the ink is not 96 dpi. Because of WPF's device independence, any image that's not exactly 96 dpi will get scaled when it's displayed. That's fine if you control the images being displayed, but if they're coming from an uncontrolled source it's hard to say what dpi they're created with. If it doesn't match, you end up with an image that doesn't quite work.

     

    But after playing with it for awhile I decided that fixing the images to 96 dpi and assigning a fixed width and height to the InkCanvas really was the best way to go. I'm finding the InkCanvas a bit quirky to work with and simplifying everything around it is the cleanest solution for me.

     

    Thanks for the help!

    Thursday, November 15, 2007 9:26 AM