继续聊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;
            }
        }