WPF 布局Canvas使用案例

1.Canvas

　Canvas

　　画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图画。使用Canvas时，必须指定一个字元素的位置（相对于画布），否则所有元素都将出现在画布的左上角。

调整位置用Left、Right、Top和Bottom四个附加属性。

调整z轴顺序使用Panel.ZIndex，数字大的层级高。

如果Canvas是窗口主元素，用户改变窗口大小时，Canvas也会随之变化，字元素的位置也会随之移动，以保证相对于Canvas的位置属性不变。

　　Canvas允许子元素的部分或全部超过其边界，默认不会剪裁子元素，同时可以使用负坐标，因此画布不需要指定大小。如果想复制画布内容，将ClipToBounds设为true即可。

 

 

2.使用案例

<Window x:Class="WpfAppNet8.Panel.Canvas1"
        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:WpfAppNet8.Panel"
        mc:Ignorable="d"
        Title="Canvas1" Height="450" Width="800">
    <Canvas>
        <Button Canvas.Left="100" Canvas.Top="100" Width="100" Height="50" Panel.ZIndex="1">测试001</Button>
        <Button Canvas.Left="120" Canvas.Top="120" Width="100" Height="50" Background="Red">测试002</Button>
        <Button Canvas.Left="140" Canvas.Top="140" Width="100" Height="50" Background="Blue">测试003</Button>
    </Canvas>
</Window>

 

更多：

WPF 布局StackPanel使用案例

WPF 布局UniformGrid使用案例

WPF 布局WrapPanel使用案例