【界面黑科技-＞构建异形不规则动态界面应用程序】
【界面黑科技->构建异形不规则动态界面应用程序】
-
简介
UI界面,经常我们看到的windows 操作系统, liunx 操作系统, 工具软件,设计软件, 应用软件, web 软件, 设备软件,等等计算机人机交互处理的时候都需要中间件界面达到控制, 那么一个好的界面肯定操作处理的时候心情也不一样,从win95到现在的win11首先改变的是操作界面的美感,而不是全屏按钮框框一堆只是为了操作而操作,简直就是牛马控制.同时产生了前端设计人员,那么本篇文章的意义就在于对软件界面的一次提升与探索. 有任何异议可留言探讨,同时也可以一键三连,防止找不到哦, 原创资料. -
界面区别
一般我们能看到的软件界面如下分类:-
常规界面
常规界面通用, 简单, 追求的就是简简单单,有个能承载的窗口就行.
-
不规则异形界面
不规则异形窗口,最常见的就是登录窗口, 音乐播放器,游戏登录窗口,广告窗口界面, 主打一个炫酷,与众不同,吸引人眼球,可以做的非常个性,需要把窗口设计出来再通过编程语言裁切处理,或编程语言提供的方式.
C/C++ 通常提供的方形窗口,异形界面框架没发现, QT界面非常漂亮,提供不规则异形界面, WPF提供, swing , JavaFx 提供不规则异形界面.WEB 可提供非常漂亮的界面,但不是独立的软件哦,建立在浏览器基础上面的.
-
动态不规则异形界面
动态不规则异形界面,这种我是没发现过有这样的程序界面出现,也是这篇文章的核心意义了, 意思就是在"不规则异形界面"的基础上可以动态的调整窗口界面大小,可以全部缩放,不产生拉变形错位或者某一部分产生尺寸变化而固定的区域始终保持原有的形状.
-
-
构建思路
本项目软件基于WPF,为什么wpf,因为在微软体系里WPF界面能做到非常漂亮精细美轮美奂, 也成长了好多年非常成熟了,所以基于此体系实现,QT 暂时没折腾, JAVA SWING 老体系现在用的最多的是JavaFX来做窗口语言来开发, JDK17+ JAVAFX 性能上也提升了不少也没啥问题, 使用javafx 建议不要使用jdk 8 性能上不行了. 简单的无所谓,要求性能有提升的可以使用jdk17+的开始构建项目. jdk17+ javafx的异形窗口也实现过,基本上都没啥问题, 思路清楚了都是通用的,就是实现的道路上坑坑洼洼走通就可以了.做过不规则异形窗口的都知道,不规则窗口是线, 圆弧, 曲线等构建了一个形状,在这个形状中控制形状的就在于这个形状中的哪些点, 根据这些点来调整界面形状,刷新界面后就能动态的控制这个窗口了.同时在这个不规则窗口中必须有一个固定参数模版,比如窗口首先要设置一个尺寸固定的每一个点坐标都需要知道,那么要动态调整的时候,是基于这个模版来调整参数的,没有一个基准窗口模版那么一切就没有意义,并不能保证窗口的规范性和准确性,在这个基础上再区分每个坐标点是否固定或活动的.就能实现动态异形不规则窗口的变化了.而不是非常好看但只能局限实现功能了.上面的"动态不规则异形界面" 示例图完全可以做任何系统界面,要复杂点在设计复杂更加有个性都是完全没问题的.
-
代码实例
-
界面类型定义
/// <summary> /// 窗口模式定义类型 /// </summary> public enum WindowFullType { /// <summary> /// 窗口模式 /// </summary> WINDOW, /// <summary> /// 全屏模式 /// </summary> FULL } -
界面模式切换管理工厂
-
切换接口定义(参考)
此处的 update() 函数为接口更新总处理, 其他方法只是根据界面清空划分处理而定义/// <summary> /// window 窗口/全屏接口 /// </summary> public interface WinZoom { /// <summary> /// 全局更新 /// </summary> public void update(); /// <summary> /// Background 背景 /// </summary> public void background(); /// <summary> /// 主体 /// </summary> public void content(); /// <summary> /// 左上 /// </summary> public void leftTop(); /// <summary> /// 右上 /// </summary> public void rightTop(); /// <summary> /// 左下 /// </summary> public void leftBomtton(); /// <summary> /// 右下 /// </summary> public void rightBomtton(); } ``` -
节点数据模型关键点定义
节点实例说明: 此处WPF使用的是Path 节点数据在窗口模式中直接使用节点,当非窗口模式则每个节点需要定义是否为固定点或者活动点,全部活动点当然好了,但是某一区域固定后整体布局和功能更加紧凑了. 此处节点定义是直接定义到类变量的, 可以独立出来写进配置文件中以便修改. 要是专门实现动态不规则窗口框架是可以这么干的.此处为简便版本.次定义数据是需要WinZoom 接口 update() 函数实时运算的参数变量.通过运算后创建新的面板对象.public static object[][] panel_StackPanel5_body_path_fixation ={ /* 0 */ new object[]{"M",9.53674E-07,true,0.00170898,true}, /* 1 */ new object[]{"L",1.48632,true,2.2832,true}, /* 2 */ new object[]{"L",2.48613,true,724.558,false}, /* 3 */ new object[]{"L",573.099,false,724.529,false}, /* 4 */ new object[]{"L",591.349,false,747.407,false}, /* 5 */ new object[]{"L",1200.49,false,747.393,false}, /* 6 */ new object[]{"L",1200.49,false,724.621,false}, /* 7 */ new object[]{"L",1193.49,false,715.621,false}, /* 8 */ new object[]{"L",1193.48,false,0.000183105,true}, /* 9 */ new object[]{"L",9.53674E-07,false,0.00170898,true} -
完整代码
/// <summary> /// 窗口缩放管理 /// </summary> internal class WindowZoomFactory { private Full full; private Win window; /** --------------------------------------------------- */ /** -- 主界面布局定义 */ /** --------------------------------------------------- */ public static object[][] _fixation = { }; public static object[][] _fixation_index = { }; // ProgressBar 主进度条裁切 public static string bottem_panel_StackPanel4_ProgressBar_path = "M 7.42766e-006,0L 602.266,0.00982666L 602.266,10.0095L 7.88714,10.0098L 7.42766e-006,0 Z "; public static object[][] bottem_panel_StackPanel4_ProgressBar_path_fixation = { }; public static object[][] bottem_panel_StackPanel4_ProgressBar_path_fixation_index = { }; // 左下工具栏裁切 public static string bottem_panel_StackPanel6_path = "M 600,31.9999L 4.92732e-006,31.9999L 4.92732e-006,7.03296L 6.20805,0.000915527L 575,0L 600,31.9999 Z "; public static object[][] bottem_panel_StackPanel6_path_fixation ={ /* 0 */ new object[]{"M",600,false,31.9999,false}, /* 1 */ new object[]{"L",4.92732E-06,true,31.9999,false}, /* 2 */ new object[]{"L",4.92732E-06,true,7.03296,false}, /* 3 */ new object[]{"L",6.20805,true,0.000915527,false}, /* 4 */ new object[]{"L",575,false,0,false}, /* 5 */ new object[]{"L",600,false,31.9999,false} }; public static object[][] bottem_panel_StackPanel6_path_fixation_index = { new object[] { 1, "true", "false" }, new object[] { 2, "true", "false" }, new object[] { 3, "true", "false" } }; // 系统主体裁切 public static string panel_StackPanel5_body_path = "M 9.53674e-007,0.00170898L 1.48632,2.2832L 2.48613,724.558L 573.099,724.529L 591.349,747.407L 1200.49,747.393L 1200.49,724.621L 1193.49,715.621L 1193.48,0.000183105L 9.53674e-007,0.00170898 Z "; public static object[][] panel_StackPanel5_body_path_fixation ={ /* 0 */ new object[]{"M",9.53674E-07,true,0.00170898,true}, /* 1 */ new object[]{"L",1.48632,true,2.2832,true}, /* 2 */ new object[]{"L",2.48613,true,724.558,false}, /* 3 */ new object[]{"L",573.099,false,724.529,false}, /* 4 */ new object[]{"L",591.349,false,747.407,false}, /* 5 */ new object[]{"L",1200.49,false,747.393,false}, /* 6 */ new object[]{"L",1200.49,false,724.621,false}, /* 7 */ new object[]{"L",1193.49,false,715.621,false}, /* 8 */ new object[]{"L",1193.48,false,0.000183105,true}, /* 9 */ new object[]{"L",9.53674E-07,false,0.00170898,true} }; public static object[][] panel_StackPanel5_body_path_fixation_index = { new object[] { 0, "true", "true" }, new object[] { 1, "true", "true" }, new object[] { 2, "true", "false" }, new object[] { 8, "false", "true" }, new object[] { 9, "false", "true" } }; // 左下部 状态栏 4.92732e-006=0.00000492732 public static string path_1 = "F1 M 600,800L 4.92732e-006,800L 4.92732e-006,775.033L 6.20805,768.001L 575,768L 600,800 Z "; // 左下部 状态栏 固定点定义{ x , y} true:固定, false:活动 public static object[][] path_1_fixation ={ /* 0 */ new object[]{"M",600,false,800,false}, /* 1 */ new object[]{"L",4.92732E-06,true,800,false}, /* 2 */ new object[]{"L",4.92732E-06,true,775.033,false}, /* 3 */ new object[]{"L",6.20805,true,768.001,false}, /* 4 */ new object[]{"L",575,false,768,false}, /* 5 */ new object[]{"L",600,false,800,false} }; public static object[][] path_1_fixation_index = { new object[] { 1, "true", "false" }, new object[] { 2, "true", "false" }, new object[] { 3, "true", "false" } }; // 右下部 滚动条区域 public static string path_2 = "F1 M 597.734,789.99L 1200,790L 1200,800L 605.621,800L 597.734,789.99 Z "; public static object[][] path_2_fixation ={ /* 0 */ new object[]{"M",597.734,false,789.99,false}, /* 1 */ new object[]{"L",1200,false,790,false}, /* 2 */ new object[]{"L",1200,false,800,false}, /* 3 */ new object[]{"L",605.621,false,800,false}, /* 4 */ new object[]{"L",597.734,false,789.99,false} }; public static object[][] path_2_fixation_index = { }; // 内容面板 主体 public static string path_3 = "F1 M 846.997,3.44214L 1200,3.44342L 1200,29.48L 1193.37,34.4871L 866.997,34.4869L 852.023,11.2432L 846.837,13.3838C 847.176,14.7458 847.356,16.1708 847.356,17.6381C 847.356,27.3171 839.521,35.1633 829.856,35.1633C 823.442,35.1633 817.834,31.7075 814.787,26.5535L 810.527,28.3064L 817.03,38.5605L 1193,38.5606L 1193,754.181L 1200,763.182L 1200,785.954L 594.863,785.968L 576.613,763.09L 5,763.119L 5.0002,40.844L 0.00020345,33.1568L 0.00020345,5.44629L 796.03,5.44629L 807.805,24.0132L 812.883,21.9234C 812.539,20.5519 812.356,19.1164 812.356,17.6381C 812.356,7.95917 820.191,0.11261 829.856,0.11261C 836.282,0.11261 841.899,3.58099 844.942,8.75018L 849.266,6.96509L 846.997,3.44214 Z "; public static object[][] path_3_fixation ={ /* 0 */ new object[]{"M",846.997,false,3.44214,true}, /* 1 */ new object[]{"L",1200,false,3.44342,true}, /* 2 */ new object[]{"L",1200,false,29.48,true}, /* 3 */ new object[]{"L",1193.37,false,34.4871,true}, /* 4 */ new object[]{"L",866.997,false,34.4869,true}, /* 5 */ new object[]{"L",852.023,false,11.2432,true}, /* 6 */ new object[]{"L",846.837,false,13.3838,true}, /* 7 */ new object[]{"C",847.176,false,14.7458,true,847.356,false,16.1708,true,847.356,false,17.6381,true}, /* 8 */ new object[]{"C",847.356,false,27.3171,true,839.521,false,35.1633,true,829.856,false,35.1633,true}, /* 9 */ new object[]{"C",823.442,false,35.1633,true,817.834,false,31.7075,true,814.787,false,26.5535,true}, /* 10 */ new object[]{"L",810.527,false,28.3064,true}, /* 11 */ new object[]{"L",817.03,false,38.5605,true}, /* 12 */ new object[]{"L",1193,false,38.5606,true}, /* 13 */ new object[]{"L",1193,false,754.181,false}, /* 14 */ new object[]{"L",1200,false,763.182,false}, /* 15 */ new object[]{"L",1200,false,785.954,false}, /* 16 */ new object[]{"L",594.863,false,785.968,false}, /* 17 */ new object[]{"L",576.613,false,763.09,false}, /* 18 */ new object[]{"L",5,true,763.119,false}, /* 19 */ new object[]{"L",5.0002,true,40.844,true}, /* 20 */ new object[]{"L",0.00020345,true,33.1568,true}, /* 21 */ new object[]{"L",0.00020345,true,5.44629,true}, /* 22 */ new object[]{"L",796.03,false,5.44629,true}, /* 23 */ new object[]{"L",807.805,false,24.0132,true}, /* 24 */ new object[]{"L",812.883,false,21.9234,true}, /* 25 */ new object[]{"C",812.539,false,20.5519,true,812.356,false,19.1164,true,812.356,false,17.6381,true}, /* 26 */ new object[]{"C",812.356,false,7.95917,true,820.191,false,0.11261,true,829.856,false,0.11261,true}, /* 27 */ new object[]{"C",836.282,false,0.11261,true,841.899,false,3.58099,true,844.942,false,8.75018,true}, /* 28 */ new object[]{"L",849.266,false,6.96509,true}, /* 29 */ new object[]{"L",846.997,false,3.44214,true} }; public static object[][] path_3_fixation_index = { new object[] { 0, "false", "true" }, new object[] { 1, "false", "true" }, new object[] { 2, "false", "true" }, new object[] { 3, "false", "true" }, new object[] { 4, "false", "true" }, new object[] { 5, "false", "true" }, new object[] { 6, "false", "true" }, new object[] { 7, "false", "true","false", "true", "false", "true" }, new object[] { 8, "false", "true","false", "true", "false", "true"}, new object[] { 9, "false", "true","false", "true", "false", "true" }, new object[] { 10, "false", "true" }, new object[] { 11, "false", "true" }, new object[] { 12, "false", "true" }, new object[] { 18, "true", "false" }, new object[] { 19, "true", "true" }, new object[] { 20, "true", "true" }, new object[] { 21, "true", "true" }, new object[] { 22, "false", "true" }, new object[] { 23, "false", "true" }, new object[] { 24, "false", "true" }, new object[] { 25, "false", "true","false", "true", "false", "true" }, new object[] { 26, "false", "true","false", "true", "false", "true" }, new object[] { 27, "false", "true","false", "true", "false", "true" }, new object[] { 28, "false", "true" }, new object[] { 29, "false", "true" } }; // sys_ToolBar 父容器裁切 public static string top_panel_StackPanel1_path = "M 3.44806,38.4421L -0.0155026,33.1487L -0.0155026,-0.0498657L 792.591,0L 817.016,38.55L 3.44806,38.4421 Z"; public static object[][] top_panel_StackPanel1_path_fixation ={ /* 0 */ new object[]{"M",3.44806,true,38.4421,true}, /* 1 */ new object[]{"L",-0.0155026,true,33.1487,true}, /* 2 */ new object[]{"L",-0.0155026,true,-0.0498657,true}, /* 3 */ new object[]{"L",792.591,false,0,true}, /* 4 */ new object[]{"L",817.016,false,38.55,true}, /* 5 */ new object[]{"L",3.44806,true,38.4421,true} }; public static object[][] top_panel_StackPanel1_path_fixation_index = { new object[] { 0, "true", "true" }, new object[] { 1, "true", "true" }, new object[] { 2, "true", "true" }, new object[] { 3, "false", "true" }, new object[] { 4, "false", "true" }, new object[] { 5, "true", "true" } }; // 系统 logo 裁切 public static string top_panel_StackPanel2_logo_path = "M 43.1719,6.54266L 38.0521,8.62482C 35.0089,3.4632 29.3921,0 22.9664,0C 13.3014,0 5.46637,7.83496 5.46637,17.5C 5.46637,18.9761 5.64915,20.4097 5.99331,21.7791L 6.65715e-005,24.1833L 2.76569,28.5114L 7.89688,26.4026C 10.9438,31.5491 16.5521,35 22.9664,35C 32.6314,35 40.4664,27.165 40.4664,17.5C 40.4664,16.0349 40.2863,14.6119 39.9471,13.2518L 45.9063,10.7927L 43.1719,6.54266 Z "; // 右侧功能裁切 默认 public static string top_panel_StackPanel3_path = "M 6.20643e-005,0L 355.3,0L 355.3,29.7895L 348.666,34.7895L 22.2977,34.7892L 6.20643e-005,0 Z"; public static object[][] top_panel_StackPanel3_path_fixation = { }; public static object[][] top_panel_StackPanel3_path_fixation_index = { }; // 图标区域 public string path_4 = "812,0,35,36"; /** --------------------------------------------------- */ /** -- 功能区域布局定义 */ /** --------------------------------------------------- */ public WindowZoomFactory() { this.window = new Win(); this.full = new Full(); // 测试环境 if (R.IsTest()) { this.GenerateCode(); } } /// <summary> /// 生成节数据 /// </summary> private void GenerateCode() { R.Printf(NodeConversionToPrintArrayList("public static object[][] path_1_fixation =", path_1, path_1_fixation_index)); R.Printf(NodeConversionToPrintArrayList("public static object[][] path_2_fixation =", path_2, path_2_fixation_index)); R.Printf(NodeConversionToPrintArrayList("public static object[][] path_3_fixation =", path_3, path_3_fixation_index)); // 裁切图形数据 R.Printf(NodeConversionToPrintArrayList("public static object[][] panel_StackPanel5_body_path_fixation =", panel_StackPanel5_body_path, panel_StackPanel5_body_path_fixation_index)); R.Printf(NodeConversionToPrintArrayList("public static object[][] top_panel_StackPanel1_path_fixation =", top_panel_StackPanel1_path, top_panel_StackPanel1_path_fixation_index)); R.Printf(NodeConversionToPrintArrayList("public static object[][] top_panel_StackPanel3_path_fixation =", top_panel_StackPanel3_path, top_panel_StackPanel3_path_fixation_index)); R.Printf(NodeConversionToPrintArrayList("public static object[][] bottem_panel_StackPanel4_ProgressBar_path_fixation =", bottem_panel_StackPanel4_ProgressBar_path, bottem_panel_StackPanel4_ProgressBar_path_fixation_index)); R.Printf(NodeConversionToPrintArrayList("public static object[][] bottem_panel_StackPanel6_path_fixation =", bottem_panel_StackPanel6_path, bottem_panel_StackPanel6_path_fixation_index)); } public static List<PathPoint> NodeConversion(string path) { List<PathPoint> list = new List<PathPoint>(); if (path != null) { // 删除F1 和 Z path = path.Replace("F1", "").Replace("Z", "").Trim(); //foreach (string result in Regex.Split(path, "M|L|H|V|C|S|Q|T|A")) { // Debug.WriteLine(result); //} // 使用Regex类的Matches方法查找所有匹配项 MatchCollection matches = Regex.Matches(path, "M|L|H|V|C|S|Q|T|A", RegexOptions.IgnoreCase); // 输出匹配结果 foreach (Match match in matches) { if (match.NextMatch().Success) { //Debug.WriteLine(match.Value + ":" + path.Substring(match.Index, match.NextMatch().Index - match.Index)); list.Add(new PathPoint(match.Value, path.Substring(match.Index + 1, match.NextMatch().Index - 1 - match.Index).Split(','))); } else { //Debug.WriteLine(match.Value + ":" + path.Substring(match.Index)); list.Add(new PathPoint(match.Value, path.Substring(match.Index + 1).Split(','))); } } matches = null; } return list; } public static string NodeConversionToPrintArrayList(string fieldName, string path, object[][] fixationIndex) { StringBuilder stringBuilder = new StringBuilder(); if (path != null) { // 删除F1 和 Z path = path.Replace("F1", "").Replace("Z", "").Trim(); // 使用Regex类的Matches方法查找所有匹配项 MatchCollection matches = Regex.Matches(path, "M|L|H|V|C|S|Q|T|A", RegexOptions.IgnoreCase); int index = 0; stringBuilder.Append(fieldName); stringBuilder.Append("{"); stringBuilder.Append(Environment.NewLine); // 输出匹配结果 foreach (Match match in matches) { if (match.NextMatch().Success) { //Debug.WriteLine(match.Value + ":" + path.Substring(match.Index, match.NextMatch().Index - match.Index)); WindowZoomFactory.ToStr(match.Value, path.Substring(match.Index + 1, match.NextMatch().Index - 1 - match.Index).Split(','), stringBuilder, index, fixationIndex); stringBuilder.Append(","); stringBuilder.Append(Environment.NewLine); } else { //Debug.WriteLine(match.Value + ":" + path.Substring(match.Index)); WindowZoomFactory.ToStr(match.Value, path.Substring(match.Index + 1).Split(','), stringBuilder, index, fixationIndex); } index++; } stringBuilder.Append(Environment.NewLine); stringBuilder.Append("};"); stringBuilder.Append(Environment.NewLine); matches = null; } return stringBuilder.ToString(); } /// <summary> /// 创建PathGeometry /// </summary> /// <returns></returns> /// <exception cref="NotImplementedException"></exception> public static Geometry PathGeometry(string path) { PathGeometry pathGeometry = new PathGeometry(); pathGeometry.Figures.Clear(); pathGeometry.Figures = PathFigureCollection.Parse(path); return pathGeometry; } /// <summary> /// 数据转换为string /// </summary> /// <param name="type">类型</param> /// <param name="d">节点</param> /// <param name="stringBuilder">字符串</param> /// <param name="fixationIndex">节点固定数据</param> public static void ToStr(string type, string[] d, StringBuilder stringBuilder, int index, object[][] fixationIndex) { double[] data = new double[d.Length]; // 重新转换 if (type.Equals("C")) { d = String.Join(",", d).Replace(" ", ",").Substring(1).Split(","); data = new double[d.Length]; } if (stringBuilder != null) { stringBuilder.Append("\t"); stringBuilder.Append("/* " + String.Format("{0, 5}", index) + " */"); stringBuilder.Append("\t"); stringBuilder.Append("new object[]{"); stringBuilder.Append("\"" + type + "\"" + ","); } for (int i = 0; i < d.Length; i++) { data[i] = Double.Parse(d[i].Trim()); if (stringBuilder != null) { stringBuilder.Append(data[i]); stringBuilder.Append(","); // 固定的定义数据 if (fixationIndex != null) { for (int j = 0; j < fixationIndex.Length; j++) { if (index == (int)fixationIndex[j][0]) { stringBuilder.Append(fixationIndex[j][i + 1]); break; } // 未找到 if (j == fixationIndex.Length - 1) { stringBuilder.Append("false"); } } } if (fixationIndex == null || fixationIndex.Length == 0) { stringBuilder.Append("false"); } stringBuilder.Append(i < d.Length - 1 ? "," : ""); } } if (stringBuilder != null) { stringBuilder.Append("}"); } // 系统换行 //stringBuilder.Append(Environment.NewLine); data = null; } /// <summary> /// 固定节点执行偏移处理 /// </summary> /// <param name="pathFixation">path 偏移数据</param> /// <param name="x">X偏移</param> /// <param name="y">Y偏移</param> /// <returns></returns> public static string ToStr(object[][] pathFixation, double x, double y) { StringBuilder stringBuilder = new StringBuilder(); object[] row = null; double xx = 0; double yy = 0; bool xxBool, yyBool; int g = 0; for (int i = 0; i < pathFixation.Length; i++) { row = pathFixation[i]; g = (row.Length - 1) / 4; // " M 600,800L 4.92732e-006,800L 4.92732e-006,775.033L 6.20805,768.001L 575,768L 600,800 " for (int j = 0; j < g; j++) { //按倍数阶梯获取数据 xx = Double.Parse(row[j * 4 + 1].ToString()); xxBool = (bool)row[j * 4 + 2]; yy = Double.Parse(row[j * 4 + 3].ToString()); yyBool = (bool)row[j * 4 + 4]; // x 是否偏移 if (xxBool == false) { xx = xx + x; } // y 是否偏移 if (yyBool == false) { yy = yy + y; } stringBuilder.Append( ((j == 0) ? row[0] + " " : "") + xx + "," + yy + ((j < g - 1) ? "," : "") ); } } row = null; return stringBuilder.ToString(); } /// <summary> /// 递归更新宽度高度 /// </summary> /// <param name="node"></param> /// <param name="parentWidth"></param> /// <param name="parentHeight"></param> /// <param name="layer"></param> public static void recursionPanel(object node, double parentWidth, double parentHeight, int layer) { // 非测试环境忽略 if (!R.IsTest()) { return; } string str = ""; for (int i = 0; i < layer; i++) { str += "--"; } str += node.GetType().Name; // R.Printf(str); // SplitPanelComponent 面板处理 if ("SplitPanelComponent" == node.GetType().Name) { SplitPanelComponent? splitPanelComponent = node as SplitPanelComponent; if (splitPanelComponent != null) { //splitPanelComponent.Width = parentWidth; //splitPanelComponent.Height = parentHeight; } splitPanelComponent = null; } if ((node as Panel) != null) { Panel? panel = node as Panel; if (panel != null) { R.Printf(str + " : " + panel.Name + "->" + panel.ActualWidth + "/" + panel.ActualHeight); panel.UpdateLayout(); // 下一层 for (int i = 0; i < panel.Children.Count; i++) { if (layer == 0 && i == 0) { FrameworkElement? element = panel.Children[0] as FrameworkElement; if (element != null) { //element.MaxWidth = parentWidth; //element.Width = parentWidth; //element.MaxHeight = parentHeight; //element.Height = parentHeight; } } recursionPanel(panel.Children[i], panel.ActualWidth, panel.ActualHeight, layer + 1); panel.Children[i].UpdateLayout(); } } panel = null; } else if ((node as UserControl) != null) { UserControl? userControl = node as UserControl; if (userControl != null) { // userControl.Width = parentWidth; // userControl.Height = parentHeight; R.Printf(str + " : " + userControl.Name + "->" + userControl.ActualWidth + "/" + userControl.ActualHeight); userControl.UpdateLayout(); recursionPanel(userControl.Content, userControl.ActualWidth, userControl.ActualHeight, layer + 1); } userControl = null; } else if ((node as Control) != null) { Control? control = node as Control; if (control != null) { R.Printf(str + " : " + control.Name + "->" + control.ActualWidth + "/" + control.ActualHeight); control.UpdateLayout(); } control = null; } } public void update(WindowFullType type) { if (type == WindowFullType.WINDOW) { this.window.update(); } else if (type == WindowFullType.FULL) { this.full.update(); } } } /// <summary> /// 全屏模式 /// </summary> public class Full : WinZoom { private static string bottem_panel_StackPanel4_ProgressBar_path_update = null; private static string bottem_panel_StackPanel6_path_update = null; private static DrawingBrush drawingBrush = null; private static string panel_StackPanel5_body_path_update = null; private static string path_1_fixation_update = null; private static string path_2_fixation_update = null; private static string path_3_fixation_update = null; private static Rect path_4_fixation_update; private static string top_panel_StackPanel1_path_update = null; private static string top_panel_StackPanel3_path_update = null; private MainWindow window = MainWindow.APP; /* ------------------------------------ */ /* -- 界面背景定义 [UI_APP] */ /* ------------------------------------ */ public static double height = SystemParameters.PrimaryScreenHeight;// 屏幕高度 public static double height0 = height - Win.height;// 与窗口差值 public static double width = SystemParameters.PrimaryScreenWidth;// 屏幕宽度 public static double width0 = width - Win.width;// 与窗口差值 /// <summary> /// 测试->绘制的形状打印查看 /// </summary> private void testToImage() { // 创建一个DrawingVisual对象来渲染DrawingGroup DrawingVisual drawingVisual = new DrawingVisual(); using (DrawingContext drawingContext = drawingVisual.RenderOpen()) { drawingContext.DrawDrawing(drawingBrush.Drawing); } // 使用RenderTargetBitmap将DrawingVisual渲染为位图 RenderTargetBitmap renderTarget = new RenderTargetBitmap( pixelWidth: (int)width, // 设置图片的宽度 pixelHeight: (int)height, // 设置图片的高度 dpiX: 96, // 设置图片的DPI dpiY: 96, PixelFormats.Pbgra32); // 将DrawingVisual对象渲染到RenderTargetBitmap renderTarget.Render(drawingVisual); // 将RenderTargetBitmap保存为图片 BitmapEncoder encoder = new PngBitmapEncoder(); encoder.Frames.Add(BitmapFrame.Create(renderTarget)); // 使用流保存图片，这里以文件流示例 using (Stream stream = File.Create("output.png")) { encoder.Save(stream); } encoder = null; renderTarget = null; drawingVisual = null; } public void background() { // this.window.Background = new SolidColorBrush(Colors.White); // List<PathPoint> pathPoints3 = WindowZoomFactory.NodeConversion(WindowZoomFactory.path_3); // Debug.WriteLine(WindowZoomFactory.NodeConversionToPrintArrayList(WindowZoomFactory.path_3)); // 测试数据 //Debug.WriteLine(WindowZoomFactory.ToStr(WindowZoomFactory.path_1_fixation, Full.width0, Full.height0)); //Debug.WriteLine(WindowZoomFactory.ToStr(WindowZoomFactory.path_2_fixation, Full.width0, Full.height0)); //Debug.WriteLine(WindowZoomFactory.ToStr(WindowZoomFactory.path_3_fixation, Full.width0, Full.height0)); if (drawingBrush != null) { System.Windows.Application.Current.Dispatcher.Invoke(new Action(() => { this.window.Background = drawingBrush; })); return; } // 创建 Background DrawingBrush? drawing = Application.Current.Resources["UI_APP"] as DrawingBrush; if (drawing != null) { DrawingGroup group = drawing.Drawing as DrawingGroup; //foreach (Drawing drawingGroup in group.Children) { // Debug.WriteLine(drawingGroup); //} if (path_1_fixation_update == null || path_2_fixation_update == null || path_3_fixation_update == null || path_4_fixation_update == null) { path_1_fixation_update = WindowZoomFactory.ToStr(WindowZoomFactory.path_1_fixation, Full.width0, Full.height0); path_2_fixation_update = WindowZoomFactory.ToStr(WindowZoomFactory.path_2_fixation, Full.width0, Full.height0); path_3_fixation_update = WindowZoomFactory.ToStr(WindowZoomFactory.path_3_fixation, Full.width0, Full.height0); // "812,0,35,36" path_4_fixation_update = new Rect(812 + width0, 0, 35, 36); //裁切数据 panel_StackPanel5_body_path_update = WindowZoomFactory.ToStr(WindowZoomFactory.panel_StackPanel5_body_path_fixation, Full.width0, Full.height0); top_panel_StackPanel1_path_update = WindowZoomFactory.ToStr(WindowZoomFactory.top_panel_StackPanel1_path_fixation, Full.width0, Full.height0); top_panel_StackPanel3_path_update = WindowZoomFactory.ToStr(WindowZoomFactory.top_panel_StackPanel3_path_fixation, Full.width0, Full.height0); bottem_panel_StackPanel4_ProgressBar_path_update = WindowZoomFactory.ToStr(WindowZoomFactory.bottem_panel_StackPanel4_ProgressBar_path_fixation, Full.width0, Full.height0); // TODO 特殊处理 基于原坐标Y不变动 bottem_panel_StackPanel6_path_update = WindowZoomFactory.ToStr(WindowZoomFactory.bottem_panel_StackPanel6_path_fixation, Full.width0, 0); if (R.IsTest()) { R.Printf(path_1_fixation_update); R.Printf(path_2_fixation_update); R.Printf(path_3_fixation_update); } } //GeometryDrawing geometryDrawing = (GeometryDrawing)group.Children[0]; //Pen pen = geometryDrawing.Pen; //((GeometryDrawing)group.Children[0]).Geometry = WindowZoomFactory.PathGeometry( path_1_fixation_update + " Z "); //((GeometryDrawing)group.Children[1]).Geometry = WindowZoomFactory.PathGeometry( path_2_fixation_update + " Z "); //((GeometryDrawing)group.Children[2]).Geometry = WindowZoomFactory.PathGeometry( path_3_fixation_update + " Z "); //((ImageDrawing)group.Children[3]).Rect = path_4_fixation_update; // 构建一个新的 DrawingBrush 对象 DrawingGroup drawingGroup = new DrawingGroup(); drawingGroup.Children.Add(new GeometryDrawing( ((GeometryDrawing)group.Children[0]).Brush, ((GeometryDrawing)group.Children[0]).Pen, WindowZoomFactory.PathGeometry(path_1_fixation_update + " Z ") )); drawingGroup.Children.Add(new GeometryDrawing( ((GeometryDrawing)group.Children[1]).Brush, ((GeometryDrawing)group.Children[1]).Pen, WindowZoomFactory.PathGeometry(path_2_fixation_update + " Z ") )); drawingGroup.Children.Add(new GeometryDrawing( ((GeometryDrawing)group.Children[2]).Brush, ((GeometryDrawing)group.Children[2]).Pen, WindowZoomFactory.PathGeometry(path_3_fixation_update + " Z ") )); drawingGroup.Children.Add(new ImageDrawing( R.GetImageSource("resource/ui/UI-APP_files/image0.png"), path_4_fixation_update )); drawingBrush = new DrawingBrush(); drawingBrush.Drawing = drawingGroup; System.Windows.Application.Current.Dispatcher.Invoke(new Action(() => { this.window.Background = drawingBrush; })); //this.testToImage(); group = null; } drawing = null; } public void content() { // 主界面裁切 this.window.Clip = WindowZoomFactory.PathGeometry( path_1_fixation_update + " Z " + path_2_fixation_update + " Z " + path_3_fixation_update + " Z " ); // 内容区域 this.window.body_Panel.MaxWidth = Win.body_Panel_Width + width0; this.window.body_Panel.Width = Win.body_Panel_Width + width0; this.window.body_Panel.MaxHeight = Win.body_Panel_Height + height0; this.window.body_Panel.Height = Win.body_Panel_Height + height0; Win.UpdateBodyPanelSize(this.window.body_Panel, true, width0, height0); this.window.body_Panel.Clip = WindowZoomFactory.PathGeometry( panel_StackPanel5_body_path_update + " Z " ); // 更新内容区域宽度 FrameworkElement? content = this.window.body_Panel.Children[0] as FrameworkElement; if (content != null) { content.Width = Win.body_Panel_Width + width0; content.Height = Win.body_Panel_Height + height0; SplitPanelComponent? splitPanelComponent = content as SplitPanelComponent; Win.UpdateSplitPanelComponentRightSize(splitPanelComponent, true, width0, height0); splitPanelComponent = null; } WindowZoomFactory.recursionPanel(this.window.body_Panel, Win.body_Panel_Width + width0, Win.body_Panel_Height + height0, 0); content = null; } public void leftBomtton() { // 底部工具栏占位 this.window.bottem_panel_vacancy.MaxWidth = Win.bottem_panel_vacancy_Width + width0; this.window.bottem_panel_vacancy.Width = Win.bottem_panel_vacancy_Width + width0; this.window.bottem_panel.MaxWidth = Win.bottem_panel_vacancy_Width + width0; this.window.bottem_panel.Width = Win.bottem_panel_vacancy_Width + width0; this.window.bottem_panel_StackPanel4.MaxWidth = Win.bottem_panel_StackPanel4_Width + width0; this.window.bottem_panel_StackPanel4.Width = Win.bottem_panel_StackPanel4_Width + width0; //double left, double top, double right, double bottom this.window.bottem_panel_StackPanel4.Margin = new Thickness( Win.bottem_panel_StackPanel4_Margin.Left, Win.bottem_panel_StackPanel4_Margin.Top + height0, Win.bottem_panel_StackPanel4_Margin.Right, Win.bottem_panel_StackPanel4_Margin.Bottom ); this.window.bottem_panel_StackPanel4.Clip = WindowZoomFactory.PathGeometry( bottem_panel_StackPanel6_path_update + " Z " ); } public void leftTop() { this.window.sys_ToolBar.MaxWidth = Win.top_panel_StackPanel1_sys_ToolBar_Width + width0; this.window.sys_ToolBar.Width = Win.top_panel_StackPanel1_sys_ToolBar_Width + width0; this.window.top_panel_StackPanel1.MaxWidth = Win.top_panel_StackPanel1_Width + width0; this.window.top_panel_StackPanel1.Width = Win.top_panel_StackPanel1_Width + width0; this.window.top_panel_StackPanel1.Clip = WindowZoomFactory.PathGeometry( top_panel_StackPanel1_path_update + " Z " ); } public void rightBomtton() { this.window.bottem_panel.MaxWidth = width; this.window.bottem_panel.Width = width; } public void rightTop() { } public void update() { if (width0 <= 0 || height0 <= 0) { R.SysLogs.Info("全屏尺寸小于窗口定义尺寸, 忽略全屏操作处理."); return; } // 更新窗口大小 this.window.Width = width; this.window.Height = height; this.window.Top = 0; this.window.Left = 0; this.window.WindowStartupLocation = WindowStartupLocation.Manual; this.background(); this.leftTop(); this.rightTop(); this.content(); this.leftBomtton(); this.rightBomtton(); this.window.UpdateLayout(); this.window.MouseDown -= this.window.Window_MouseDown; } } // 路径参数定义 public class PathPoint { /// <summary> /// 节点值 /// </summary> public double[] data; /// <summary> /// 类型 /// </summary> public string type; public PathPoint(string type, double[] data) { this.type = type; this.data = data; } public PathPoint(string type, string[] d) { this.type = type; data = new double[d.Length]; // 重新转换 if (type.Equals("C")) { d = String.Join(",", d).Replace(" ", ",").Substring(1).Split(","); data = new double[d.Length]; } for (int i = 0; i < d.Length; i++) { data[i] = Double.Parse(d[i].Trim()); } } } /// <summary> /// 窗口模式 /// </summary> public class Win : WinZoom { private static DrawingBrush drawingBrush = null; private MainWindow window = MainWindow.APP; public const double body_Panel_Height = 751; public const double body_Panel_Width = 1200; public const double bottem_panel_StackPanel4_Width = 599; public const double bottem_panel_vacancy_Width = 600; public const double height = 800; public const double top_panel_StackPanel1_sys_ToolBar_Width = 810; public const double top_panel_StackPanel1_Width = 816; public const double width = 1200; // 底部工具栏占位容器 public static readonly Thickness bottem_panel_StackPanel4_Margin = new Thickness(0, 767, -8, 0); public void background() { if (drawingBrush != null) { System.Windows.Application.Current.Dispatcher.Invoke(new Action(() => { this.window.Background = drawingBrush; })); return; } DrawingBrush? drawing = Application.Current.Resources["UI_APP"] as DrawingBrush; if (drawing != null) { drawingBrush = drawing; System.Windows.Application.Current.Dispatcher.Invoke(new Action(() => { this.window.Background = drawingBrush; })); } drawing = null; } /// <summary> /// 更新body_Panel子节点尺寸 /// </summary> /// <param name="bodyPanel"></param> public static void UpdateBodyPanelSize(Panel bodyPanel, bool isFull, double w0, double h0) { if (bodyPanel != null) { Panel? control = bodyPanel.Children[0] as Panel; if (control != null) { if (isFull) { control.MaxWidth = Win.body_Panel_Width + w0; control.Width = Win.body_Panel_Width + w0; control.MaxHeight = Win.body_Panel_Height + h0; control.Height = Win.body_Panel_Height + h0; } else { control.MaxWidth = Win.body_Panel_Width; control.Width = Win.body_Panel_Width; control.MaxHeight = Win.body_Panel_Height; control.Height = Win.body_Panel_Height; } } control = null; } } /// <summary> /// 设置SplitPanelComponent 右侧宽度 /// </summary> /// <param name="splitPanelComponent">SplitPanelComponent 面板</param> /// <param name="isFull">是否全屏</param> /// <param name="w0">全屏宽度补偿</param> /// <param name="h0">全屏高度补偿</param> public static void UpdateSplitPanelComponentRightSize(SplitPanelComponent? splitPanelComponent, bool isFull, double w0, double h0) { if (splitPanelComponent != null) { double width = splitPanelComponent.splitGridRoot.ColumnDefinitions[0].ActualWidth + splitPanelComponent.splitGridRoot.ColumnDefinitions[1].ActualWidth + splitPanelComponent.splitGridRoot.ColumnDefinitions[2].ActualWidth; double width01 = splitPanelComponent.splitGridRoot.ColumnDefinitions[0].ActualWidth + splitPanelComponent.splitGridRoot.ColumnDefinitions[1].ActualWidth; UserControl? userControl = splitPanelComponent.sys_SplitPanelRightContent.Children[0] as UserControl; if (userControl != null) { if (isFull) { // 右侧根容器 splitPanelComponent.sys_SplitPanelRightContent.MaxWidth = body_Panel_Width + w0 - width01; splitPanelComponent.sys_SplitPanelRightContent.Width = body_Panel_Width + w0 - width01; splitPanelComponent.sys_SplitPanelRightContent.MaxHeight = Win.body_Panel_Height + h0; splitPanelComponent.sys_SplitPanelRightContent.Height = Win.body_Panel_Height + h0; // 内部 userControl.MaxHeight = Win.body_Panel_Height + h0; userControl.Height = Win.body_Panel_Height + h0; userControl.MaxWidth = body_Panel_Width + w0 - width01; userControl.Width = body_Panel_Width + w0 - width01; } else { // 右侧根容器 splitPanelComponent.sys_SplitPanelRightContent.MaxWidth = body_Panel_Width - width01; splitPanelComponent.sys_SplitPanelRightContent.Width = body_Panel_Width - width01; splitPanelComponent.sys_SplitPanelRightContent.MaxHeight = Win.body_Panel_Height; splitPanelComponent.sys_SplitPanelRightContent.Height = Win.body_Panel_Height; // 内部 userControl.MaxHeight = body_Panel_Height; userControl.Height = body_Panel_Height; userControl.MaxWidth = body_Panel_Width - width01; userControl.Width = body_Panel_Width - width01; } } userControl = null; } } public void content() { this.window.Clip = WindowZoomFactory.PathGeometry( WindowZoomFactory.path_1.Replace("F1", "").Trim() + WindowZoomFactory.path_2.Replace("F1", "").Trim() + WindowZoomFactory.path_3.Replace("F1", "").Trim() ); this.window.body_Panel.MaxWidth = body_Panel_Width; this.window.body_Panel.Width = body_Panel_Width; this.window.body_Panel.MaxHeight = body_Panel_Height; this.window.body_Panel.Height = body_Panel_Height; this.window.body_Panel.Clip = WindowZoomFactory.PathGeometry(WindowZoomFactory.panel_StackPanel5_body_path); Win.UpdateBodyPanelSize(this.window.body_Panel, false, 0, 0); // 更新内容区域宽度 FrameworkElement? content = this.window.body_Panel.Children[0] as FrameworkElement; if (content != null) { content.Width = body_Panel_Width; content.Height = body_Panel_Height; SplitPanelComponent? splitPanelComponent = content as SplitPanelComponent; UpdateSplitPanelComponentRightSize(splitPanelComponent, false, 0, 0); splitPanelComponent = null; } WindowZoomFactory.recursionPanel(this.window.body_Panel, body_Panel_Width, body_Panel_Height, 0); content = null; } public void leftBomtton() { // 底部工具栏占位 this.window.bottem_panel_vacancy.MaxWidth = bottem_panel_vacancy_Width; this.window.bottem_panel_vacancy.Width = bottem_panel_vacancy_Width; this.window.bottem_panel.MaxWidth = bottem_panel_vacancy_Width; this.window.bottem_panel.Width = bottem_panel_vacancy_Width; this.window.bottem_panel_StackPanel4.MaxWidth = bottem_panel_StackPanel4_Width; this.window.bottem_panel_StackPanel4.Width = bottem_panel_StackPanel4_Width; this.window.bottem_panel_StackPanel4.Margin = bottem_panel_StackPanel4_Margin; this.window.bottem_panel_StackPanel4.Clip = WindowZoomFactory.PathGeometry(WindowZoomFactory.bottem_panel_StackPanel6_path); } public void leftTop() { this.window.sys_ToolBar.MaxWidth = top_panel_StackPanel1_sys_ToolBar_Width; this.window.sys_ToolBar.Width = top_panel_StackPanel1_sys_ToolBar_Width; this.window.top_panel_StackPanel1.MaxWidth = top_panel_StackPanel1_Width; this.window.top_panel_StackPanel1.Width = top_panel_StackPanel1_Width; this.window.top_panel_StackPanel1.Clip = WindowZoomFactory.PathGeometry(WindowZoomFactory.top_panel_StackPanel1_path); } public void rightBomtton() { this.window.bottem_panel.MaxWidth = width; this.window.bottem_panel.Width = width; } public void rightTop() { } public void update() { // 更新窗口大小 this.window.Width = width; this.window.Height = height; this.window.WindowStartupLocation = WindowStartupLocation.CenterScreen; this.window.Top = (Full.height - height) / 2; this.window.Left = (Full.width - width) / 2; this.background(); this.leftTop(); this.rightTop(); this.content(); this.leftBomtton(); this.rightBomtton(); this.window.UpdateLayout(); this.window.MouseDown += this.window.Window_MouseDown; } }
-
-
-
疑问与解答
- 完整代码是否完整
完整代码只是不规则窗口动态更新的关键代码,可以扩展为专门框架,但没必要,代码做成框架需要更多类接口支持虽然灵活了完整了规范了,但是不规则窗口更新本来就有降低一点点性能,要是降低的太多意义不大,而且投入太多,应用到项目中并不多.老板经理才不管你哪些东西,只管捞钱即可.此代码只是整个项目中的关键代码.制作实际参考. - 为什么只有窗口/全屏模式
可以有窗口和鼠标拖动大小与全屏模式, 全屏就是尺寸最大范围的控制,拖动窗口大小变化就等于给了个全屏的尺寸, 意义不大,拖动要节点计算,要是太复杂,电脑配置太低完全就是累赘, 举例各大网商平台商品检索为什么越往后越没啥有意义的数据,看见数据那么多为什么搜搜就无页数了. 不是一位的数据全要,而是做更有意义的事情.有时候我们就在矫情处理百万数据,千万数据,亿万数据, 真有那个必要吗,不关注更有意义的数据.有线的资源做无限的功能,认知是否考虑. - 代码能分享不
抱歉,代码暂时不分享,设计到几个框架模块在里面,可以交流探讨.
- 完整代码是否完整
-
视频效果展示
抖音视频平台:WPF异形界面 https://v.douyin.com/iPHsL8mP/
快手视频平台:WPF异形界面 https://www.kuaishou.com/f/X-7QEZQz1AO0Q1dD -
记得一键三连=>给劳动成果加点盐