WPF实现新手引导

1. 半透明灰的遮罩层

• 新建一个遮盖的window窗体
• canvas是后期可以在思显示高亮区域

//定义一个window将它的样式设置透明等可以覆盖到其他窗体上，其中遮罩层使用border控件
//原因
//1. 支持圆角和方向可以适应不同的窗体样式 2. 支持阴影效果
<Grid Background="#01000000" MouseLeftButtonDown="Grid_MouseLeftButtonDown">
        <Border x:Name="border">
            <Border Margin="0"
                    Background="#000000"
                    Opacity="0.5" />
        </Border>
        <Canvas x:Name="canvas" />
    </Grid>

2. 汽包的设置

• 建一个"自定义控件(UserControl)"设置自定义汽包样式
• 规划好样式设置

点击查看代码

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="row1" />
            <RowDefinition x:Name="row2" Height="auto" />
            <RowDefinition x:Name="row3" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="colum1" />
            <ColumnDefinition x:Name="colum2" Width="auto" />
            <ColumnDefinition x:Name="colum3" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="1"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    Orientation="Horizontal">
            <Grid>
                <Ellipse Width="20"
                         Height="20"
                         Fill="White"
                         Opacity="0.5" />
                <Ellipse Width="10"
                         Height="10"
                         HorizontalAlignment="Center"
                         Fill="White" />
            </Grid>
            <Line Height="2"
                  VerticalAlignment="Center"
                  Stroke="White"
                  StrokeDashArray="2,1"
                  StrokeThickness="2"
                  X1="0"
                  X2="30"
                  Y1="0"
                  Y2="0" />
            <Path Height="12"
                  VerticalAlignment="Center"
                  Data="M 10,0 0,6 10,12 Z"
                  Fill="White" />
        </StackPanel>
        <StackPanel Grid.Column="1"
                    VerticalAlignment="Bottom"
                    Orientation="Vertical">
            <Grid>
                <Ellipse Width="20"
                         Height="20"
                         Fill="White"
                         Opacity="0.5" />
                <Ellipse Width="10"
                         Height="10"
                         HorizontalAlignment="Center"
                         Fill="White" />
            </Grid>
            <Line Width="2"
                  HorizontalAlignment="Center"
                  Stroke="White"
                  StrokeDashArray="2,1"
                  StrokeThickness="2"
                  X1="2"
                  X2="2"
                  Y1="0"
                  Y2="30" />
            <Path HorizontalAlignment="Center"
                  Data="M 0,10 6,0 12,10 Z"
                  Fill="White" />
        </StackPanel>
        <StackPanel Grid.Row="1"
                    Grid.Column="2"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Orientation="Horizontal">
            <Path Height="12"
                  VerticalAlignment="Center"
                  Data="M 0,0 10,6 0,12 Z"
                  Fill="White" />
            <Line Height="1"
                  VerticalAlignment="Center"
                  Stroke="White"
                  StrokeDashArray="2,1"
                  StrokeThickness="2"
                  X1="0"
                  X2="30"
                  Y1="0"
                  Y2="0" />
            <Grid>
                <Ellipse Width="20"
                         Height="20"
                         Fill="White"
                         Opacity="0.5" />
                <Ellipse Width="10"
                         Height="10"
                         HorizontalAlignment="Center"
                         Fill="White" />
            </Grid>
        </StackPanel>
        <StackPanel Grid.Row="2"
                    Grid.Column="1"
                    VerticalAlignment="Top"
                    Orientation="Vertical">
            <Path HorizontalAlignment="Center"
                  Data="M 0,0 6,10 12,0 Z"
                  Fill="White" />
            <Line Width="2"
                  HorizontalAlignment="Center"
                  Stroke="White"
                  StrokeDashArray="2,1"
                  StrokeThickness="2"
                  X1="2"
                  X2="2"
                  Y1="0"
                  Y2="30" />
            <Grid>
                <Ellipse Width="20"
                         Height="20"
                         Fill="White"
                         Opacity="0.5" />
                <Ellipse Width="10"
                         Height="10"
                         HorizontalAlignment="Center"
                         Fill="White" />
            </Grid>
        </StackPanel>
        <Border Grid.Row="1"
                Grid.Column="1"
                Padding="10"
                Background="White"
                CornerRadius="5">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <TextBlock x:Name="txtNum"
                           HorizontalAlignment="Left"
                           FontSize="12"
                           FontWeight="Regular"
                           Foreground="#666666 ">
                    <Run Text="1" />
                    <Run Text="/" />
                    <Run Text="3" />
                </TextBlock>
                <aps:ImageButton Margin="-13,-3,-15,0"
                                 HorizontalAlignment="Right"
                                 VerticalAlignment="Top"
                                 Background="White"
                                 Click="Close_Click"
                                 HoverImage="/Resources/Images/Close_Hover.svg"
                                 ImageHeight="9"
                                 ImageWidth="9"
                                 NormalImage="/Resources/Images/Close.svg"
                                 PressedImage="/Resources/Images/Close_Pressed.svg" />
                <TextBox Grid.Row="1"
                         MaxWidth="190"
                         Margin="10"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Background="Transparent"
                         BorderThickness="0"
                         Cursor="Arrow"
                         FontSize="14"
                         FontWeight="Regular"
                         Foreground="#333333 "
                         IsReadOnly="True"
                         Text="提示的语句"
                         TextWrapping="Wrap" />
                <Button Grid.Row="2"
                        Height="30"
                        MinWidth="100"
                        Padding="10,5"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Click="Next_Click"
                        Content="按钮的内容"
                        FontSize="12"
                        Foreground="#FFFFFF " />
            </Grid>
        </Border>
    </Grid>

