Wpf布局之Canvas面板!

文章目录


前言

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>

效果图

相关推荐
葬歌倾城6 小时前
waferMap图像渲染
c#·wpf
甄天7 小时前
WPF路由事件:冒泡、隧道与直接全解析
c#·wpf·visual studio
三千道应用题9 小时前
WPF学习笔记(12)下拉框控件ComboBox与数据模板
wpf
界面开发小八哥10 小时前
界面组件DevExpress WPF中文教程:Grid - 如何获取节点?
.net·wpf·界面控件·devexpress·ui开发
三千道应用题10 小时前
WPF学习笔记(22)项面板模板ltemsPanelTemplate与三种模板总结
wpf
佛·追命15 小时前
.net wpf混淆
.net·wpf
厦门德仔15 小时前
【WPF】外部引用样式
wpf·style
weixin_4471035817 小时前
Wpf布局之StackPanel!
wpf
小老鼠爱大米17 小时前
[C#] WPF - 资源URI
c#·wpf·uri