本文經原作者授權以原創方式二次分享，歡迎轉載、分享。

原文作者：眾尋

原文鏈接：https://www.cnblogs.com/ZXdeveloper/p/8391864.html

---

這兩天不忙，所以，做了一個簡易的新手引導小Demo。因為，不是項目上應用，所以，做的很粗糙，也就是給需要的人，一個思路而已。

新手引導功能的話，就是告訴用戶，頁面上操作的順序，第一步要做什么，第二步要做什么，以此類推，然后，最終關閉新手引導頁面。

以我的習慣，還是先給大家看看效果。

效果展示的很簡單，就是將要告訴用戶操作的控件做一個提示。

要實現這個功能化，那思路就是大概以下幾項：

一、遮罩窗體

將主窗體進行遮罩，半透明的效果，常用的做遮罩的話，一般是設置一個底色，然后設置透明度，類似于這篇博客 WPF透明窗體制作^[1]，但是，在實際的操作用就會遇到問題，如果使用正常的半透明方式的話，黃色框部分，是不發透出白色的主窗體內容的，因為已經有底色了，所以，本文使用的半透明方法是Clip的擦除，效果如下圖，參考的博客WPF 用Clip屬性實現蒙板特效^[2]。

先設置一個透明的窗體

<Window?x:Class="SimpleGuide.GuideWin"?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"?xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"?xmlns:d="http://schemas.microsoft.com/expression/blend/2008"?xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"?xmlns:local="clr-namespace:SimpleGuide"?mc:Ignorable="d"?Title="GuideWin"?WindowStyle="None"?AllowsTransparency="True"?x:Name="gw"?Background="#01FFFFFF"?ShowInTaskbar="False"><Grid><Border?x:Name="bor"?BorderBrush="White"?BorderThickness="2"?CornerRadius="5"?Opacity="0.8"><Border.Effect><DropShadowEffect?ShadowDepth="0"?Color="#FF414141"?BlurRadius="8"?/></Border.Effect><Border?Background="Black"?Opacity="0.5"?Margin="0"?CornerRadius="5"?/></Border><Canvas?x:Name="can"></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="#FF2FBEED"><Path.Data><GeometryGroup><PathGeometry?Figures="M?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?StrokeThickness="1"?Stroke="White"?StrokeDashArray="2,1"?Fill="#FF2FBEED"><Path.Data><GeometryGroup><PathGeometry?Figures="M?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