Micro.Layer 是什么?

Micro.Layer 是一款历年来备受青睐的 WPF 弹出层组件,具备全方位的解决方案,面向各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

 

Micro.Layer.Demo 演示

 Micro.Layer Demo下载:Micro.Layer.Demo.zip

修改日志

功能

修改内容

时间

Dialog.Page

1.新增支持返回Object对象参数

2022-04-22

Dialog.Page

1.修改调用Page页面的方法,支持Content实例、支持Source

2022-04-21

Dialog.Page

1.新增可设置宽 和 高

2.新增可设置Page对象

2022-03-18

 Dialog.Message

 1.修复自动关闭提示后,窗口被隐藏

2022-03-15

 Micro.Layer 如何使用?

第一步:下载 Micro.Layer 依赖组件

Micro.Layer SDK下载:Micro.Layer.zip

 

第二步:引用 Micro.Layer 依赖组件

wpf ProgressBar 闪动 wpf 弹出层_Boo

 

第三步:导入Micro.Layer 样式

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/Micro.Layer;component/skin/layui.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

 

 第四步:调用 Micro.Layer 方法

using Micro.Layer;

namespace Micro.Layer.Demo
{
    public class MainWindow
    {
        public MainWindow()
        {
            Dialog.Message(new { Content = "消息内容", Mask = true });
        }
    }
}

 

配置参数范例如下:

wpf ProgressBar 闪动 wpf 弹出层_Mask_02

 

#提示框 -

方式一:Dialog.Message(new { Content = "消息内容" ,Mask = true});

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_03

 

 方式二:Dialog.Message(new { Content = "消息内容", Ok = "确定", No = "取消" ,Mask = true});

 

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_04

 方式三(回调):Dialog.Message(new { Content = "消息内容", Ok = "确定", No = "取消",Mask = true }, new Action<bool>((p) => {  }));

 

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_04


 

#普通信息框 -

方式一:Dialog.Alert(new { Title = "文字标题", Content = "文字内容" });

 

wpf ProgressBar 闪动 wpf 弹出层_Mask_06

方式二:Dialog.Alert(new { Content = "文字内容" });

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_07


 

 

#询问框 -

方式一:Dialog.Confirm(new { Title = "询问标题", Content = "询问内容" });

wpf ProgressBar 闪动 wpf 弹出层_窗口大小_08

方式二:Dialog.Confirm(new { Content = "询问内容" });

 

wpf ProgressBar 闪动 wpf 弹出层_Mask_09


 

 

#加载层 -

方式一:Dialog.Load(new { Content = "加载中", Mode = 1 });

wpf ProgressBar 闪动 wpf 弹出层_Mask_10

方式二:Dialog.Load(new { Content = "加载中", Mode = 2 });

 

 

wpf ProgressBar 闪动 wpf 弹出层_Mask_11

 


 

 

#tip层 -

方式一(左):Dialog.Tip(TipLeft, new { Content = "提示内容", Mode = 9 });

方式一(上):Dialog.Tip(TipTop, new { Content = "提示内容", Mode = 10});

方式一(右):Dialog.Tip(TipRight, new { Content = "提示内容", Mode = 4 });

方式一(下):Dialog.Tip(TipBottom, new { Content = "提示内容", Mode = 2 });

wpf ProgressBar 闪动 wpf 弹出层_窗口大小_12


 

#输入层 -

方式一:Dialog.Prompt(new { Title = "请输入内容", Placeholder = ""}, new Action<string>((p) => { }));

方式二(手机号码):Dialog.Prompt(new { Title = "请输入手机号码", Content = @"^1[3456789]\d{9}$", Placeholder = "" }, new Action<string>((p) => { }));

方式三(正则表达式):Dialog.Prompt(new { Title = "请输入标题", Content = @"正则表达式", Placeholder = "" }, new Action<string>((p) => { }));

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_13


 

#键盘层 - Dialog.Keyboard(new { Title = "数字键盘", Content = "^([0-9]{1,})|([0-9]{1,}[.][0-9]*)$"}, new Action<string>((p) => { }));

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_14

 

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_15


 

 

#success - Dialog.Success(new { Title = "成功标题", Content = "文字内容" });

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_16


 

#info - Dialog.Info(new { Title = "提示标题", Content = "提示内容" });

wpf ProgressBar 闪动 wpf 弹出层_Mask_17


 

#warming - Dialog.Warming(new { Title = "警告标题", Content = "警告内容" });

wpf ProgressBar 闪动 wpf 弹出层_窗口大小_18


 

 

#error - Dialog.Error(new { Title = "错误标题", Content = "错误内容" });

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_19

 

#文件上传层 - Dialog.Upload(new { Title = "文件上传标题", Url="上传服务器地址" });

wpf ProgressBar 闪动 wpf 弹出层_窗口大小_20

服务器 WebApi 文件接收代码

[HttpPost]
public String SaveFile()
{
    var request = HttpContext.Current.Request;
    if (request.Files.Count > 0)
    {
        HttpPostedFile file = request.Files.Get(0);
        file.SaveAs(Path.Combine("E:", file.FileName));
    }
    return "0";
}

 


 

 

#文件下载层 - Dialog.Download(new { Title = "文件下载标题", Url = "图片地址" });

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_21


 

 

#消息通知 - Dialog.Notice(new { Title = "通知标题", Mode = 2, Content = "通知内容" });

wpf ProgressBar 闪动 wpf 弹出层_Boo_22


 

 #幻灯片 - Dialog.Images(new { Title = "幻灯片标题", Url = new List<string> { "图片地址1", "图片地址2" } });

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_23


 

 

#图片层 - Dialog.Image(new { Title = "图片标题", Url = "图片地址1" });

