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

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

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

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

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

一、遮罩窗體

將主窗體進行遮罩，半透明的效果，常用的做遮罩的話，一般是設置一個底色，然後設置透明度，類似於這篇博客http://blog.csdn.net/cmis7645/article/details/7781990，但是，在實際的操作用就會遇到問題，如果使用正常的半透明方式的話，黃色框部分，是不發透出白色的主窗體內容的，因為已經有底色了，所以，本文使用的半透明方法是Clip的擦除，效果如下圖，參考的博客http://blog.csdn.net/feitiankoulan/article/details/25201593

先設置一個透明的窗體

<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