无纸化会议-数字键盘+笔记(画板)+视频播放器

这一周，我主要完成了数字键盘(用于退出时输入密码)，笔记（和画板类似，区别是笔记不用共享，而画板需要共享），以及视频播放器，有的功能还不够完善，以后会继续完善。

---

一、数字键盘

上周的时候本来想使用windows平板自带的触摸键盘，然后将某些组合键去掉(为了防止用户违规退出程序)，开始的时候我使用了hook的方法来禁用组合键，但windows平板自带的触摸键盘上有一个按钮可以打开设置，进而通过设置退出程序或进行其他不允许的操作，而且这个按钮是没法禁用的。所以windows自带的触摸键盘是不能用了。因为整个程序中只有输入密码退出程序的时候会用到键盘，其他地方都不会用到键盘，所以我们只需要自己写一个数字键盘即可，键盘上只有0-9十个数字加上删除按钮加上确定按钮。初始状态如下图所示：

点击输入框之后弹出数字键盘：

点击数字可输入数字：

最后，点击数字键盘上的确定可以收起键盘。

部分代码如下图所示：

private void Button_Click(object sender, RoutedEventArgs e) {
            try {
                Button btn = e.OriginalSource as Button;
                if (btn.Name == "delete") {
                    //删除一个数字
                    txtValue.Text = txtValue.Text.Substring(0, txtValue.Text.Length - 1);
                } else if (btn.Name == "sure") {
                    //点击确定隐藏数字键盘
                    number_keyboard.Visibility = Visibility.Hidden;
                } else {
                    //键入数字
                    txtValue.Text += btn.Content;
                }
            } catch {
            }
        }

二、笔记(画板)

笔记和画板的功能类似，都可以绘画，改变颜色，设置宽度，选中，擦除等，不同之处是笔记不需要共享，只是自己看，而画板需要共享，每个人都能看到。笔记的界面如下图所示：

在左边的白板上可以进行书写，并设置有滚动条，可以上下滑动，在右边的选项栏里可以设置模式（选择，绘制，或擦除），选择颜色（红绿蓝黄），之后还可以加上设置线段宽度，绘制特定形状的图形等功能。书写后的效果如下图所示：

笔记的主要部分是一个InkCanvas，再加上功能对应的按钮，前端部分代码如下所示：

<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">
	<InkCanvas x:Name="inkcanvas1" EditingMode="Ink" ClipToBounds="True"></InkCanvas>
</ScrollViewer>

<StackPanel Grid.Column="1" Background="DarkGray">
	<TextBlock HorizontalAlignment="Center" FontSize="30">模式选择：</TextBlock>
	<Button x:Name="btnselection" Margin="5" Click="btnselection_Click" FontSize="30">选中</Button>
	<Button x:Name="btndraw" Margin="5" Click="btndraw_Click" FontSize="30">绘制</Button>
	<Button x:Name="btnerase" Margin="5" Click="btnerase_Click" FontSize="30">擦除</Button>

	<TextBlock HorizontalAlignment="Center" FontSize="30">选择颜色：</TextBlock>
	<StackPanel Orientation="Horizontal" Background="LightGray">
		<Rectangle x:Name="rectred" Fill="Red" Width="50" Height="50" Margin="5" Stroke="Gray" MouseDown="rectred_MouseDown"></Rectangle>
		<Rectangle x:Name="rectgreen" Fill="Green" Width="50" Height="50" Margin="2.5" Stroke="Gray" MouseDown="rectgreen_MouseDown"></Rectangle>
		<Rectangle x:Name="rectblue" Fill="Blue" Width="50" Height="50" Margin="2.5" Stroke="Gray" MouseDown="rectblue_MouseDown"></Rectangle>
		<Rectangle x:Name="rectyellow" Fill="Yellow" Width="50" Height="50" Margin="2.5" Stroke="Gray" MouseDown="rectyellow_MouseDown"></Rectangle>
		<Rectangle x:Name="rectblack" Fill="Black" Width="50" Height="50" Margin="2.5" Stroke="Gray" MouseDown="rectblack_MouseDown"></Rectangle>
	</StackPanel>
</StackPanel>

后端部分代码如下所示(主要是各种功能的实现)：

//擦除功能
private void btnerase_Click(object sender, RoutedEventArgs e){
	inkcanvas1.EditingMode = System.Windows.Controls.InkCanvasEditingMode.EraseByStroke;
}
        
//选中功能
private void rectred_MouseDown(object sender, MouseButtonEventArgs e){
	inkcanvas1.DefaultDrawingAttributes.Color = System.Windows.Media.Colors.Red;
}
        
