locked
InkCanvas, Zoom, & InkSpaceToPixel etc RRS feed

  • Question

  • Hello,
    What is the equivalent of InkSpaceToPixel and PixelToInkSpace in WPF version of Ink? Is there an article that shows how to move from tablet pc sdk ink to wpf ink? There is something on msdn on digital ink but that has minimal information. Thanks in advance.
    Regards,
    Vinay Agarwal
    Wednesday, January 31, 2007 5:53 PM

Answers

  • Hi Vinay,

    in WPF all ink data is presented in the same coordinate system that the rest of WPF uses. There is no need for converting from/to InkSpace anymore.

    If you are asking specifically about zoom: WPF makes it really easy to zoom any element (and its content). Take a look at the RenderTransform and/or LayoutTransform properties. Below is an example that you can paste directly into XamlPad. It binds a slider control to the LayoutTransform property of an InkCanvas. This faciliates zoom functionality for ink (and child elements) without doing any calculation on your part!

    If you are migrating from TabletPC SDK 1.7 to WPF ink, you might find this article helpful: http://msdn2.microsoft.com/en-gb/library/ms788719.aspx

    However, many concepts in WPF (that also apply to InkCanvas) don't have an equivalent in the SDK 1.7 world (like the example below). If you want to make yourself familiar with those WPF concepts you will find that the InkCanvas provides a much richer experience and is a lot easier and more flexibile than - for example - the InkPicture control in Winforms.

    Thanks, Stefan Wick

     

    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>    
      </Grid.RowDefinitions>
      <InkCanvas Grid.Row="0" Background="Yellow">
        <InkCanvas.LayoutTransform>
          <ScaleTransform ScaleX="{Binding ElementName=zoomSlider,Path=Value}" ScaleY="{Binding ElementName=zoomSlider,Path=Value}"/>
        </InkCanvas.LayoutTransform>
        <Label InkCanvas.Top="100" InkCanvas.Left="100">Test</Label>
      </InkCanvas>
      <Slider Name="zoomSlider" Grid.Row="1" Value="1" Minimum="0.3" Maximum="3"/>
    </Grid>

    Wednesday, January 31, 2007 7:26 PM

All replies

  • Hi Vinay,

    in WPF all ink data is presented in the same coordinate system that the rest of WPF uses. There is no need for converting from/to InkSpace anymore.

    If you are asking specifically about zoom: WPF makes it really easy to zoom any element (and its content). Take a look at the RenderTransform and/or LayoutTransform properties. Below is an example that you can paste directly into XamlPad. It binds a slider control to the LayoutTransform property of an InkCanvas. This faciliates zoom functionality for ink (and child elements) without doing any calculation on your part!

    If you are migrating from TabletPC SDK 1.7 to WPF ink, you might find this article helpful: http://msdn2.microsoft.com/en-gb/library/ms788719.aspx

    However, many concepts in WPF (that also apply to InkCanvas) don't have an equivalent in the SDK 1.7 world (like the example below). If you want to make yourself familiar with those WPF concepts you will find that the InkCanvas provides a much richer experience and is a lot easier and more flexibile than - for example - the InkPicture control in Winforms.

    Thanks, Stefan Wick

     

    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>    
      </Grid.RowDefinitions>
      <InkCanvas Grid.Row="0" Background="Yellow">
        <InkCanvas.LayoutTransform>
          <ScaleTransform ScaleX="{Binding ElementName=zoomSlider,Path=Value}" ScaleY="{Binding ElementName=zoomSlider,Path=Value}"/>
        </InkCanvas.LayoutTransform>
        <Label InkCanvas.Top="100" InkCanvas.Left="100">Test</Label>
      </InkCanvas>
      <Slider Name="zoomSlider" Grid.Row="1" Value="1" Minimum="0.3" Maximum="3"/>
    </Grid>

    Wednesday, January 31, 2007 7:26 PM
  •  Hi Stefan Wick,

     Your code works fine,but it scale InkCanvas(changes size of the InkCanvas).I don't Want to chanhe the size of the inkcanvas,I want just scale the childrens of the InkCanvas and accordinglly maintain the position.

     What would be your approach.please let me..

     looking forward.........

    thanks in advanced. :)

     

    Regards,

    Vinod Sa.

    Tuesday, March 13, 2007 11:06 AM
  • Here is one way to do this:

     

    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Width="500" Height="300">
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>    
      </Grid.RowDefinitions>
      <InkCanvas Grid.Row="0" Background="Yellow">
        <InkCanvas.LayoutTransform>
          <ScaleTransform ScaleX="{Binding ElementName=zoomSlider,Path=Value}" ScaleY="{Binding ElementName=zoomSlider,Path=Value}"/>
        </InkCanvas.LayoutTransform>
        <Label InkCanvas.Top="100" InkCanvas.Left="100">Test</Label>
      </InkCanvas>
      <Slider Name="zoomSlider" Grid.Row="1" Value="1" Minimum="0.3" Maximum="3"/>
    </Grid>

     

    Thanks,

    Stefan Wick

    Wednesday, April 4, 2007 1:52 PM