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>

效果图

相关推荐
百锦再18 小时前
WPF依赖属性深度解析:从原理到高级应用
wpf·依赖·绑定·验证·net·强制
✎ ﹏梦醒͜ღ҉繁华落℘19 小时前
WPF高级学习(一)
学习·wpf
界面开发小八哥20 小时前
界面控件DevExpress WPF v25.1新版亮点:模板库更新升级
ui·.net·wpf·界面控件·devexpress·ui开发
△曉風殘月〆1 天前
WPF MVVM进阶系列教程(二、数据验证)
wpf·mvvm
JosieBook1 天前
【开源】WpfMap:一个基于WPF(Windows Presentation Foundation)技术构建的数据可视化大屏展示页面
信息可视化·wpf
bianguanyue1 天前
WPF——自定义ListBox
c#·wpf
大曰编程2 天前
行为型模式-协作与交互机制
wpf·交互
上元星如雨4 天前
WPF 项目设置应用程序图标和设置程序集图标
wpf
时光追逐者4 天前
一款基于 WPF 开源、功能全面的串口调试工具
c#·.net·wpf
上元星如雨5 天前
在 WPF 启动界面中心加载 GIF 动图
wpf