wpf ProgressBar 闪动 wpf 弹出层_wpf ProgressBar 闪动_24


 

 

#Gif图片层 - Dialog.Gif(new { Title = "图片标题", Url = "图片地址1" });

wpf ProgressBar 闪动 wpf 弹出层_Boo_25


 

 

#打印层 - Dialog.Print(new { Title = "打印标题" }, "/xml/printTempl.xaml", GlobalData.OrderExample, new OrderDocumentRenderer());

wpf ProgressBar 闪动 wpf 弹出层_Mask_26


 

#视频层 - Dialog.Media(new { Title = "视频标题", Url = "视频地址" });

 

wpf ProgressBar 闪动 wpf 弹出层_窗口大小_27


 

#页面层 -

方式一:Dialog.Page("pack://application:,,,/;component/Page页.xaml",new { Title = "Page页面标题" });

方式二:Dialog.Page(new Page页(),new { Title = "Page页面标题" }, new Action<bool, object>((r, o) =>{}));

wpf ProgressBar 闪动 wpf 弹出层_Boo_28


 

 

#网页层 - Dialog.Web(new { Title = "Web页面标题", Url = "http://baidu.com" });

wpf ProgressBar 闪动 wpf 弹出层_窗口大小_29


 

 

Micro.Layer 参数表

名称

类型

默认值

描述

说明

内容

title

String

'消息'

标题内容

 

content

String

null

消息内容

1、如果内容类型是Object(JSON)还需要tmpl参数配合;

2、如果传入的是HTMLElement类型,如果是隐藏元素会给其设置display:block以显示该元素,其他属性与绑定的事件都会完整保留,对话框关闭后此元素又将恢复原来的display属性,并且重新插入原文档所在位置;

3、如果没有设定content的值则会有loading的动画。

HTMLElement Object

按钮

yesFn

Function

null

确定按钮回调函数

函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮。

Boolean

noFn

Function

null

取消按钮回调函数

函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮。

对话框标题栏的关闭按钮其实就是取消按钮,只不过视觉不同罢了,点击同样触发noFn事件。

Boolean

yesText

String

'确定'

确定按钮文本

 

noText

String

'取消'

取消按钮文字

 

button

Array

null

自定义按钮

参数{name:按钮名称,callback:按下后执行的函数,focus:是否聚焦点,disabled:是否标记按钮为不可用状态}(后续可使用控制接口让其恢复可用状态)。

示例:参数如[{name:'登录', callback: function () {}}, {name: '取消'}]。

注意点击按钮默认会触发按钮关闭动作,需要阻止触发关闭请让回调函数返回false。

尺寸

width

Number

'auto'

设置消息内容宽度

可以带单位。一般不需要设置此,对话框框架会自己适应内容。

如果设置为百分值单位,将会以根据浏览器可视范围作为基准,此时如果浏览器窗口大小被改变其也会进行相应的调整。

String

height

Number

'auto'

设置消息内容高度

可以带单位。不建议设置此,而应该让内容自己撑开高度。

如果设置为百分值单位,将会以根据浏览器可视范围作为基准,此时如果浏览器窗口大小被改变其也会进行相应的调整。

String

位置

fixed

Boolean

false

开启静止定位

静止定位是css2.1的一个属性,它静止在浏览器某个地方不动,也不受滚动条拖动影响(artDialog支持IE6 fixed)。

follow

HTMLElement

null

让对话框依附在指定元素附近

可传入元素ID名称,注意ID名称需要以“#”号作为前缀。

String

left

Number

'50%'

X轴的坐标

1、如果开启了fixed参数则以浏览器视口为基准;

2、可以使用'0%'~ '100%'作为相对坐标,如果浏览器窗口大小被改变其也会进行相应的调整。

String

top

Number

'goldenRatio'

Y轴的坐标

1、如果开启了fixed参数则以浏览器视口为基准;

2、可以使用'0%'~ '100%'、''goldenRatio''作为相对坐标,如果浏览器窗口大小被改变其也会进行相应的调整,其中'goldenRatio'表示为黄金比例垂直居中,绝对居中请使用'50%'。

String

视觉

lock

Boolean

false

开启锁屏

中断用户对话框之外的交互,用于显示非常重要的操作/消息,所以不建议频繁使用它。

background

String

'#000'

锁屏遮罩颜色

 

opacity

Number

0.7

锁屏遮罩透明度

 

icon

String

null

定义消息图标

可定义“skins/icons/”目录下的图标名作为参数名(不包含后缀名)

padding

String

'20px 25px'

 

内容与边界填充边距(即css padding)

交互

time

Number

null

设置对话框显示时间

单位秒

resize

Boolean

true

是否允许用户调节尺寸

 

drag

Boolean

true

是否允许用户拖动位置

 

esc

Boolean

true

是否允许用户按Esc键关闭对话框

 

高级

id

String

null

设定对话框唯一标识

用途:1、防止重复弹出;2、可后续使用art.dialog.list[youID]获取控制接口。

Number

tmpl

String

null

启用模板引擎拼接消息内容

还需要与content参数传入字面量对象才能生效,详情见示例。

zIndex

Number

1987

重置全局zIndex初始值

用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件,但是它们可能默认zIndex没有artDialog高,导致无法浮动到artDialog之上,这个时候你就可以给对话框指定一个较小的zIndex值。

请注意这是一个会影响到全局的配置,后续出现的对话框叠加高度将重新按此累加。

initFn

Function

null

对话框弹出后执行的函数

 

closeFn

Function

null

对话框关闭前执行的函数

函数如果返回false将阻止对话框关闭。

请注意这不是关闭按钮的回调函数,无论何种方式关闭对话框,closeFn都将执行。

show

Boolean

true

是否显示对话框