//绘制功能
private void btndraw_Click(object sender, RoutedEventArgs e){
	inkcanvas1.EditingMode = System.Windows.Controls.InkCanvasEditingMode.Ink;
}

//将画笔颜色改为绿色
private void rectgreen_MouseDown(object sender, MouseButtonEventArgs e){
	inkcanvas1.DefaultDrawingAttributes.Color = System.Windows.Media.Colors.Green;
}

三、视频播放器

当在文件列表中打开视频时，就需要使用视频播放器来播放选中的视频，视频播放器应具有播放，暂停，显示进度条，关闭等功能。文件列表如下图所示:

在文件列表中我放置了一个mp4文件，点击该mp4文件就可以进入视频播放器界面，如下图所示：

我们可以看到，视频播放器上有开始按钮，点击开始按钮开始播放；有暂停按钮，点击暂停按钮暂停播放；有进度条，进度条会随着视频的播放而滑动，我们也可以手动拖动进度条开控制视频的播放位置；在右下角还有音量显示；最后，还有关闭按钮，当我们点击关闭按钮时，视频播放器会关闭并返回文件列表。

视频播放器的主要部分是一个MediaElement，负责视频的播放，再加上各个功能（播放，暂停，拖动进度条），前端部分代码如下所示：

<ToolBar>
	<Button x:Name="Playbutton" Click="Playbutton_Click" Width="30" Height="30">
		<Image Source="../res/drawable/playbutton.png" />
	</Button>

	<Button x:Name="Pausebutton" Click="Pausebutton_Click" Width="30" Height="30">
		<Image Source="../res/drawable/Pausebutton.png" />
	</Button>

	<TextBlock Width="950" Height="30"></TextBlock>
	<Button x:Name="Exitbutton" Width="30" Height="30" Click="Exitbutton_Click">
		<Image Source="../res/drawable/exitbutton.png" />
	</Button>
</ToolBar>

<MediaElement Name="mePlayer" Loaded="mePlayer_Loaded" Grid.Row="1" LoadedBehavior="Manual" Stretch="Uniform" />

<StatusBar Grid.Row="2">
	<TextBlock Name="lblProgressStatus">00:00:00</TextBlock>

	<StatusBarItem Grid.Column="1" HorizontalContentAlignment="Stretch">
		<Slider Name="sliProgress" IsMoveToPointEnabled="True" Thumb.DragStarted="sliProgress_DragStarted" 
		Thumb.DragCompleted="sliProgress_DragCompleted" PreviewMouseDown="sliProgress_PreviewMouseDown" 
		PreviewMouseUp="sliProgress_PreviewMouseUp" ValueChanged="sliProgress_ValueChanged"/>
	</StatusBarItem>
	
	<StatusBarItem Grid.Column="2">
		<TextBlock Name="totalTimeView">00:00:00</TextBlock>
	</StatusBarItem>
</StatusBar>

后端部分代码如下所示(主要是各种功能的实现)：

private void mePlayer_Loaded(object sender, RoutedEventArgs e){
	//开始播放视频
	mePlayer.Source = new Uri(filepath);
	mePlayer.Play();
}

//点击播放按钮
private void Playbutton_Click(object sender, RoutedEventArgs e){
	mePlayer.Play();
	mediaPlayerIsPlaying = true;
}

//点击暂停按钮
private void Pausebutton_Click(object sender, RoutedEventArgs e){
	mePlayer.Pause();
}

//拖动进度条改变播放进度
private void sliProgress_DragCompleted(object sender, DragCompletedEventArgs e){
	userIsDraggingSlider = false;
	mePlayer.Position = TimeSpan.FromSeconds(sliProgress.Value);
}

//点击进度条改变播放进度	
private void sliProgress_PreviewMouseDown(object sender, MouseButtonEventArgs e){
	userIsClickingSlider = true;
}

private void sliProgress_PreviewMouseUp(object sender, MouseButtonEventArgs e){
	userIsClickingSlider = false;
	mePlayer.Position = TimeSpan.FromSeconds(sliProgress.Value);
}

---

总结

这一周的进度我还是比较满意的，完成了三个任务，可能是因为之前学习的时候比较认真，所以真正写起来的时候会感觉比较得心应手，所以写的比较快，这一周写的这几个东西主要的功能已经有了，下周的时候再添加一些其他的功能，然后对界面进行美化一下，让界面变得好看一点，然后再进行下面的任务。下一周其他课程的任务比较多，所以要抓紧时间，争取下周能完成任务。加油！