Silverlight 布局系统

一、Silverlight 布局系统

1.       Silverlight 插件的位置和尺寸

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

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

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

2.       布局系统

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

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

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

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

1.       测量每个子 UIElement

2.       计算在 FrameworkElement 上定义的大小调整属性,例如 WidthHeight Margin

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

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

5.       Children 集合绘制到屏幕。

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

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

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

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

4.       测量和排列子元素

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

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

HeightWidthActualHeight 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派生重写其MeasureOverrideArrangeOverride方法。

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

原文地址:https://www.cnblogs.com/chenqingwei/p/1959486.html