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。它将被移动以便解释＆＃34;其他控件。

现在在代码隐藏中我们有：

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浏览器中查看演练。

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

2 个答案: