Wpf布局之Canvas面板！

weixin_447103582025-07-04 21:34

文章目录

前言
一、引言
二、使用步骤

前言

Wpf布局之Canvas面板！

一、引言

Canvas面板允许使用精确的坐标来布置元素！

二、使用步骤

使用Canvas面板需要设置Canvas.Left和Canvas.Top附加属性，其中Canvas.Left属性是距离面板Canvas左边的单位数，Canvas.Top属性是距离面板Canvas顶部的单位数。另外也可以使用Canvas.Right属性来确定元素与Canvas面板的右边的距离，也可以使用Canvas.Bottom来确定元素与Canvas面板的底部的距离。但是不能同时使用Canvas.Left属性和Canvas.Right属性，也不能同时使用Canvas.Top属性和Canvas.Bottom属性。

可以使用Width和Height属性来确定元素的尺寸。如果没有设置这两个属性，则元素大小是根据内容大小来确定。

c 复制代码

<Grid>
    <Canvas>
        <Button Canvas.Left="10" Canvas.Top="20" Content="(10,20)"/>
        <Button Canvas.Left="50" Canvas.Bottom="50" Content="(50,50)"/>
        <Button Canvas.Left="60" Canvas.Top="80" Width="50" Height="50" Content="(60,80)"/>
        <Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50" Content="(70,120)"/>
    </Canvas>
</Grid>

效果图

如果Canva面板有多个元素重叠，则可以使用Z顺序，来控制它的重叠方式。可以通过设置Canvas.ZIndex附加属性的值来提高层次级别。通常元素具有相同的Canvas.ZIndex值-0，Canvas.ZIndex的值越大，层级就越高。设置Panel.ZIndex值也有相同的效果。

c 复制代码

<Grid>
    <Canvas>
        <Button Canvas.Left="10" Canvas.Top="20" Content="(10,20)"/>
        <Button Canvas.Left="50" Canvas.Bottom="50" Content="(50,50)"/>
        <Button Canvas.Left="60" Canvas.ZIndex="1"  Canvas.Top="80" Width="50" Height="50" Content="(60,80)"/>
        <Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50" Content="(70,120)"/>
    </Canvas>
</Grid>

效果图