WPFのXAMLで操作者向けにチュートリアルを実装したい

Question

前提・実現したいこと

WPFでWindowsアプリケーションを作成中です。
想定する操作対象者は、パソコンのスキルが少ない人が多いと想定しています。

アプリ初回起動時に、チュートリアル的な物を実装しようと考えていますが
WPFのXAMLでどのような実装をしたらよいのか見当がつきません。
と言いますのも、WPFは今回が初めてになります。
どのような事が出来るのかも判断できないため、どうしたいという仕様が思い浮かばないのが実情です。

起動2回目以降のユーザーが操作する画面をそのまま使いながら、初回起動時のみユーザーに強調表示等で補足が出来るようなチュートリアルが出来ればと考えています。

オススメの表現方法をご教授頂けないでしょうか。
よろしくお願いいたします。

Answer 1

スマホやゲームなどのチュートリアルで、ボタン等がアニメーションし（あるいはポップアップが出たりして）次の操作を促すようなものですよね？
そしてそれ以外の操作はブロックし、数段階の一連の操作をユーザーにやらせてみるみたいな。

それぞれ個別に考えれば、WPFでもそれほど難しくはありません。
しかし一連の操作をチュートリアルとしてやらせようとすると、頭を抱えますね^^;（理屈上は可能だと思いますが、かなりのコードと状態管理が必要になりそう）
サポートするようなライブラリも聞いたことないですし、やっている例も見たことありません（もしあったら私も参考にしたいです）

現実的には、

• ツールチップやウォーターマーク等で説明を入れる
• ツールチップやヘルプがあることをわかるように、？アイコンを表示する
• 初回画面でのポップアップで動画再生

あたりになるかなぁ？と思います。

理想を言えば、説明が要らないぐらい「シンプルでわかりやすいＵＩにする」ということなんでしょうけど^^;

---

一個一個の説明を順次出すだけでよければ、こんなのがお手軽でそこそこ見栄えもいいかもしれません（モーダルダイアログを吹き出し型にして、次々出すだけ）

<Window
  x:Class="Questions296394.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="450"
  Height="450"
  Loaded="Window_Loaded">
  <StackPanel>
    <Button
      x:Name="aaa"
      MinWidth="80"
      Margin="10"
      HorizontalAlignment="Center"
      Content="aaa" />
    <TextBox
      x:Name="bbb"
      MinWidth="80"
      Margin="10"
      HorizontalAlignment="Center"
      Text="bbb" />
    <Button
      x:Name="ccc"
      MinWidth="80"
      Margin="10"
      HorizontalAlignment="Center"
      Content="ccc" />
  </StackPanel>
</Window>

using System.Windows;

namespace Questions296394
{
    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var p = aaa.PointToScreen(new Point(aaa.ActualWidth + 10, 0));
            var b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "aaaの説明", Content = "なんたらかんたら", Owner = this, };
            b.ShowDialog();

            p = bbb.PointToScreen(new Point(bbb.ActualWidth + 10, 0));
            b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "bbbの説明", Content = "ほげほげふがふが", Owner = this, };
            b.ShowDialog();

            p = ccc.PointToScreen(new Point(ccc.ActualWidth + 10, 0));
            b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "cccの説明", Content = "なんたらかんたら\nほげほげふがふが", Owner = this, };
            b.ShowDialog();
        }
    }
}

<Window
  x:Class="Questions296394.BalloonWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Window.Style>
    <Style TargetType="{x:Type Window}">
      <Setter Property="AllowsTransparency" Value="True" />
      <Setter Property="SizeToContent" Value="WidthAndHeight" />
      <Setter Property="WindowStyle" Value="None" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Window}">
            <Grid>
              <Border
                Margin="20,0,0,0"
                Padding="10"
                Background="WhiteSmoke"
                BorderBrush="Black"
                BorderThickness="2"
                CornerRadius="10">
                <StackPanel>
                  <TextBlock
                    HorizontalAlignment="Center"
                    FontSize="20"
                    Text="{TemplateBinding Title}" />
                  <ContentPresenter Margin="10" Content="{TemplateBinding Content}" />
                  <Button
                    HorizontalAlignment="Right"
                    Click="Button_Click"
                    Content="OK" />
                </StackPanel>
              </Border>
              <Polygon
                Fill="WhiteSmoke"
                Points="2,20 20,20 20,40"
                Stroke="Black"
                StrokeThickness="4" />
              <Polygon Fill="WhiteSmoke" Points="2,20 22,20 22,42" />
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Style>
</Window>

using System.Windows;

namespace Questions296394
{
    public partial class BalloonWindow : Window
    {
        public BalloonWindow() => InitializeComponent();

        private void Button_Click(object sender, RoutedEventArgs e) => DialogResult = true;
    }
}

Comments

[wakasan]

TN8001さん
回答ありがとうございます！

>スマホやゲームなどのチュートリアルで、ボタン等がアニメーションし（あるいはポップアップが出たりして）次の操作を促すようなものですよね？
>そしてそれ以外の操作はブロックし、数段階の一連の操作をユーザーにやらせてみるみたいな。
まさに仰る通りです。

サンプルソースまでありがとうございました。
動作確認しましたが、OKボタンを押さないと次へ移動しないあたりが非常に理想的な動作です。
こちらを参考に実装したいと思います。
感謝いたします。
ありがとうございました！