【愚公系列】2023年10月 WPF控件专题 Canvas控件详解

🏆 作者简介，愚公搬代码 🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，腾讯云优秀博主，掘金优秀博主，51CTO博客专家等。 🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。

🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。

🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

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控件有以下属性：

1. Background：设置Canvas的背景色。
2. ClipToBounds：指示内容是否应该被裁剪以适应容器的大小。
3. IsItemsHost：指示Canvas是否是一个ItemsControl的容器。
4. Left、Top、Right、Bottom：用于确定控件在Canvas容器中的位置。
5. Width、Height：用于确定控件的宽度和高度。
6. RenderTransform：用于对控件进行变换操作，比如移动、旋转、缩放等。
7. Children：用于在Canvas容器中添加子控件。可以使用Canvas.Left和Canvas.Top属性来确定控件在容器中的位置。
8. AllowDrop：指示Canvas是否支持拖放操作。
9. ZIndex：用于确定控件的层次顺序，即控件的前后顺序。具有较大ZIndex值的控件将出现在具有较小ZIndex值的控件的前面。

🔎2.常用场景

WPF中Canvas控件常用于以下场景：

1. 图形绘制：Canvas提供了一个坐标系，可以使用线、矩形、圆形、多边形等基本形状绘制各种图形；
2. 动画效果：Canvas可以与WPF的动画功能（如Storyboard和DoubleAnimation）结合使用，实现各种复杂的动画效果；
3. 游戏开发：游戏通常需要绘制许多复杂的图形，并需要实现各种复杂的交互和动画效果，Canvas可以满足这些需求；
4. 用户界面设计：Canvas可以用于实现自定义的用户界面控件，如自定义按钮、图标等；
5. 数据可视化：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>

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表