WPF 控件专题 Canvas 控件详解

最新推荐文章于 2024-03-26 01:00:00 发布

^@^lemon tea^@^

最新推荐文章于 2024-03-26 01:00:00 发布

阅读量1.9k

点赞数 1

分类专栏： # WPF 控件专题文章标签： WPF Canvas控件详解 Canvas 控件详解

本文链接：https://blog.csdn.net/BYH371256/article/details/125276658

版权

WPF 控件专题专栏收录该内容

53 篇文章 89 订阅

订阅专栏

1、Canvas 介绍

定义一个区域，可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。

Canvas面板用于使用相对于画布区域的坐标来定位子元素，是唯一没有固有布局特征的面板元素。

**************************************************************************************************************

2、Canvas 常用属性

   Background：背景；

   Width/Height：宽度/高度；

   Opacity：透明度

   Margin：获取或设置元素的外边距；

   Name：元素的标识名称；

RenderTransform：获取或设置影响此元素的呈现位置的转换信息。

RenderTransformOrigin：获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界。

附加属性：Left、Right、Top和Bottom这四个属性决定子元素在Canvas里面的位置
Bottom：获取或设置该元素底部与其父 Canvas 底部之间的距离。

Left：获取或设置该元素左侧与其父 Canvas 左侧之间的距离。

Right：获取或设置该元素右侧与其父 Canvas 右侧之间的距离。

Top：获取或设置该元素顶部与其父 Canvas 顶部之间的距离。

**************************************************************************************************************

3、具体示例：使用Left、Right、Top和Bottom四个属性控制子元素的位置代码示例如下

<Canvas  Margin="10">
	<Rectangle Fill="Red" Width="200" Height="200" Canvas.Top="98" Panel.ZIndex="0"/>
	<Rectangle Fill="Green" Width="200" Height="200" Canvas.Top="10" Canvas.Left="165"  Panel.ZIndex="0"/>
	<Rectangle Fill="DarkBlue" Width="200" Height="200" Canvas.Top="113" Canvas.Left="306" Panel.ZIndex="0"/>
</Canvas>

<!--设置ZIndex顺序 默认为0，同级时，后面定义的优先级更高，优先级高的会覆盖优先级低-->
<Canvas  Margin="10">
	<Rectangle Fill="Red" Width="200" Height="200" Canvas.Top="98" Panel.ZIndex="9"/>
	<Rectangle Fill="Green" Width="200" Height="200" Canvas.Top="10" Canvas.Left="165"  Panel.ZIndex="8"/>
	<Rectangle Fill="DarkBlue" Width="200" Height="200" Canvas.Top="113" Canvas.Left="306" Panel.ZIndex="8"/>
</Canvas>

**************************************************************************************************************

4、效果图，左侧是同级ZIndex的效果图；右侧是设置ZIndex的效果图