继续聊WPF——数字墨迹B

junwong 发布于 2012/04/18 14:50
阅读 175
收藏 0
 
前面的内容,我们用简单的方法就创建了一个手写板示例,下面,我们再来做一个更为复杂一点的手写板程序。示例程序有两个选项:选择“书写”可以进行手写输入,选择“擦除”,可以去掉不必要的部分,类似橡皮擦的功能。
并且,还可以选择笔触颜色。
 
 
首先就是放一个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;
            }
        } 


原文链接:http://blog.csdn.net/tcjiaan/article/details/7104206
加载中
返回顶部
顶部