In the previous section, we created a tablet example in a simple way. Next, let's create a more complex tablet program. The sample program has two options: Select "writing" to enter it manually, and select "erase" to remove unnecessary parts, similar to the eraser function.
You can also select the stroke color.
The first step is to put an InkCanvas control. I believe it is okay. It is very simple.
[Html]
<Grid>
<Grid. RowDefinitions>
<RowDefinition Height = "*"/>
<RowDefinition Height = "auto"/>
</Grid. RowDefinitions>
<InkCanvas x: Name = "myInc" Grid. Row = "0" Margin = "2"/>
.........
/Grid>
Define two classes to save the custom class and set of pen tip colors respectively.
[Csharp]
Public class MyColor
{
Public string ColorName {get; set ;}
Public SolidColorBrush UserColor {get; set ;}
}
Public class MyColors: ObservableCollection <MyColor>
{
Public MyColors ()
{
Add (new MyColor {ColorName = "Red", UserColor = new SolidColorBrush (Colors. Red )});
Add (new MyColor {ColorName = "Yellow", UserColor = new SolidColorBrush (Colors. Yellow )});
Add (new MyColor {ColorName = "Blue", UserColor = new SolidColorBrush (Colors. Blue )});
}
}
Switch to the XAML view and embed MyColors as a static resource into the resource list of the form.
Define a data template for items displayed in ListBox.
[Html]
<Window. Resources>
<M: MyColors x: Key = "bindColors"/>
<DataTemplate x: Key = "itemTmp" DataType = "{x: Type m: MyColor}">
<StackPanel Orientation = "Horizontal">
<Rectangle Height = "10" Width = "20" Fill = "{Binding UserColor}"/>
<TextBlock Text = "{Binding ColorName}"/>
</StackPanel>
</DataTemplate>
</Window. Resources>
Declare two RadioButton elements to select the handwritten input state. And a ListBox control. The data source is the MyColors class we just defined.
[Html]
<StackPanel Grid. Row = "1" Margin = "1" Orientation = "Horizontal">
<RadioButton x: Name = "rdWrite" IsChecked = "True" verticalignment = "Center"
Content = "writing" Checked = "rdWrite_Checked" Margin = "3, 0"/>
<RadioButton x: Name = "rdEra" VerticalAlignment = "Center" IsChecked = "{x: Null}" Content = "Erased" Checked = "rdEra_Checked" Margin = "8, 0"/>
<ListBox x: Name = "myListBox" Margin = "12,0" ItemTemplate = "{StaticResource itemTmp}" ItemsSource = "{StaticResource bindColors }"
SelectionChanged = "myListBox_SelectionChanged">
<ListBox. ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation = "Horizontal"/>
</ItemsPanelTemplate>
</ListBox. ItemsPanel>
</ListBox>
</StackPanel>
To horizontally arrange items in The ListBox, We need to customize the panel of the item.
[Html]
<ItemsPanelTemplate>
<StackPanel Orientation = "Horizontal"/>
</ItemsPanelTemplate>
Write an event handler for two single-choice buttons.
[Csharp]
Private void rdWrite_Checked (object sender, RoutedEventArgs e)
{
This. myInc. EditingMode = InkCanvasEditingMode. InkAndGesture;
}
Private void rdEra_Checked (object sender, RoutedEventArgs e)
{
This. myInc. EraserShape = new EllipseStylusShape (6, 6 );
This. myInc. EditingMode = InkCanvasEditingMode. EraseByPoint;
}
You can modify the EditingMode attribute of InkCanvas to control its editing status, such as receiving or erasing ink marks.
Finally, write the ListBox event handler to dynamically modify the color of the stroke.
[Csharp]
Private void myListBox_SelectionChanged (object sender, SelectionChangedEventArgs e)
{
If (e. AddedItems. Count = 0)
{
Return;
}
MyColor mc = e. AddedItems [0] as MyColor;
If (mc! = Null)
{
MyInc. DefaultDrawingAttributes. Color = mc. UserColor. Color;
}
}
From the column tcjiaan