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属性控制滚动条是否可见。

 

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