如何创建应用程序的WPF交互式导览

Question

我有一个WPF Windows应用程序，我想添加交互式演练以帮助用户了解如何使用该应用程序。

我想补充一些类似的一个网站：http://tourmyapp.com

有没有办法为WPF做到这一点？

Answer 1

我不知道您的目的是否存在特定的工具，但在我看来，您可以自己编写代码。这并不困难。

您可以从这个简单的示例中获得创意。我使用了CallOut控件 - 您可以在Microsoft.Expression.Drawing库中找到它）。

现在，让我们看到了XAML代码：

<Window x:Class="WpfApplication1.MainWindow" Name="win" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:sys="clr-namespace:System;assembly=mscorlib" 
     xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
     Title="MainWindow" Height="600" Width="600"> 

    <Grid> 
     <StackPanel Margin="0, 200, 200, 0"> 
      <TextBox Margin="10" Name="TextBox" /> 
      <CheckBox Content="Flag" Margin="10" Name="CheckBox" 
         Width="70" HorizontalAlignment="Left" /> 
      <Button Content="Click Me" Margin="10" Name="Button" /> 
      <ComboBox Margin="10" Name="ComboBox"> 
       <sys:String>Item 1</sys:String> 
       <sys:String>Item 2</sys:String> 
       <sys:String>Item 3</sys:String> 
      </ComboBox> 
      <Button Name="Start" Content="Start Tour" Margin="10" Click="StartTour" /> 

     </StackPanel> 

     <ed:Callout Name="Callout" Fill="LightYellow" 
        Width="200" 
        Height="100" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        CalloutStyle="Oval" 
        Stroke="Black" 
        Visibility="Hidden" Panel.ZIndex="100"> 
      <StackPanel Orientation="Vertical"> 
       <TextBlock Name="CalloutMessage" Margin="5" TextWrapping="Wrap" /> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 
        <Button Content="Ok" Click="Ok" Margin="1" /> 
        <Button Content="Cancel" Click="Cancel" Margin="1" /> 
       </StackPanel> 
      </StackPanel> 
     </ed:Callout> 
    </Grid> 

</Window> 

我加了一些样品控​​制，并开始游览的按钮。你也可以找到CallOut。它将被移动以便“解释”其他控件。

现在在后台代码，我们有：

using System; 
using System.Collections.Specialized; 
using System.Windows; 
using System.Windows.Media; 

namespace WpfApplication1 
{ 
    public partial class MainWindow : Window 
    { 
     private NameValueCollection tourData = new NameValueCollection(); 
     private int currentIndex; 

     public MainWindow() 
     { 
      InitializeComponent(); 

      tourData.Add("TextBox", "This is a TextBox"); 
      tourData.Add("Button", "This is a Button. You can click it"); 
      tourData.Add("CheckBox", "This is a CheckBox"); 
      tourData.Add("ComboBox", "This is a ComboBox. You can select an item"); 

     } 

     private void MoveCallout(FrameworkElement element, string message) 
     { 
      GeneralTransform generaTransform = element.TransformToAncestor(this); 
      Point point = generaTransform.Transform(new Point(0, 0)); 

      double x = point.X + element.ActualWidth + 4; 
      double y = point.Y + element.ActualHeight + 4; 

      CalloutMessage.Text = message; 
      Callout.RenderTransform = new TranslateTransform(x, y); 
     } 

     private void StartTour(object sender, EventArgs args) 
     { 
      currentIndex = 0; 
      Callout.Visibility = System.Windows.Visibility.Visible; 
      Start.IsEnabled = false; 

      FrameworkElement element = (FrameworkElement)FindName(tourData.GetKey(currentIndex)); 
      MoveCallout(element, tourData.Get(currentIndex)); 

      currentIndex++; 
     } 

     private void Ok(object sender, EventArgs args) 
     { 
      FrameworkElement element; 
      if (currentIndex < tourData.Count) 
      { 
       element = (FrameworkElement)FindName(tourData.GetKey(currentIndex)); 
       MoveCallout(element, tourData.Get(currentIndex)); 

       currentIndex++; 
      } 
      else 
      { 
       Callout.Visibility = System.Windows.Visibility.Hidden; 
       Start.IsEnabled = true; 
      } 

     } 

     private void Cancel(object sender, EventArgs args) 
     { 
      Callout.Visibility = System.Windows.Visibility.Hidden; 
      Start.IsEnabled = true; 
     } 
    } 
} 

该样本不符合MVVM当然。无论如何，我想这不需要很大的努力来以MVVM的方式来改变它。

我希望这个样本可以帮助你，并且可以为你的工作提供一些提示。

Answer 2

你可以看看Whatfix。它是一个类似于TourMyApp的工具，但使用起来更容易，并且有很多有用的功能。

有了它，您可以轻松地在任何Web应用程序上无缝地创建交互式演练。

它适用于所有Web应用程序或网站。您可以使用适用于Chrome或Firefox的Whatfix编辑器来创建交互式演练。一旦创建，它就可以在所有Web浏览器中查看演练。