Silverlight 布局系统

一、Silverlight 布局系统

1.       Silverlight 插件的位置和尺寸

Silverlight 的应用程序的区域在HTML宿主中的位置，定位 Silverlight 对象时，有两个参考框架：

插件内：将 Silverlight 图面上的对象定位在该插件的边界框内。

HTML 内：整个插件以及位于它里面的所有对象都受插件在 HTML 中的放置位置的限制。

2.       布局系统

布局一词描述在基于 Silverlight 的应用程序中调整对象大小和定位对象的过程。

父 Panel中是Children的集合，当每个元素的UIElement 改变其位置时，布局系统就可能触发一个新的处理过程。

布局是一个递归系统，实现在屏幕上对元素进行大小调整、定位和绘制。布局系统为 Children 集合的每个成员完成两个处理过程：第一个是测量处理过程，第二个是排列处理过程。测量处理过程是确定每个子元素所需大小的过程。排列处理过程是最终确定每个子元素的大小和位置的过程。

若要重写默认 Panel 布局行为，则每个类型的 Panel 均需要提供自己的 MeasureOverride 和 ArrangeOverride方法，以实现自己特定的布局行为。不论何时调用布局系统，都会发生以下系列事件：

1.       测量每个子 UIElement。

2.       计算在 FrameworkElement 上定义的大小调整属性，例如 Width、Height 和 Margin。

3.       应用 Panel特定的逻辑，例如堆栈 Orientation。

4.       测量所有子元素后排列内容。

5.       Children 集合绘制到屏幕。

6.       如果其他 Children 添加到了集合中、Children的布局属性（如 Width 和 Heigh）发生了改变或调用了 UpdateLayout 方法，均会再次调用该过程。

3.       元素边界框（这个问题不容易搞清楚）

基于 Silverlight 的应用程序中的所有元素周围都围绕着一个边界框，当布局系统定位任何 FrameworkElement 时，实际上是在定位包含该元素的矩形或布局槽。

由父容器决定每个子元素的布局槽大小。

4.       测量和排列子元素

在测量处理过程中，布局系统会告诉 Panel其 availableSize（可用大小）, Panel将计算其每个子元素的本机大小属性，如 Clip 和 Visibility。接下来，处理在每个子元素上定义的 FrameworkElement属性。这些属性旨在描述基础 UIElement的大小调整特性，例如其 Height、Width、Margin 和 Style。然后，Panel将对其每个子元素调用Measure方法，以便传递相应子元素的可用大小。

测量处理过程的最终目标是让布局系统确定每个子元素的 DesiredSize，这是在调用 Measure之后在内部发生的。

在 Height、Width、ActualHeight 和 ActualWidth 的属性之间存在着差异。例如，ActualHeight 属性是基于其他高度输入和布局系统的计算值。

在排列处理过程中，布局系统会告诉 Panel 可用于它及其子元素的 finalSize。在排列处理过程中，父 Panel 元素将计算子元素的 DesiredSize 以及可能会影响元素呈现大小的任何其他边距，并确定每个子元素的边界框。边界框决定子元素的布局槽的尺寸。然后，父 Panel调用每个子元素的 Arrange 方法，以便传递用于设置子元素在面板中的原点及其高度和宽度的 Rect。

5.       Panel 元素和自定义布局行为

Canvas显式定位子元素。(绝对定位)

Grid定义由行和列组成的灵活网格区域。

StackPanel将子元素排列成一行（可沿水平或垂直方向）。

常用属性：Margin HorizontalAlignment Canvas.ZIndex

根元素或布局元素都没有定义宽度或高度,是将DOM的宽度和高度属性保留为100%

<UserControl x:Name="RootElement" x:Class="WindowResizingSample.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid x:Name="LayoutRoot" Background="White">

 

    </Grid>

</UserControl>

 

二、自定义面板

Canvas,StackPanel,Grid不能满足您布局要求时可以从Panel派生重写其MeasureOverride和ArrangeOverride方法。

1.       测量

Protected override Size MeasureOverride(Size availableSize)

{

     Int i= 0;

           Foreach(FrameworkElement child in Children)

     {

        Child.Measure(new Size(100,100);

     I++;

}

         Return new Size(300,300);

}

在 MeasureOverride 中，必须调用每个子元素的 Measure方法，传递该面板可以分配的空间

2.       排列

测量处理过程完成后，将开始进行排列处理过程。在排列处理过程中，必须确定每个子级的布局槽的位置和大小并设置面板的最终大小。

在 ArrangeOverride中，对每个子级调用 Arrange，传递 Rect。它设置父面板中子级的布局槽的原点、高度和宽度。

3.       可滚动的内容和性能

如果您创建一个包含许多可滚动内容的自定义控件（类似于 ListBox），并且该控件加载过程很慢或滚动不平滑，则考虑使用虚拟化。"虚拟化"是指一种技术，通过该技术，可根据屏幕上所显示的项来从大量数据项中生成 UI 元素的子集。

三、全屏支持

1.       进入全屏模式

当您将 IsFullScreen属性设置为 true 时，基于 Silverlight 的应用程序即进入全屏模式。

下面的代码示例演示如何通过切换 IsFullScreen属性值来启用和禁用全屏模式。

Silverlight 在全屏模式下不支持对话框。

全屏模式下不支持拖放或多点触控输入。

当基于 Silverlight 的应用程序处于全屏模式下时，会禁止大多数键盘事件。

在嵌入模式与全屏模式之间切换，对应用程序内所含内容的性能所带来的影响非常小。这意味着，在大多数情况下音频或视频内容的播放是完全连续的。

Windowless属性设置为 true 的 Silverlight 插件在全屏模式下显示时，始终会以完全不透明的方式绘制其背景色

四、Silverlight 设计器中的对齐方式

1.       对齐线是视觉提示，可帮助设置某个控件相对于应用程序中的其他控件的对齐方式。

2.       边距是控件的边缘与其宿主容器的边缘之间的空间大小

3.       网格线可用来在 Silverlight 设计器中对齐使用 Grid容器控件排列的控件