一、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容器控件排列的控件