3. 汽包出现的位置

• 通过TransformToAncestor方法拿到控件坐标之后从左上角(0,0)点的位置在带入控件的宽高计算出起点的坐标
  
  点击查看代码

  //汽包应该显示在那个位置
  public void StartGuide(GuideModel guide) {
              //这个是拿到自定义控件
              var focusElemt = guide.UserControl;
              var window = Window.GetWindow(focusElemt);
              var point = focusElemt.TransformToAncestor(window).Transform(new Point(0, 0));
              var rectangleGeometry = new RectangleGeometry();
              rectangleGeometry.Rect = new Rect(0, 0, this.Width, this.Height);
              borderGeometry = Geometry.Combine(borderGeometry, rectangleGeometry, GeometryCombineMode.Union, null);
              var rectangleGeometry1 = new RectangleGeometry();
              //自适应一下
              rectangleGeometry1.Rect = new Rect(point.X - 5, point.Y - 5, focusElemt.ActualWidth + 10, focusElemt.ActualHeight + 10);
              rectangleGeometry1.RadiusX = 5;
              rectangleGeometry1.RadiusY = 5;
              borderGeometry = Geometry.Combine(borderGeometry, rectangleGeometry1, GeometryCombineMode.Exclude, null);
              border.Clip = borderGeometry;
              //将初始化完的汽包传进来
              InitHintControl(guide, point);
              //实现步骤的一个累加
              currentStep++;
          }

  初始化汽包

