你的位置:首页 > ASP.net教程

[ASP.net教程]XAML学习笔记——Layout(一)


  最近对UWP开发比较感兴趣,大概了解之后觉得有必要回顾一下xaml相关内容。。于是抽时间把以前学WPF的相关材料搜罗了一下顺便和新的xaml特性做了一个小总结。。希望能坚持写下去吧。。O(∩_∩)O~

  个人觉得还是从比较零散的xaml布局开始写比较合适,这部分直接决定了应用程序的实用性,尤其是在出现了各种终端和平台兼容思想的应用更突显出layout的重要性。

  还是喜欢把比较有用的东西写在前面(感觉比较正式),在考虑布局的时候务必要注意一下几点:

  • 最好不要将布局中元素的位置固定,尽量应用类似Alignment这类控制位置的属性结合Margin来调节元素的位置。
  • 不要为元素的宽度(Width)和高度(Height)属性定值,尽量为赋值为Auto。这主要是因为不够灵活,后期修改很麻烦,取而代之可以使用最小高度(MinHeight), 最大高度(MaxHeight), 最小宽度(MinWidth)和 最大宽度(MaxWidth) 四个属性指定控件元素宽度和高度范围,在不同的布局容器中达到灵活控制的效果。
  • 除了绘制指定的矢量图形或者其他特殊需求,否则不要使用canvasPanel布局。
  • 设计布局要尽量从简,比如设计对话框的操作按钮,选择最简单的StackPanel即可。
  • 建议使用GridPanel来设计输入数据的表单。

 

  以上这些为经验浅谈,个别看不懂没关系,把基础的layout知识点学完,进入开发阶段再来看也行。。

  接下来介绍一些和布局相关的属性用于调节控件在布局中的位置

  首先介绍两个重要的属性:水平对齐方式(HorizontalAlignmant)和竖直对齐方式(VerticalAlignment)。简单理解就是指明元素在布局中的对齐方式。其中,水平对齐方式(HorizontalAlignmant)包括左对齐(Left)、右对齐(Right)、水平居中(Center)、水平拉伸(Strech)。竖直对齐方式(VerticalAlignment)包括顶部对齐(Top)、底部对齐(Bottom)、竖直拉伸(Strech)。两个属性可以组合使用,具体的效果如图所示:

  接下来需要了解两个常用的布局属性外边距(Margin)和内边距(Padding)。其中,Margin表示元素外边界的留白,Padding表示元素内边距的留白。一般Margin属性比较常用。以button为例,实际效果如下图所示:

 

  在实际开发中外边距(Margin)应用的更为广泛 ,可变参数及对应外边距如下:

  • Margin="左边距,上边距,右边距,下边距"

  eg:

    <Button Content="Margin" Margin="10,20,30,40" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

  效果图:

  

 

  • Margin="左右边距,上下边距"

  eg:

    <Button Content="Margin" Margin="10,20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

  效果图:

  

  • Margin="四周边距"

  eg:

    <Button Content="Margin" Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

  效果图:

 

  最后简单介绍一下ScrollViewer控件。在尺寸固定的容器中,当某一部分内容尺寸超出容器尺寸范围时,就可以将其放入ScrollViewer控件中,通过水平滚动条(HorizontalScrollBarVisibility)和竖直滚动条(VerticalScrollBarVisibility)调节显示内容。其中可以通过ScrollbarVisibility属性控制滚动条是否可见。

 

  今天先写到这里吧,关于具体的几种布局将会在以后的文章中介绍。