继续聊WPF——数字墨迹B

 

前面的内容，我们用简单的方法就创建了一个手写板示例，下面，我们再来做一个更为复杂一点的手写板程序。示例程序有两个选项：选择“书写”可以进行手写输入，选择“擦除”，可以去掉不必要的部分，类似橡皮擦的功能。

并且，还可以选择笔触颜色。

 

 

首先就是放一个InkCanvas控件，相信都没问题，很简单。

 

<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <InkCanvas x:Name="myInc" Grid.Row="0" Margin="2" /> ......... </Grid>
接着定义两个类，分别用来保存笔尖颜色的自定义类和集合。

 

public class MyColor { public string ColorName { get; set; } public SolidColorBrush UserColor { get; set; } } public class MyColors : ObservableCollection<MyColor> { public MyColors() { Add(new MyColor { ColorName = "红", UserColor = new SolidColorBrush(Colors.Red) }); Add(new MyColor { ColorName = "黄", UserColor = new SolidColorBrush(Colors.Yellow) }); Add(new MyColor { ColorName = "蓝", UserColor = new SolidColorBrush(Colors.Blue) }); } }

切换到XAML视图，把MyColors作为静态资源嵌入到窗体的资源列表中。

并定义一个数据模板，用于在ListBox中显示的项。

 

<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>

声明两个RadioButton元素，用于选择手写输入状态。以及一个ListBox控件，数据源就是我们刚才定义的MyColors类。

 

<StackPanel Grid.Row="1" Margin="1" Orientation="Horizontal"> <RadioButton x:Name="rdWrite" IsChecked="True" VerticalAlignment="Center" Content="书写" Checked="rdWrite_Checked" Margin="3,0"/> <RadioButton x:Name="rdEra" VerticalAlignment="Center" IsChecked="{x:Null}" Content="擦除" 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>

为了能让ListBox中的项水平排列，我们要自定义项的面板。

 

<ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate>
为两个单选按钮编写事件处理程序。

 

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; }

 

修改InkCanvas的EditingMode属性，可以控制其编辑状态，如接收墨迹，或擦除墨迹。

 

最后，编写ListBox的事件处理程序，以动态修改笔触的颜色。

 

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; } }