WPF Layer 弹出层使用汇总

参考：https://www.cnblogs.com/zt199510/p/14510575.html

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 依赖组件

Layer SDK下载：Micro.Layer.dll.zip

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

第三步：导入Micro.Layer 样式

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/Micro.Layer;component/skin/LayerStyle.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 });
        }
    }
}

配置参数范例如下：

#提示框 -

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

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

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

#普通信息框 -

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

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

#询问框 -

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

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

#加载层 -

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

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

#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 });

#输入层 -

方式一：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) => { }));

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

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

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

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

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

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

服务器 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 = "图片地址" });

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

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

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

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

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

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

#页面层 -

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

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

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

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	是否显示对话框

posted @ 2022-03-17 00:59 microsoft-zhcn 阅读(1214) 评论(3) 编辑收藏举报

刷新页面返回顶部

microsoft-zhcn

WPF Layer 弹出层使用汇总

公告