#482 – You Can Include Other Controls Inside an InkCanvas

You can use the InkCanvas control as a blank canvas that you can draw on, using the mouse or a stylus.  You can also include child controls in the InkCanvas in the same way that you add child controls to a Canvas.  But with the InkCanvas, the user cannot interact with the controls, but can just scribble over the top of them.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Content="Draw in the area below using your mouse" Margin="10,5"/>
        <Border Grid.Row="1" BorderBrush="DodgerBlue" BorderThickness="2" Margin="10" SnapsToDevicePixels="True">
            <InkCanvas MinHeight="0" MinWidth="0">
                <Label Content="Draw on me" InkCanvas.Left="5" InkCanvas.Right="10"/>
                <Button Content="Me too" InkCanvas.Left="10" InkCanvas.Bottom="10" />
                <Image Source="Images\BestYears.jpg" Height="200" InkCanvas.Right="5" InkCanvas.Top="5"/>
            </InkCanvas>
        </Border>
    </Grid>

Advertisements

#481 – You Can Draw On an InkCanvas Control with the Mouse

You can use the InkCanvas control to include an area of your user interface that users can draw on, using the mouse or a stylus.

By default, an InkCanvas allows drawing on its surface using the mouse.  Each time that you click and drag with the mouse, you are creating a stroke, which is then stored with the InkCanvas.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Content="Draw in the area below using your mouse" Margin="10,5"/>
        <Border Grid.Row="1" BorderBrush="DodgerBlue" BorderThickness="2" Margin="10" SnapsToDevicePixels="True">
            <InkCanvas/>
        </Border>
    </Grid>