WPF布局控件之Canvas&InkCanvas

Canvas

Canvas，英文释义为画布，和Grid不一样的是，它没有固定形式的布局。所有控件如果不用Canvas.Left等属性控制时，默认在左上角。如下：

<Window x:Class="LearnLayout.CanvasWin"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LearnLayout"
        mc:Ignorable="d"
        Title="CanvasWin" Height="450" Width="800">
    <Canvas Background="LightBlue">
		<Button Content="牛马人的一生" Background="lavender" Height="200"/>
		<Button Content="我不是牛马" Background="Pink" Height="50"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
	</Canvas>
</Window>

如果想要某些控件布局在相对于Canvas的某个位置，如上述所说，可以使用Canvas.Left等属性来控制，如下：

<Window x:Class="LearnLayout.CanvasWin"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LearnLayout"
        mc:Ignorable="d"
        Title="CanvasWin" Height="450" Width="800">
    <Canvas Background="LightBlue">
		<Button Content="牛马人的一生" Background="lavender" Height="200" Canvas.Left="100" Canvas.Top="100"/>
		<Button Content="我不是牛马" Background="Pink" Height="50" Canvas.Right="100" Canvas.Bottom="100"/>
		<Button Content="下辈子还当牛马" Background="Snow" Canvas.Right="10" Canvas.Bottom="10" Canvas.Left="200" Canvas.Top="50"/>
	</Canvas>
</Window>

Content="下辈子还当牛马"的Button设置了四个Canvas的属性，并且Canvas.Right="10"和Canvas.Bottom="10"在前面，但是仍然以Canvas.Left="200"和Canvas.Right="50"为准来布局该控件，因此，可以知道Canvas.Left和Canvas.Top的优先级高于Canvas.Right和Canvas.Bottom。

Canvas的用处还是蛮多的，我工作的项目中也用到了Canvas来布局，可以灵活的衔接控件，从而达到目的。

InkCanvas

InkCanvas，英文释义为墨水画布，它的基本属性和Canvas的属性差不多，不同之处是可以作为画板，可以通过InkCanvas的EditingMode属性来学习，可以拷贝下面源码生成WPF应用进行进一步了解，如下：

xaml：

<Window x:Class="LearnLayout.InkCanvasWin"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LearnLayout"
        mc:Ignorable="d"
        Title="InkCanvasWin" Height="450" Width="800">
	<DockPanel>
		<Grid DockPanel.Dock="Top">
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition/>
				<ColumnDefinition/>
				<ColumnDefinition/>
				<ColumnDefinition/>
				<ColumnDefinition/>
			</Grid.ColumnDefinitions>
			<Button Content="初始化" Grid.Column="0" x:Name="None" Click="None_Click" />
			<Button Content="画笔" Grid.Column="1" x:Name="Ink" Click="Ink_Click" />
			<Button Content="响应墨迹" Grid.Column="2" x:Name="GestureOnly" Height="19" Click="GestureOnly_Click" />
			<Button Content="选择" Grid.Column="3" x:Name="Select" Click="Select_Click" />
			<Button Content="橡皮" Grid.Column="4" x:Name="EraseByPoint" Click="EraseByPoint_Click" />
			<Button Content="清除线段" Grid.Column="5" x:Name="EraseByStroke" Click="EraseByStroke_Click" />
		</Grid>
		<InkCanvas EditingMode="None" x:Name="IC1" Background="LightBlue">
		</InkCanvas>
	</DockPanel>
</Window>

C#：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace LearnLayout
{
    /// 

    /// InkCanvasWin.xaml 的交互逻辑
    /// 
    public partial class InkCanvasWin : Window
    {
        public InkCanvasWin()
        {
            InitializeComponent();
        }

		private void None_Click(object sender, RoutedEventArgs e)
		{
			IC1.EditingMode = InkCanvasEditingMode.None;
		}

		private void Ink_Click(object sender, RoutedEventArgs e)
		{
			IC1.EditingMode = InkCanvasEditingMode.Ink;
		}

		private void GestureOnly_Click(object sender, RoutedEventArgs e)
		{
			IC1.EditingMode = InkCanvasEditingMode.GestureOnly;
		}

		private void Select_Click(object sender, RoutedEventArgs e)
		{
			IC1.EditingMode = InkCanvasEditingMode.Select;
		}

		private void EraseByPoint_Click(object sender, RoutedEventArgs e)
		{
			IC1.EditingMode = InkCanvasEditingMode.EraseByPoint;
		}

		private void EraseByStroke_Click(object sender, RoutedEventArgs e)
		{
			IC1.EditingMode = InkCanvasEditingMode.EraseByStroke;
		}
	}
}