• Win10系列:UWP界面布局进阶7


    Canvas

    Canvas元素用于定义一个区域,可以向这个区域中添加不同的XAML界面元素。Canvas会对其内部的元素采用绝对布局方式进行布局,下面通过三个示例来介绍Canvas的使用方法。

    (1)Canvas相对定位与嵌套

    在定义Canvas子元素的位置时,需要设置这个元素的Canvas.Left或Canvas.Top属性,其中Canvas.Left属性表示该元素与Canvas左侧边框之间的距离,而Canvas.Top属性表示与Canvas顶部边框之间的距离。同时Canvas是可以互相嵌套的,在一个Canvas中可以放置另一个Canvas,内层Canvas同样可以使用上面介绍的两个属性来设置其相对于外层Canvas的位置。

    在一个打开的Windows应用商店项目中新建一个空白页,并命名为CanvasPage,打开CanvasPage.xaml文件,在默认的Grid元素中添加Canvas元素,并定义Canvas元素的宽度和高度均为280像素。再在Canvas元素中添加一个内层Canvas元素,设置其Width、Height属性的值都为240,接着向内层Canvas中添加一个矩形,并设置其填充色为黄色,高度和宽度分别为125像素和160像素。最后分别设置内层Canvas和矩形的Canvas.Left及Canvas.Top属性值均为40,代码如下所示:

    <Canvas Width="280" Height="280" >

    <Canvas Width="240" Height="240" Canvas.Left="40" Canvas.Top="40">

    <Rectangle Canvas.Left="40" Canvas.Top="40" Fill="Yellow" Width="160" Height="125"/>

    </Canvas>

    </Canvas>

    在设计器中将鼠标移至矩形四周区域时会显示出矩形所在的内层Canvas以及外层Canvas的边框,矩形与内外层Canvas的相对位置如图5-15所示。

    图5-15 Canvas相对定位与嵌套

    (2)Canvas的Z轴顺序

    有时Canvas中的多个元素之间会相互重叠,为了使元素按照预想的方式显示,可以通过元素的Canvas.ZIndex属性来设置元素间的层次关系,Canvas.ZIndex属性值越大表示元素将会在越靠前的位置显示,也就是说ZIndex属性值大的元素将覆盖在ZIndex属性值小的元素之上。

    在CanvasPage页面的CanvasPage.xaml文件中继续添加一个Canvas元素,并在Canvas元素中添加两个椭圆,分别设置两个椭圆的Canvas.ZIndex属性值为2和3,并定义椭圆的大小、颜色及椭圆与Canvas元素边框间的距离,代码如下所示:

    <Canvas Margin="213,279,851,191" >

    <Ellipse Canvas.ZIndex="3" Canvas.Left="30" Canvas.Top="30" Height="150" Width="150" Fill="Yellow"/>

    <Ellipse Canvas.ZIndex="2" Canvas.Left="80" Canvas.Top="80" Height="200" Width="200" Fill="Red "/>

    </Canvas>

    在设计器中可以看到,当元素重叠时Canvas.ZIndex属性值为3的椭圆会覆盖与属性值为2的椭圆的重叠区域,效果如图5-16所示。

    图5-16元素重叠显示效果

    在元素重叠时,如果没有为其设置重叠的元素设置Canvas.ZIndex属性或重叠元素的Canvas.ZIndex属性值相同,会默认按照向Canvas中添加元素的顺序进行排序,即前面所添加的元素的会被显示在后面元素的下面。

    (3)为Canvas设置边框和背景颜色

    可以通过Canvas的Background属性为其设置背景颜色,但Canvas并没有用来设置边框宽度和颜色的属性,将Canvas包含在一个Border元素中能实现这一效果。

    在CanvasPage页面的CanvasPage.xaml文件中继续添加一个Border元素,并分别设置Border元素的BorderThickness属性和BorderBrush属性来定义Border元素边框的宽度和颜色,同时还可以设置CornerRadius属性来定义边框样式为圆角。在Border元素中添加一个Canvas元素,并设置Canvas的Background属性值为Yellow,代码如下所示:

    <Border BorderThickness="30" BorderBrush="Red" CornerRadius="30" Height="221" Width="266">

    <Canvas Background="Yellow"/>

    </Border>

    在设计器中可以看到已经为Canvas设置了背景颜色及边框,显示效果如图5-17所示。

    图5-17 为Canvas设置背景及添加边框

    一个Border元素中只能包含一个子元素,如果需要同时放置一个以上的XAML元素,可以在Border元素中添加一个Canvas,再将其他需要显示的元素置于Canvas中即可。

  • 相关阅读:
    Python中利用函数装饰器实现备忘功能
    selenium之 定位以及切换frame(iframe)
    selenium之操作ChromeDriver
    设置跑的次数
    l类型转换错误ClassCastException
    代码提交失败
    【cl】Json学习
    mysql下载安装
    mysql登录基本语句
    linux 递归删除目录文件
  • 原文地址:https://www.cnblogs.com/finehappy/p/6645825.html
走看看 - 开发者的网上家园