(文章目录)
前言
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。
原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。
自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
一、Canvas控件详解
Canvas控件是WPF中最基本的布局控件之一，它允许您在其中添加其他控件或UI元素，并使用坐标(x,y)指定它们的位置。Canvas控件没有自动布局功能，因此需要手动指定子控件的位置和大小。
以下是一些Canvas控件的常见属性：
- Width和Height：指定Canvas控件的宽度和高度。
- Background：指定Canvas控件的背景颜色或背景图像。
- Children：Canvas控件的子控件集合，包含在其中的子控件将显示在Canvas控件中。
下面是一个简单的Canvas控件示例，其中包含一个Button和一个TextBlock，并使用Canvas.Left和Canvas.Top属性指定它们的位置：
<Canvas Width="200" Height="200">
<Button Content="Click me!" Canvas.Left="50" Canvas.Top="50" />
<TextBlock Text="Hello, World!" Canvas.Left="100" Canvas.Top="100" />
</Canvas>
需要注意的是，Canvas控件的子控件的Canvas.Left和Canvas.Top属性必须是绝对值，而不是相对值。因此，如果您需要调整子控件的位置，请使用绝对值。
1.属性介绍
WPF中Canvas控件有以下属性：
-
Background：设置Canvas的背景色。
-
ClipToBounds：指示内容是否应该被裁剪以适应容器的大小。
-
IsItemsHost：指示Canvas是否是一个ItemsControl的容器。
-
Left、Top、Right、Bottom：用于确定控件在Canvas容器中的位置。
-
Width、Height：用于确定控件的宽度和高度。
-
RenderTransform：用于对控件进行变换操作，比如移动、旋转、缩放等。
-
Children：用于在Canvas容器中添加子控件。可以使用Canvas.Left和Canvas.Top属性来确定控件在容器中的位置。
-
AllowDrop：指示Canvas是否支持拖放操作。
-
ZIndex：用于确定控件的层次顺序，即控件的前后顺序。具有较大ZIndex值的控件将出现在具有较小ZIndex值的控件的前面。
2.常用场景
WPF中Canvas控件常用于以下场景：
- 图形绘制：Canvas提供了一个坐标系，可以使用线、矩形、圆形、多边形等基本形状绘制各种图形；
- 动画效果：Canvas可以与WPF的动画功能（如Storyboard和DoubleAnimation）结合使用，实现各种复杂的动画效果；
- 游戏开发：游戏通常需要绘制许多复杂的图形，并需要实现各种复杂的交互和动画效果，Canvas可以满足这些需求；
- 用户界面设计：Canvas可以用于实现自定义的用户界面控件，如自定义按钮、图标等；
- 数据可视化：Canvas可以用于绘制各种图表，如折线图、柱状图等，用于展示数据。
3.具体案例
<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>
