WPF 入门教程Canvas介绍

最新推荐文章于 2024-09-04 23:05:31 发布

有技巧搬砖

最新推荐文章于 2024-09-04 23:05:31 发布

阅读量643

点赞数 1

分类专栏： UI设计 c# WPF MVVM 文章标签： wpf microsoft

本文链接：https://blog.csdn.net/liaohaiyin/article/details/121019964

版权

UI设计同时被 3 个专栏收录

92 篇文章 9 订阅

订阅专栏

c# WPF

92 篇文章 24 订阅

订阅专栏

MVVM

92 篇文章 18 订阅

订阅专栏

Canvas 可能是其中最简单的 Panel。默认情况下它并没有真正做任何事情，它只是允许您将控件放入其中，然后使用显式坐标自己定位它们。

如果您曾经使用过像 WinForms 这样的其他 UI 库，这可能会让您感到宾至如归，但是虽然拥有对所有子控件的绝对控制权很诱人，但这也意味着面板不会为您做任何事情一旦用户开始调整您的窗口大小，如果您本地化绝对定位的文本或者内容是否被缩放。

稍后会详细介绍，让我们看一个简单的例子。这主要是为了向您展示默认情况下 Canvas 的作用有多大：

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

如您所见，尽管我们有两个按钮，但它们都放置在完全相同的位置，因此只有最后一个可见。在您开始为子控件提供坐标之前，画布绝对不会做任何事情。这是使用 Canvas 控件中的 Left、Right、Top 和 Bottom 附加属性完成的。

这些属性允许您指定相对于画布四个边缘的位置。默认情况下，它们都设置为 NaN（非数字），这将使 Canvas 将它们放置在左上角，但如前所述，您可以轻松更改此设置：

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button Canvas.Left="10">Top left</Button>
		<Button Canvas.Right="10">Top right</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
	</Canvas>
</Window>

请注意我如何只设置我需要的一个或多个属性。对于前两个按钮，我只想为 X 轴指定一个值，因此我使用 Left 和 Right 属性将按钮从每个方向推向中心。

对于底部按钮，我同时使用 Left/Right 和 Bottom 将它们向两个方向的中心推动。您通常会指定顶部或底部值和/或左侧或右侧值。

如前所述，由于 Canvas 使您可以完全控制位置，因此它不会真正关心是否有足够的空间容纳您的所有控件，或者一个控件是否位于另一个控件的顶部。这使得它对于几乎任何类型的对话框设计来说都是一个糟糕的选择，但顾名思义，Canvas 至少适合做一件事：绘画。WPF 有一堆控件，您可以将它们放置在 Canvas 中，以制作精美的插图。

Z-Index

在下一个示例中，我们将使用 WPF 的几个与形状相关的控件来说明使用 Canvas 时的另一个非常重要的概念：Z-Index。通常，如果 Canvas 中的两个控件重叠，则标记中最后定义的控件将优先并与其他控件重叠。但是，通过在 Panel 类上使用附加的 ZIndex 属性，可以轻松更改此设置。

首先，我们根本不使用 z-index 的示例：

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

请注意，因为每个矩形都是在圆之后定义的，所以它们都与圆重叠，并且每个矩形都会与之前定义的重叠。让我们尝试改变它：

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>