WPF如何製作新手引導介面？

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

原文作者：眾尋

原文連結：https://www.cnblogs.com/ZXdeveloper/p/8391864.html

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

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

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

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

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

一、遮罩表單

將主表單進行遮罩，半透明的效果，常用的做遮罩的話，一般是設置一個底色，然後設置透明度，類似於這篇部落格 WPF 透明表單製作，但是，在實際的操作用就會遇到問題，如果使用正常的半透明方式的話，黃色框部分，是無法透出白色的主表單內容的，因為已經有底色了，所以，本文使用的半透明方法是 Clip 的擦除，效果如下圖，參考的部落格WPF 用 Clip 屬性實現蒙板特效。

先設置一個透明的表單

<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);
    else
        show(index + 1, list[index].Uc, list[index].Content);
}

我們要在外部宣告一個 index 的變數來記錄當前的 List 集合的索引，首先要判斷，當前的內容裡，是否不為空，如果是的話，要清除掉，如果不清除的話，就會看到一堆的提示框，然後，判別是否是 List 集合裡的最後一個控制項了，如果是的話，那就不再顯示「下一步按鈕了」。

五、擴充部分

由於是一個小 Demo，所以發現了一些問題，但是就沒有再解決了，例如如果主表單不是無邊框的話，取值定位會有問題。

這是由於彈出的引導表單取得了主表單的大小，但是 Point 去取得控制項座標位置的時候，主表單是不包含頭部的，由於遮罩沒有頭部，所以定位出錯了，這個我還沒有找到好的解決辦法，如果有大神知道如何解決的話，請賜教，謝謝了。

顯示引導內容的部分，也可以換成一個 Grid，這樣的話，就可以傳入 UserControl 了，有興趣的朋友可以自行修改。

原始碼：Demo

站長使用體驗

效果確實不錯，站長透過原作者的原始碼改了一點（程式碼），需要遮罩的控制項換成 Image 控制項也是相同效果，nice：