潍坊手机网站,网站后台模板如何使用,wordpress建站上传不了图片,百度山西授权代理本文经原作者授权以原创方式二次分享#xff0c;欢迎转载、分享。原文作者#xff1a;眾尋原文链接#xff1a;https://www.cnblogs.com/ZXdeveloper/p/8391864.html这两天不忙#xff0c;所以#xff0c;做了一个简易的新手引导小Demo。因为#xff0c;不是项目上应用欢迎转载、分享。原文作者眾尋原文链接https://www.cnblogs.com/ZXdeveloper/p/8391864.html这两天不忙所以做了一个简易的新手引导小Demo。因为不是项目上应用所以做的很粗糙也就是给需要的人一个思路而已。新手引导功能的话就是告诉用户页面上操作的顺序第一步要做什么第二步要做什么以此类推然后最终关闭新手引导页面。以我的习惯还是先给大家看看效果。效果展示的很简单就是将要告诉用户操作的控件做一个提示。要实现这个功能化那思路就是大概以下几项一、遮罩窗体将主窗体进行遮罩半透明的效果常用的做遮罩的话一般是设置一个底色然后设置透明度类似于这篇博客 WPF透明窗体制作[1]但是在实际的操作用就会遇到问题如果使用正常的半透明方式的话黄色框部分是不发透出白色的主窗体内容的因为已经有底色了所以本文使用的半透明方法是Clip的擦除效果如下图参考的博客WPF 用Clip属性实现蒙板特效[2]。先设置一个透明的窗体Window x:ClassSimpleGuide.GuideWin xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:localclr-namespace:SimpleGuide mc:Ignorabled TitleGuideWin WindowStyleNone AllowsTransparencyTrue x:Namegw Background#01FFFFFF ShowInTaskbarFalseGridBorder x:Namebor BorderBrushWhite BorderThickness2 CornerRadius5 Opacity0.8Border.EffectDropShadowEffect ShadowDepth0 Color#FF414141 BlurRadius8 //Border.EffectBorder BackgroundBlack Opacity0.5 Margin0 CornerRadius5 //BorderCanvas x:Namecan/Canvas/Grid
/Window从XAML的代码中可以看到Background这个属性没用“Transparent”而用的是“#01FFFFFF”因为如果用Transparent的话那真的就是透明了可以直接点击到主窗体里的控件这个是我们所不希望的所以设置了“#01FFFFFF”一个近乎透明的颜色。二、显示要操作的控件既然要对某个控件进行指引的话那就要把控件先给圈起来圈起来的首要任务就是获得控件在当前窗体的坐标位置。Point point fe.TransformToAncestor(Window.GetWindow(fe)).Transform(new Point(0, 0));当获取完坐标以后则需要将控件给圈起来我的方法就是取当前的坐标-5宽和高10来绘制一个空白的区域其实这个部分应该是指擦除RectangleGeometry rg1 new RectangleGeometry();
rg1.Rect new Rect(point.X - 5, point.Y - 5, fe.ActualWidth 10, fe.ActualHeight 10);
borGeometry Geometry.Combine(borGeometry, rg1, GeometryCombineMode.Exclude, null);三、绘制一个指引的UC指引UC设计起来就比较方便了样子其实挺简单的就是用Path绘制一个范围但是虚线框最开始的想法是用Line去做但是感觉太费事了就直接用的StrokeDashArray这个属性Stroke是Path本身的边框线当然真的是边框所以又不好设置Margin或者Padding所以最后的做法就是在外层又绘制了一个区域只是这个区域不包含边框线而已填充色相同Path Fill#FF2FBEEDPath.DataGeometryGroupPathGeometry FiguresM 8,22 A 12,12 0 1 1 22,8 L 102 8 L 102 62 L 8 62 Z //GeometryGroup/Path.Data
/Path
Path StrokeThickness1 StrokeWhite StrokeDashArray2,1 Fill#FF2FBEEDPath.DataGeometryGroupPathGeometry FiguresM 10,20 A 10,10 0 1 1 20,10 L 100 10 L 100 60 L 10 60 Z //GeometryGroup/Path.Data
/Path显示内容的部分是一个Textblock当时遇到了一个问题就是换行问题Textblock必须要有Width才会换行但是由于最外层是Viewbox所以尝试过获取UC的Width或者ActualWidth都不行所以最后的解决办法是传入一个窗体的宽度和高度进来而不是在外部设置此UC的宽和高。public HintUC(string xh, string content, Visibility vis Visibility.Visible, int width 260, int height 160)
{InitializeComponent();this.Width width;this.Height height;this.tb_nr.Width width / 4;this.tb_xh.Text xh;this.tb_nr.Text content;this.btn_next.Visibility vis;
}四、下一步的触发触发下一步相当于是子控件调用主控件的事件这样的话就是写一个委托在主窗体里去实现具体的方法。private void show(int xh, FrameworkElement fe, string con, Visibility vis Visibility.Visible)
{Point point fe.TransformToAncestor(Window.GetWindow(fe)).Transform(new Point(0, 0));//获取控件坐标点RectangleGeometry rg new RectangleGeometry();rg.Rect new Rect(0, 0, this.Width, this.Height);borGeometry Geometry.Combine(borGeometry, rg, GeometryCombineMode.Union, null);bor.Clip borGeometry;RectangleGeometry rg1 new RectangleGeometry();rg1.Rect new Rect(point.X - 5, point.Y - 5, fe.ActualWidth 10, fe.ActualHeight 10);borGeometry Geometry.Combine(borGeometry, rg1, GeometryCombineMode.Exclude, null);bor.Clip borGeometry;HintUC hit new HintUC(xh.ToString(), con, vis);Canvas.SetLeft(hit, point.X fe.ActualWidth 3);Canvas.SetTop(hit, point.Y fe.ActualHeight 3);hit.nextHintEvent - Hit_nextHintEvent;hit.nextHintEvent Hit_nextHintEvent;can.Children.Add(hit);index;
}private void Hit_nextHintEvent()
{if (list[index - 1] ! null){can.Children.Clear();}if (index list.Count - 1)show(index 1, list[index].Uc, list[index].Content, Visibility.Collapsed);elseshow(index 1, list[index].Uc, list[index].Content);
}我们要在外部声明一个index的变量来记录当前的List集合的索引首先要判断当前的内容里是否不为空如果是的话要清除掉如果不清除的话就会看到一堆的提示框然后判别是否是List集合里的最后一个控件了如果是的话那就不再显示“下一步按钮了”。五、扩展部分由于是一个小Demo所以发现了一些问题但是就没有再解决了例如如果主窗体不是无边框的话取值定位会有问题。这是由于弹出的引导窗体获取了主窗体的大小但是Point去获取控件坐标位置的时候主窗体是不包含头部的由于遮罩没有头部所以定位出错了这个我还没有找到好的解决办法如果有大神知道如何解决的话请赐教谢谢了。显示引导内容的部分也可以换成一个Grid这样的话就可以传入UserControl了有兴趣的朋友可以自行修改。源码Demo[3]站长使用体验效果确实不错站长通过原作者的源码改了一点代码[4]需要遮罩的控件换成Image控件也是相同效果nice参考资料[1] WPF透明窗体制作: http://blog.csdn.net/cmis7645/article/details/7781990[2] WPF 用Clip属性实现蒙板特效: http://blog.csdn.net/feitiankoulan/article/details/25201593[3] Demo: https://files.cnblogs.com/files/ZXdeveloper/SimpleGuide.zip[4] 代码: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/Demo/SimpleGuide
