The following example demonstrates how to simulate the use of both a pen and a highlighter on the same InkCanvas. The example assumes that the root element in the markup language (XAML) file is a DockPanel called root. It also assumes that there is a Button called switchHighlighter and that both the Click and Loaded events are connected to the example's event handler.
Private WithEvents inkCanvas1 As New InkCanvas()
Private inkDA As DrawingAttributes
Private highlighterDA As DrawingAttributes
Private useHighlighter As Boolean = False
' Add an InkCanvas to the window, and allow the user to
' switch between using a green pen and a purple highlighter
' on the InkCanvas.
Private Sub WindowLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.Background = Brushes.DarkSlateBlue
inkCanvas1.DefaultDrawingAttributes.Color = Colors.SpringGreen
' Add the InkCanvas to the DockPanel, named root.
root.Children.Add(inkCanvas1)
' Set up the DrawingAttributes for the pen.
inkDA = New DrawingAttributes()
With inkDA
.Color = Colors.SpringGreen
.Height = 5
.Width = 5
.FitToCurve = True
End With
' Set up the DrawingAttributes for the highlighter.
highlighterDA = New DrawingAttributes()
With highlighterDA
.Color = Colors.Orchid
.IsHighlighter = True
.IgnorePressure = True
.StylusTip = StylusTip.Rectangle
.Height = 30
.Width = 10
End With
inkCanvas1.DefaultDrawingAttributes = inkDA
End Sub 'WindowLoaded
' Create a button called switchHighlighter and use
' SwitchHighlighter_Click to handle the Click event.
' The useHighlighter variable is a boolean that indicates
' whether the InkCanvas renders ink as a highlighter.
' Switch between using the 'pen' DrawingAttributes and the
' 'highlighter' DrawingAttributes when the user clicks on .
Private Sub SwitchHighlighter_Click(ByVal sender As [Object], ByVal e As RoutedEventArgs)
useHighlighter = Not useHighlighter
If useHighlighter Then
switchHighlighter.Content = "Use Pen"
inkCanvas1.DefaultDrawingAttributes = highlighterDA
Else
switchHighlighter.Content = "Use Highlighter"
inkCanvas1.DefaultDrawingAttributes = inkDA
End If
End Sub 'SwitchHighlighter_Click
InkCanvas inkCanvas1 = new InkCanvas();
DrawingAttributes inkDA;
DrawingAttributes highlighterDA;
bool useHighlighter = false;
// Add an InkCanvas to the window, and allow the user to
// switch between using a green pen and a purple highlighter
// on the InkCanvas.
private void WindowLoaded(object sender, EventArgs e)
{
inkCanvas1.Background = Brushes.DarkSlateBlue;
inkCanvas1.DefaultDrawingAttributes.Color = Colors.SpringGreen;
root.Children.Add(inkCanvas1);
// Set up the DrawingAttributes for the pen.
inkDA = new DrawingAttributes();
inkDA.Color = Colors.SpringGreen;
inkDA.Height = 5;
inkDA.Width = 5;
inkDA.FitToCurve = false;
// Set up the DrawingAttributes for the highlighter.
highlighterDA = new DrawingAttributes();
highlighterDA.Color = Colors.Orchid;
highlighterDA.IsHighlighter = true;
highlighterDA.IgnorePressure = true;
highlighterDA.StylusTip = StylusTip.Rectangle;
highlighterDA.Height = 30;
highlighterDA.Width = 10;
inkCanvas1.DefaultDrawingAttributes = inkDA;
}
// Create a button called switchHighlighter and use
// SwitchHighlighter_Click to handle the Click event.
// The useHighlighter variable is a boolean that indicates
// whether the InkCanvas renders ink as a highlighter.
// Switch between using the 'pen' DrawingAttributes and the
// 'highlighter' DrawingAttributes.
void SwitchHighlighter_Click(Object sender, RoutedEventArgs e)
{
useHighlighter = !useHighlighter;
if (useHighlighter)
{
switchHighlighter.Content = "Use Pen";
inkCanvas1.DefaultDrawingAttributes = highlighterDA;
}
else
{
switchHighlighter.Content = "Use Highlighter";
inkCanvas1.DefaultDrawingAttributes = inkDA;
}
}
The following example declares two InkCanvas objects in XAML and establishes data binding between them and other data sources. The first InkCanvas, called ic, is bound to two data sources. The EditingMode and DefaultDrawingAttributes properties on ic are bound to ListBox objects, which are, in turn, bound to arrays defined in the XAML. The EditingMode, DefaultDrawingAttributes, and Strokes properties of the second InkCanvas are bound to the first InkCanvas in the following code.
<Canvas>
<Canvas.Resources>
<!--Define an array containing the InkEditingMode Values.-->
<x:Array x:Key="MyEditingModes" x:Type="{x:Type InkCanvasEditingMode}">
<x:Static Member="InkCanvasEditingMode.Ink"/>
<x:Static Member="InkCanvasEditingMode.Select"/>
<x:Static Member="InkCanvasEditingMode.EraseByPoint"/>
<x:Static Member="InkCanvasEditingMode.EraseByStroke"/>
</x:Array>
<!--Define an array containing some DrawingAttributes.-->
<x:Array x:Key="MyDrawingAttributes"
x:Type="{x:Type DrawingAttributes}">
<DrawingAttributes Color="Black" FitToCurve="true"
Width="3" Height="3"/>
<DrawingAttributes Color="Blue" FitToCurve="false"
Width="5" Height="5"/>
<DrawingAttributes Color="Red" FitToCurve="true"
Width="7" Height="7"/>
</x:Array>
<!--Create a DataTemplate to display the
DrawingAttributes shown above-->
<DataTemplate DataType="{x:Type DrawingAttributes}" >
<Border Width="80" Height="{Binding Path=Height}">
<Border.Background >
<SolidColorBrush Color="{Binding Path=Color}"/>
</Border.Background>
</Border>
</DataTemplate>
</Canvas.Resources>
<!--Bind the first InkCavas' DefaultDrawingAtributes to a
Listbox, called lbDrawingAttributes, and its EditingMode to
a ListBox called lbEditingMode.-->
<InkCanvas Name="ic" Background="LightGray"
Canvas.Top="0" Canvas.Left="0"
Height="400" Width="200"
DefaultDrawingAttributes="{Binding
ElementName=lbDrawingAttributes, Path=SelectedItem}"
EditingMode=
"{Binding ElementName=lbEditingMode, Path=SelectedItem}"
>
</InkCanvas>
<!--Bind the Strokes, DefaultDrawingAtributes, and, EditingMode properties of
the second InkCavas the first InkCanvas.-->
<InkCanvas Background="LightBlue"
Canvas.Top="0" Canvas.Left="200"
Height="400" Width="200"
Strokes="{Binding ElementName=ic, Path=Strokes}"
DefaultDrawingAttributes="{Binding
ElementName=ic, Path=DefaultDrawingAttributes}"
EditingMode="{Binding ElementName=ic, Path=EditingMode}">
<InkCanvas.LayoutTransform>
<ScaleTransform ScaleX="-1" ScaleY="1" />
</InkCanvas.LayoutTransform>
</InkCanvas>
<!--Use the array, MyEditingModes, to populate a ListBox-->
<ListBox Name="lbEditingMode"
Canvas.Top="0" Canvas.Left="450"
Height="100" Width="100"
ItemsSource="{StaticResource MyEditingModes}" />
<!--Use the array, MyDrawingAttributes, to populate a ListBox-->
<ListBox Name="lbDrawingAttributes"
Canvas.Top="150" Canvas.Left="450"
Height="100" Width="100"
ItemsSource="{StaticResource MyDrawingAttributes}" />
</Canvas>