Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

04 Nov 2019

XAML API 学习笔记:FrameworkElement

FrameworkElement(简称FE)集成自UIElement,是搭建XAML的Visual Tree的基础,为XAML提供一些框架性功能,并为UI元素提供布局基础。

通常用户不需要直接创建或者扩展FrameworkElement。而是创建或者扩展FE的子类:

  • 非Sealed的子类(比如TextBox)。Sealed表示不可继承
  • 控件基类,比如Control,ContentControl, UserControl
  • 导航元素:Page,Frame
  • 面板类:Panel(或者Panel的非封(Sealed)子类)

XAML的布局系统可以识别从FE派生出的所有子类的对象,并读取他们布局相关的属性,比如MinWidth、Height, Width, ActualHeight, ActualWidth, Margin, MeasureOverride, ArrangeOverride, HorizontalAlignment, VerticalAlignment, LayoutUpdated等等。

FE参与构建XAML的Visual Tree。所以FE知道实例在Visual Tree中的生命周期,并提供相应的消息。参考: Loaded, SizeChanged, Unloaded, OnApplyTemplate。

FE为数据绑定提供框架性支持,参考:DataContext, DataContextChanged, SetBinding, GetBindingExpression。

FE还可以通过Name辖属来标识元素(不过使用x:Name可能更好)。参考Name, FindName, Parent, BaseUri, OnApplyTemplate。

FE还定义全球化的相关信息,比如Language和FlowDirection。

通过Style、RequestedTheme以及Resources辖属,可以修改页面的风格。参考Styling controls

从FE派生出来的元素类型有很多,可以参考FrameworkElement derived classes

Responsive layouts with XAML

Height和Width可以用来决定元素的尺寸。他们的值可以是绝对的像素值,也可以是相对的AUTO或者比例值。下面是一个4列Grid的例子:

  • Column_1 Auto The column will size to fit its content.
  • Column_2 * After the Auto columns are calculated, the column gets part of the remaining width. Column_2 will be one-half as wide as Column_4.
  • Column_3 44 The column will be 44 pixels wide.
  • Column_4 2* After the Auto columns are calculated, the column gets part of the remaining width. Column_4 will be twice as wide as Column_2.

默认情况下,Grid的ColumnDefinition采用的值是*,也就是按比例。

随着页面调整,元素的大小会发生变化。从ActualHeigh和ActualWidth可以获得元素的真实大小。

可以用MinWidth/MaxWidth和MinHeight/MaxHeight为元素添加额外的尺寸限制。

通过HorizontalAlignment(Left, Center, Right, 或者Stretch)可以指定水平对齐。 通过VerticalAlignment(Top, Center, Bottom, 或者Stretch)可以指定上下对齐。

通过Visibility(Visible或者Collapsed)可以设置一个元素的可见性。可以通过设置x:DeferLoadStrategy,来延迟加载Collapsed元素。

呈现元素的时候,通过要把元素放置到一个具有定位和排布子元素的容器中(通常是Panel或者其派生类,比如Canvas、Grid、RelativePanel、StackPanel)Layout Panels

其他

(完)

comments powered by Disqus