WPF实现新用户页面引导

---

前言

在上班时候摸鱼做了个小玩意儿。

---

一、效果浏览

可以按指定的顺序和文本显示提示内容。点击“我知道了”，跳转到下个引导内容，点击右上角关闭按钮，结束引导。

还可以根据控件当前距离屏幕的位置调整引导窗口的显示位置

屏幕底部效果：

屏幕右下角效果：

如果引导页面和应用的风格不匹配（不喜欢），还可以替换成自定义引导页面，像这样：

二、使用方式

1.源代码

源代码地址

2.引入库

在项目中添加 xz.lib 的引用。
后在xaml文件中添加名称空间引用

xmlns:xzlib="clr-namespace:xz.lib.WPF.AttachDependency;assembly=xz.lib"

3.前端代码

 <!--Index:引导顺序，一个页面中不要重复
 Description：提示的文字
 PageName：在那个页面中显示这一系列的引导内容
 -->
<Button Content="Test" Width="80" Height="40" Margin="10" 
        xzlib:Guide.Index="1" 
        xzlib:Guide.Description="这是按钮1"
        xzlib:Guide.PageName="LoginView"/>
<ComboBox x:Name="comb_test" Width="80"
          xzlib:Guide.Index="2"
          xzlib:Guide.Description="这是下拉框1"
          xzlib:Guide.PageName="LoginView">
    	<ComboBoxItem Content="1"/>
</ComboBox>

4.后端代码

在窗体的Loaded或其他按钮的Click事件中添加以下代码，注意不要在窗体的构造方法中添加

//如果是UserControl控件
var win = Window.GetWindow(this);

//第二个参数对应的前端页面指定的PageName
GuideUtil.GuideProcess<GuideWindow>(win, "LoginView");

完成后就可以启动项目了

可以将泛型指定为自定义的其他窗体，但是必须继承Window，实现IGuide接口，比如：

public partial class WindowTest : Window, IGuide
{

    public System.Windows.Forms.DialogResult dialogResult { get; set; } = System.Windows.Forms.DialogResult.OK;
    public WindowTest()
    {
        InitializeComponent();
    }

    public DialogResult GetDialogResult()
    {
        //返回System.Windows.Forms.DialogResult.Cancel表示结束引导流程
        return dialogResult;
    }

    public void SetGuideInfo(int index, string desc, int total)
    {
		//在这里添加自定义的提示信息
    }
}

---

三、具体的实现方式

1.Guide.cs

自定义的附加属性，定义了Index，Description，PageName这几个属性，可以在前端设置

2.GuideBackWindow.xaml，GuideWindow.xaml

GuideBackWindow：用来遮挡窗体
GuideWindow：显示提示内容

3.GuideUtil.cs

public static void GuideProcess<T>(Window mainWindow, string pageName = "", bool removeThis = false) where T : Window, IGuide, new()
{
//mainWindow：展示到的目标窗体
//pageName ：对于那种一个Window下面有多个UserControl Navigate的类型，可以用pageName来分组
//removeThis ：对于每次打开都需要new 和 close释放的元素，设置为true时，将这次new的内容删除，否则第二次新建元素时会冲突
}

private static Point CalculatePoint(lib.WPF.Entity.GuideItem guideItem, Window guide)
{
//设置窗体的位置
}

其他

小玩意还有点bug，比如由于使用showDialog来展示导航窗体，导致第一次开启时会显示不佳。
欢迎指正和建议。