c# - 如何创建WPF交互式应用程序导览

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

我想为网站添加与此类似的内容：http://tourmyapp.com

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

最佳答案

我不知道是否存在用于您目的的特定工具，但是我认为您可以自己编写代码。这不是那么困难。

您可以从这个简单的样本中获得想法。我使用了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方式更改它并不需要付出很大的努力。

希望本示例可以对您有所帮助，并为您的工作提供一些提示。