WPF之InkCanvas🔥

效果展示

使用

本次demo采用MVVM模式，其中View的代码如下：

<UserControl x:Class="InkCanvasDemo.View.InkCnavasView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:InkCanvasDemo.View"
             mc:Ignorable="d" 
             xmlns:hc="https://handyorg.github.io/handycontrol"
             d:DesignHeight="350" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="7*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Background="#FFA500">
            <ComboBox ItemsSource="{Binding EditingModes}" SelectedItem="{Binding EditingMode}" Width="100"  HorizontalAlignment="Left" hc:InfoElement.ContentHeight="20" hc:InfoElement.TitleWidth="60" hc:InfoElement.TitlePlacement="Top"  hc:InfoElement.Placeholder="请输入内容" hc:InfoElement.Title="编辑模式" Style="{StaticResource ComboBoxExtend}" Margin="20"/>
            <Button Content="加载InkCanvas" Command="{Binding InkCanvasCommand}" CommandParameter="LoadInkCanvas"  Style="{StaticResource ButtonPrimary}" Margin="20" HorizontalAlignment="Left"/>
            <Button Content="保存InkCanvas" Command="{Binding InkCanvasCommand}" CommandParameter="SaveInkCanvas"  Style="{StaticResource ButtonPrimary}" Margin="20" HorizontalAlignment="Left"/>
            <Button Content="复制InkCanvas" Command="{Binding InkCanvasCommand}" CommandParameter="CopyInkCanvas"  Style="{StaticResource ButtonPrimary}" Margin="20" HorizontalAlignment="Left"/>
            <Button Content="黏贴InkCanvas" Command="{Binding InkCanvasCommand}" CommandParameter="PasteInkCanvas" Style="{StaticResource ButtonPrimary}" Margin="20" HorizontalAlignment="Left"/>
        </StackPanel >
        <InkCanvas x:Name="inkCanvas" Grid.Column="1" EditingMode="{Binding EditingMode}" Background="#4169E1"/>
    </Grid>
</UserControl>

ViewModel的代码如下：

[ObservableObject]
public partial class InkCanvasViewModel
{
	public System.Windows.Controls.InkCanvas inkCanvas { get; set; }
	public ObservableCollection<InkCanvasEditingMode> EditingModes { get; } = new ObservableCollection<InkCanvasEditingMode>(
Enum.GetValues(typeof(InkCanvasEditingMode)).Cast<InkCanvasEditingMode>());
	[ObservableProperty]
	public InkCanvasEditingMode editingMode;

	[RelayCommand]
	public void InkCanvas(string selection)
	{
		switch (selection)
		{
			case "LoadInkCanvas":
				LoadInkCanvas();
				break;
			case "SaveInkCanvas":
				SaveInkCanvas();
				break;
			case "CopyInkCanvas":
				CopyInkCanvas();
				break;
			case "PasteInkCanvas":
				PasteInkCanvas();
				break;
		}
	}

	public void LoadInkCanvas()
	{
		FileStream fileStream = new FileStream("inkCanvas.isf", FileMode.Open, FileAccess.Read);
		inkCanvas.Strokes = new StrokeCollection(fileStream);
		fileStream.Close();
	}

	public void SaveInkCanvas()
	{
		FileStream fileStream = new FileStream("inkCanvas.isf", FileMode.Create, FileAccess.ReadWrite);
		inkCanvas.Strokes.Save(fileStream);
		fileStream.Close();
	}

	public void CopyInkCanvas()
	{
		inkCanvas.CopySelection();
	}

	public void PasteInkCanvas()
	{
		inkCanvas.Paste();
	}
}