07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件 - 其它

TOP

07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件(四)

2017-10-11 16:06:21 【大中小】浏览:10541次

Tags：07. 移动先行沉浮 ---- 控件轮流轰炸布局

tion）方向排布；

　　如果子内容超出面板，则会超出面板边界，但视觉上会被截断。

　　案例

（我们平时对齐方式是 HorizontalAlignment和VerticalAlignment，Orientation是StackPanel等的排布方式，不要搞混淆）

3.布局控件 - Canvas（画布）

　　Canvas 中的每一个元素就相当于在 HTML 中设置了 “position:absolute”；

　　可以通过 Canvas.Left、Canvas.Top 设置定位位置；

　　可以使用 Canvas.ZIndex 附加属性明确指定分层

　　案例：（图形化设置背景用 fill 来填充）

　　效果：

 <!--
    可以把他理解为绝对定位
    Top 距离顶端
    Left 距离左边
    ZIndex Z坐标轴
    -->
    <Canvas>
        <Button Background="Beige" Width="100" Height="100"></Button>
        <Button Background="Blue" Canvas.Left="50" Canvas.Top="50" Width="100" Height="100"></Button>
        <Button Background="Chartreuse" Canvas.ZIndex="1" Canvas.Left="100"  Canvas.Top="100" Width="100" Height="100"></Button>
        <Button Background="Red" Canvas.Left="150"  Canvas.Top="150" Width="100" Height="100"></Button>

        <!--图形系列（Canvas里面用的比较多）：背景用Fill来填充-->

        <!--正方形-->
        <Rectangle Width="300" Height="300" Fill="Yellow" Opacity="0.7" Canvas.ZIndex="-1"></Rectangle>

        <!--矩形-->
        <Rectangle Width="300" Height="200" Fill="Yellow" Opacity="0.7" Canvas.Top="50" Canvas.ZIndex="-1"></Rectangle>

        <!--圆形-->
        <Ellipse Width="100" Height="100" Fill="Pink" Opacity="0.9" Canvas.ZIndex="9" Canvas.Left="120" Canvas.Top="120"></Ellipse>

        <!--椭圆-->
        <Ellipse Width="100" Height="50" Fill="Black" Opacity="0.1" Canvas.ZIndex="9" Canvas.Left="120" Canvas.Top="150"></Ellipse>
    </Canvas>

View Code

4.布局控件 - VariableSizedWrapGrid

　　元素以行或列排列，当达到 MaximumRowsOrColumns 值会时会自动换行至新行或新列。

　　由 Orientation 属性指定是按行还是列排列元素。

　　通过使用附加属性 VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan，内容可跨越多行和多列。

　　根据 ItemHeight 和 ItemWidth 属性的指定设置元素大小。

　　不需要定义行和列的 Grid

　　 案例：（磁贴和非正常布局使用，一般不怎么用）

　　效果：

<Page
    x:Class="_05.AllControls._1.Layout._VariableSizedWrapGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_05.AllControls._1.Layout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3">
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Recta

首页上一页 1 2 3 4 5 下一页尾页 4/5/5
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：Win10 FaceAPI小demo开发问题汇总	下一篇：揭秘Windows10 UWP中的httpclient..