好消息,MPF计划2017年11月份全部开源关注【QQ群:206378966】。
1. MPF文件格式
MPF主要包含三种类型的文件:
Application文件、ResourceDictionary文件、布局描述文件。
1.1. Application文件
此文件描述应用程序的属性信息,其格式如下:
<Application StartupUri="">
<Application.Resources>
</Application.Resources>
</ Application>
此文件必须以Application为根节点,此文件定义整个应用系统的公共资源,主窗口资源描述,Application里定义的资源在整个应用程序中优先级最低。
1.2. ResourceDictionary文件
MPF资源文件里分为实体资源和样式资源,事实上,样式资源里通常引用实体资源;而样式应用于具体的控件元素, 资源采用x:Key进行定义,而且必须唯一。
实体资源在MPF里是最小不可分割的资源单元,独立描述特定的资源类型,目前MPF包含如下资源:
1.2.1. ImageBrush
图像刷子,属性值如下:
Source:图像路径;
ViewCorner:四个边角,九宫格绘制四个边角将按照实际大小绘制。
ViewBox:图像实际绘制区域,分别为左、上、宽、高。
Opacity:图像绘制透明度,取值0至1。
Stretch:图像拉伸模式,Uniform:原始大小;UniformFill:原始大小填充;Fill:自动拉伸。
<ImageBrush x:Key="name " Source=" image.png" Stretch="Uniform" ViewBox="0,0,17,17" />
1.2.2. SolidColorBrush
纯色刷子,格式如下:
<SolidColorBrush x:Key="name"Color="0xFFFFFF" >
1.2.3. LinearGradientBrush
线性渐变刷子,格式如下:
<LinearGradientBrush x:Key="name" StartPoint="0.5,0" EndPoint="0.5,1" >
<GradientStop Offset="0.0" Color="#00FFFFFF" />
<GradientStop Offset="0.5" Color="#FFFFFFFF" />
<GradientStop Offset="1.0" Color="#00FFFFFF" />
</LinearGradientBrush>
StartPoint:开始渐变点;
EndPoint:结束渐变点;
1.2.4. RadialGradientBrush
径向渐变刷子,格式如下:
<RadialGradientBrush x:Key="name " GradientOrigin="0.5,0" RadiusX="0.5" RadiusY="0.5">
<GradientStop Offset="0.0" Color="#00FFFFFF" />
<GradientStop Offset="0.5" Color="#FFFFFFFF" />
<GradientStop Offset="1.0" Color="#00FFFFFF" />
</RadialGradientBrush>
1.2.5. CursorBrush
<Cursor x:Key="split"Source="d:/split.cur" />;
1.2.6. ControlTemplate
定义控件外观,后面会详细介绍;
1.2.7. DataTemplate
定义数据的呈现外观,后面会详细介绍;
1.2.8. Bitmap
图像资源,用于定义独立的图像,格式如下:
<Bitmap x:Key="Head" Source="Images/login/1_100.gif" />
1.2.9. String、Rect、Point、Integer、Float
此类资源定义基本数据类型资源,格式如下:
<String x:Key="name" Value="Sharpui" />
<Rect x:Key="name" Value="0,0,1,1" />
<Point x:Key="name" Value="2,2" />
<Integer x:Key="name" Value="50" />
<Floa tx:Key="name" Value="50.25" />
数据类型资源包括系统和用户定义的数据类型,用户定义的数据类型资源前面需用local:作为前缀表明。
资源可以单独放在独立的文件里,也可以放在界面元素的资源描述节里;两者的描述格式是完全一致的,资源是可以继承,就是说子元素可以继承父元素的资源,以此类推,Application作为所有界面元素的根而存在,因此其定义的资源在整个应用系统中优先级最低。
一个标准的ResourceDictionary文件格式如下:
<ResourceDictionary Name="Window1" Width="500" Height="500" >
<!–定义资源–>
<ImageBrush x:Key="Brush1" Source="res/image.png" />
<SolidColorBrush x:Key="Brush2" Color="Blue" />
<!–定义样式–>
<Style TargetType="Button">
<!–定义属性–>
<Setter Property="Background" Value="Green" />
<!–定义样式触发器–>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!–鼠标移到控件上时背景色变为蓝色–>
<Setter Property="Background" Value="Blue" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!–鼠标按下控件背景色变为黄色–>
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
当然,这里的Trigger还支持多条件触发,这里后面会具体讲解。
具体资源的格式、属性下面做具体描述。
1.3. 布局文件
此文件主要描述一个窗口的布局、布局引用的控件、控件的属性以及引用的资源等信息,界面引擎统一解析此文件,然后对窗口进行渲染,一个布局描述文件只能对应一个渲染窗口,其根节点被定义为Window(也可以是其它控件),格式描述如下:
<Window Name="Window1" Width="500" Height="500" >
<!–定义窗口资源–>
<Window.Resources>
</Window.Resources>
<!–窗口子控件–>
<Button Name="Button1">
<!–子控件资源–>
<Button.Resources>
</Button.Resources>
</Button>
</Window>
上面是一个标准的布局文件格式,布局文件包含资源描述和子控件描述。
1.4. 布局原理说明
系统布局是MPF关键部分,所有元素的布局都是相对于其父界面元素进行计算的,一般界面元素分为垂直和水平方向上的布局,水平方向包括Left、Center、Right、Stretch四个属性;垂直方向包括Top、Center、Bottom、Stretch四个属性,系统对水平和垂直上的这四个属性进行默认实现。
布局结合了元素的Width、Height和Margin以及Padding进行计算得到最终结果。
除了Stretch属性外,其余属性都需要元素的Width和Height支持,就是说必须设置Width和Height值,否则元素将不可见。
对于Left和Top,其布局原理如下:
对于Right和Bottom布局原理如下:
对于Center布局原理如下:
对于Stretch布局原理如下:
Stretch自动填充满父界面元素整个空间,然后四个边减掉Margin设定的值。
对于元素大小的测量仅仅在元素准备载入时初始化一次,系统运行过程中,具体元素可以根据需要重新调用进行测量。