好消息,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文件

资源采用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.  布局原理说明

所有元素的布局都是相对于其父界面元素进行计算的,一般界面元素分为垂直和水平方向上的布局,水平方向包括Left、Center、Right、Stretch四个属性;垂直方向包括Top、Center、Bottom、Stretch四个属性,系统对水平和垂直上的这四个属性进行默认实现。

        布局结合了元素的Width、Height和Margin以及Padding进行计算得到最终结果。

        除了Stretch属性外,其余属性都需要元素的Width和Height支持,就是说必须设置Width和Height值,否则元素将不可见。

        对于Left和Top,其布局原理如下:

        

pom 镜像配置转dickerfile_pom 镜像配置转dickerfile


         

        对于Right和Bottom布局原理如下:

        

pom 镜像配置转dickerfile_数据类型_02

        对于Center布局原理如下:

        

pom 镜像配置转dickerfile_Source_03

        对于Stretch布局原理如下:

        

pom 镜像配置转dickerfile_Source_04

        Stretch自动填充满父界面元素整个空间,然后四个边减掉Margin设定的值。

        对于元素大小的测量仅仅在元素准备载入时初始化一次,系统运行过程中,具体元素可以根据需要重新调用进行测量。