Search code examples
c#.netwpfpixelsense

SurfaceInkCanvas and ScatterView in combination?


I have the following layout:

<Grid Width="1024" Height="768" Background="{StaticResource WindowBackground}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>

        <s:ScatterView Name="hitter">
            <s:ScatterViewItem Orientation="0" Width="100" Height="100"></s:ScatterViewItem>
            <s:ScatterViewItem Orientation="0" Width="100" Height="100"></s:ScatterViewItem>
            <s:ScatterViewItem Orientation="0" Width="100" Height="100"></s:ScatterViewItem>
            <s:ScatterViewItem Orientation="0" Width="100" Height="100"></s:ScatterViewItem>
            <s:ScatterViewItem Orientation="0" Width="100" Height="100"></s:ScatterViewItem>
            <s:ScatterViewItem Orientation="0" Width="100" Height="100"></s:ScatterViewItem>
        </s:ScatterView>

            <s:SurfaceInkCanvas Grid.Row="0" Name="Gesture" s:Contacts.PreviewContactDown="Gesture_PreviewContactDown" s:Contacts.PreviewContactChanged="Gesture_PreviewContactChanged" s:Contacts.PreviewContactUp="Gesture_PreviewContactUp"></s:SurfaceInkCanvas>
        <StackPanel Margin="20" Grid.Row="1" Orientation="Horizontal">
            <s:SurfaceTextBox Text="TemplateName" Background="Transparent" BorderThickness="3" BorderBrush="White" Width="200" Name="TemplateName"></s:SurfaceTextBox>
            <s:SurfaceButton Name="Add" Foreground="White" Background="Transparent" Content="Add new template" PreviewContactDown="Add_PreviewContactDown"></s:SurfaceButton>
            <TextBox Foreground="White" Background="Transparent" Margin="220,0,0,0" Name="ResultDisplay" Width="500"></TextBox>
        </StackPanel>
    </Grid>

Now the problem is that if I want to move my ScatterViewItems, the events are consumed by the SurfaceInkCanvas and a stroke is drawn.
That's why I tried to set the property IsHitTestVisible of SurfaceInkCanvas to false.
Then I can move the ScatterviewItems, but I can't draw any strokes anymore and the SurfaceInkCanvas.

How can I allow both?


Solution

  • Think about you want the user to do differently to signal to your application that they are trying to manipulate the SVI vs. draw inside of it.

    Common answers to this question are either:

  • To manipulate, the user will touch a visible 'frame' around the inkcanvas. To implement this, just add padding to the SVI.
  • To ink, the user will tap a button to switch the item to "inking" mode. To implement this, add a button the SVI which toggles IsEnabled for the inkcanvas.