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
{
/// <summary>
/// InkCanvasWin.xaml 的交互逻辑
/// </summary>
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;
}
}
}