WPF Layer 彈出層使用匯總

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 依賴組件

 

第三步：導入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 });
        }
    }
}

 

配置參數范例如下：

 

#提示框 -

方式一：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	是否顯示對話框