new一个新的对象传入自定义控件“Steptip”以及传入对应的参数

 private async void InitHintControl(GuideModel guideModel, Point point) {
            //传入对应的参数
            stepTip = new StepTip(guideModel.ArrowDirection, guideModel.TipText, guideModel.ButtonContent, guideModel.Step, guideModel.TotalStep);
            //这个是解决“步骤引导”每个都从左上角(0,0)开始寻找 这个是让它寻找完后再显示出来
            stepTip.Visibility = Visibility.Hidden;
            stepTip.OnNext += StepTip_OnNext;
            stepTip.OnClosed += StepTip_OnClosed;
            canvas.Children.Add(stepTip);
            //防止未生成
            await Task.Delay(50);
            //对自定义控件每个方向的确定 寻找以及位置的显示的高亮区域
            switch (guideModel.ArrowDirection) {
                case StepTip.Direction.Top:
                    Canvas.SetLeft(stepTip, point.X + 5 - ((stepTip.ActualWidth - guideModel.UserControl.ActualWidth) / 2));
                    Canvas.SetTop(stepTip, point.Y + 5 + guideModel.UserControl.ActualHeight);
                    break;
                case StepTip.Direction.Bottom:
                    Canvas.SetLeft(stepTip, point.X + ((guideModel.UserControl.ActualWidth - stepTip.ActualWidth) / 2));
                    Canvas.SetBottom(stepTip, this.ActualHeight - point.Y + 5);
                    break;
                case StepTip.Direction.Left:
                    Canvas.SetLeft(stepTip, point.X + 5 + guideModel.UserControl.ActualWidth);
                    Canvas.SetTop(stepTip, point.Y + 5 + ((guideModel.UserControl.ActualHeight - stepTip.ActualHeight) / 2));
                    break;
                case StepTip.Direction.Right:
                    Canvas.SetLeft(stepTip, point.X-5 - stepTip.ActualWidth);
                    Canvas.SetTop(stepTip, point.Y + 5 + ((guideModel.UserControl.ActualHeight - stepTip.ActualHeight) / 2));
                    break;
                default:
                    break;
            }
            stepTip.Visibility = Visibility.Visible;
        }

步骤的下一步进行与关闭操作

点击查看代码

 private void StepTip_OnClosed() {
            this.Close();
            MainWindow.Instance.Activate();
        }

        private void StepTip_OnNext() {
            if (guideWindows.Count == 0)
                return;
            var beforGuide = guideWindows[currentStep - 1];

            if (guideWindows.Count == currentStep) {
                EndStep();
                return;
            }

            var currentGuide = guideWindows[currentStep];
            if (beforGuide != null) {
                canvas.Children.Clear();
            }

            if (currentGuide != null) {
                StartGuide(currentGuide);
            }
        }

实行如何找到要提示的内容

• 在要执行的页面建一个“Loaded”事件
• 初始化InitGuideWindow();
• 点击查看代码

   private void EditPage_Loaded(object sender, RoutedEventArgs e) {
              InitGuideWindow();
          }
          private void InitGuideWindow() {
                  var allGuide = new List<GuideModel>();
                  allGuide.AddRange(InitWelecome());
                  var akkGuides = allGuide.OrderBy(i => i.Step).ToList();
                  guideWindow = new GuideWindow(MainWindow.Instance, akkGuides);
                  guideWindow.Owner = MainWindow.Instance;
                  guideWindow.ShowDialog();
              }
          }
  //寻找控件
   List<GuideModel> InitWelecome() {
              var lstWelecome = new List<GuideModel>();
              var findCtrl = ControlHelper.FindControl<StackPanel>("optionPanel", optionGrid);
              var createModel = new GuideModel() {
                  Step = 1,
                  TipText = LangEx.Get("MoreFeatures"),
                  UserControl = findCtrl,
                  ArrowDirection = Controls.StepTip.Direction.Left,
                  TotalStep = 3,
                  ButtonContent = LangEx.Get("Know")
              };
              lstWelecome.Add(createModel);
  
              var findCtrl1 = ControlHelper.FindControl<Button>("btnSave", panelWorkspace);
              var createModel1 = new GuideModel() {
                  Step = 3,
                  TipText = LangEx.Get("SaveMattingResults"),
                  UserControl = findCtrl1,
                  ArrowDirection = Controls.StepTip.Direction.Bottom,
                  TotalStep = 3,
                  ButtonContent = LangEx.Get("Know")
              };
              lstWelecome.Add(createModel1);
              var findCtrl2 = ControlHelper.FindControl<Button>("btnSetting", MainWindow.Instance);
              findCtrl2.Margin = new Thickness(10, 0,10, 0);
              var createModel2 = new GuideModel() {
                  Step = 2,
                  TipText = LangEx.Get("PromptStorageLocation"),
                  UserControl = findCtrl2,
                  ArrowDirection = Controls.StepTip.Direction.Top,
                  TotalStep = 3,
                  ButtonContent = LangEx.Get("Know")
              };
              lstWelecome.Add(createModel2);
              return lstWelecome;
          }