2021-08-17 WPF控件专题 Canvas 控件详解

Posted 2021-09-06 微软MVP Eleven

1.Canvas 控件介绍

画布面板（坐标面板）：定义区域，子元素的显示位置，指定相对于面板 的坐标，来定位子元素显示的位置。

附加属性：Canvas.Left Canvas.Right Canvas.Top Canvas.Bottom
坐标（left,top） (left,bottom） (right,top） (right,bottom）

不能为子元素指定两个以上的附加属性，如果指定了，忽略后者。
当窗口大小变化，Canvas的尺寸就随之变动，子元素的位置也变化，坐标相对于Canvas没有变
支持负坐标，
ClipToBounds false 默认值 如果有溢出，就显示外边
true 裁剪

应用：精确定位，图画，最简单的布局

2.具体案例

<Grid>
        <Canvas ClipToBounds="true">
                <!--RIght  Bottom设置的值忽略了-->
                <Button Content="first" Width="30" Height=" 20" Canvas.Left="20" Canvas.Top="30" Canvas.Right="50" Canvas.Bottom="50"/>
                <Button Content="second" Width="50" Height=" 20" Canvas.Left="20" Canvas.Bottom="30"/>
                <Button Content="third" Width="30" Height=" 20" Canvas.Right="20" Canvas.Top="30"/>
                <Button Content="four" Width="50" Height=" 20" Canvas.Right="20" Canvas.Bottom="30"/>
                <Button Content="center" Width="50" Height=" 20" Canvas.Left ="100" Canvas.Bottom="150"/>
                <Button Content="center2" Width="50" Height=" 20" Canvas.Left ="100" Canvas.Bottom="-10"/>
                <!--重叠效果  优先显示：后添加的元素显示在上面—如果要改变默认优先级：Panel.ZIndex 默认值 0改变优先显示顺序  Panel.ZIndex值越大，就显示在最上边  Panel.ZIndex相同，后添加显示在上边-->
                <Button Content="按钮1" Width="50" Height=" 20" Canvas.Left ="50" Canvas.Top="100" Panel.ZIndex="2"/>
                <Button Content="按钮2" Width="50" Height=" 20" Canvas.Left ="52" Canvas.Top="110" />
                <Button Content="按钮3" Width="50" Height=" 20" Canvas.Left ="58" Canvas.Top="115" />
        </Canvas>
</Grid>