回答編集履歴
1
見直しキャンペーン中
answer
CHANGED
|
@@ -1,143 +1,141 @@
|
|
|
1
|
-
スマホやゲームなどのチュートリアルで、ボタン等がアニメーションし（あるいはポップアップが出たりして）次の操作を促すようなものですよね？
|
|
2
|
-
そしてそれ以外の操作はブロックし、数段階の一連の操作をユーザーにやらせてみるみたいな。
|
|
3
|
-
|
|
4
|
-
それぞれ個別に考えれば、WPFでもそれほど難しくはありません。
|
|
5
|
-
しかし一連の操作をチュートリアルとしてやらせようとすると、頭を抱えますね^^;（理屈上は可能だと思いますが、かなりのコードと状態管理が必要になりそう）
|
|
6
|
-
サポートするようなライブラリも聞いたことないですし、やっている例も見たことありません（もしあったら私も参考にしたいです）
|
|
7
|
-
|
|
8
|
-
現実的には、
|
|
9
|
-
* ツールチップやウォーターマーク等で説明を入れる
|
|
10
|
-
* ツールチップやヘルプがあることをわかるように、？アイコンを表示する
|
|
11
|
-
* 初回画面でのポップアップで動画再生
|
|
12
|
-
|
|
13
|
-
あたりになるかなぁ？と思います。
|
|
14
|
-
|
|
15
|
-
理想を言えば、説明が要らないぐらい「シンプルでわかりやすいＵＩにする」ということなんでしょうけど^^;
|
|
16
|
-
|
|
17
|
-
---
|
|
18
|
-
|
|
19
|
-
一個一個の説明を順次出すだけでよければ、こんなのがお手軽でそこそこ見栄えもいいかもしれません（モーダルダイアログを吹き出し型にして、次々出すだけ）
|
|
20
|
-
|
|
21
|
-
MainWindow.xaml
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
MainWindow.xaml.cs
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
var p =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
p =
|
|
69
|
-
b
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
p =
|
|
73
|
-
b
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<Setter Property="
|
|
89
|
-
<Setter Property="
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
```
|
|
142
|
-
|
|
1
|
+
スマホやゲームなどのチュートリアルで、ボタン等がアニメーションし（あるいはポップアップが出たりして）次の操作を促すようなものですよね？
|
|
2
|
+
そしてそれ以外の操作はブロックし、数段階の一連の操作をユーザーにやらせてみるみたいな。
|
|
3
|
+
|
|
4
|
+
それぞれ個別に考えれば、WPFでもそれほど難しくはありません。
|
|
5
|
+
しかし一連の操作をチュートリアルとしてやらせようとすると、頭を抱えますね^^;（理屈上は可能だと思いますが、かなりのコードと状態管理が必要になりそう）
|
|
6
|
+
サポートするようなライブラリも聞いたことないですし、やっている例も見たことありません（もしあったら私も参考にしたいです）
|
|
7
|
+
|
|
8
|
+
現実的には、
|
|
9
|
+
* ツールチップやウォーターマーク等で説明を入れる
|
|
10
|
+
* ツールチップやヘルプがあることをわかるように、？アイコンを表示する
|
|
11
|
+
* 初回画面でのポップアップで動画再生
|
|
12
|
+
|
|
13
|
+
あたりになるかなぁ？と思います。
|
|
14
|
+
|
|
15
|
+
理想を言えば、説明が要らないぐらい「シンプルでわかりやすいＵＩにする」ということなんでしょうけど^^;
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
一個一個の説明を順次出すだけでよければ、こんなのがお手軽でそこそこ見栄えもいいかもしれません（モーダルダイアログを吹き出し型にして、次々出すだけ）
|
|
20
|
+
|
|
21
|
+
```xml:MainWindow.xaml
|
|
22
|
+
<Window
|
|
23
|
+
x:Class="Questions296394.MainWindow"
|
|
24
|
+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
25
|
+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
26
|
+
Width="450"
|
|
27
|
+
Height="450"
|
|
28
|
+
Loaded="Window_Loaded">
|
|
29
|
+
<StackPanel>
|
|
30
|
+
<Button
|
|
31
|
+
x:Name="aaa"
|
|
32
|
+
MinWidth="80"
|
|
33
|
+
Margin="10"
|
|
34
|
+
HorizontalAlignment="Center"
|
|
35
|
+
Content="aaa" />
|
|
36
|
+
<TextBox
|
|
37
|
+
x:Name="bbb"
|
|
38
|
+
MinWidth="80"
|
|
39
|
+
Margin="10"
|
|
40
|
+
HorizontalAlignment="Center"
|
|
41
|
+
Text="bbb" />
|
|
42
|
+
<Button
|
|
43
|
+
x:Name="ccc"
|
|
44
|
+
MinWidth="80"
|
|
45
|
+
Margin="10"
|
|
46
|
+
HorizontalAlignment="Center"
|
|
47
|
+
Content="ccc" />
|
|
48
|
+
</StackPanel>
|
|
49
|
+
</Window>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
```cs:MainWindow.xaml.cs
|
|
53
|
+
using System.Windows;
|
|
54
|
+
|
|
55
|
+
namespace Questions296394
|
|
56
|
+
{
|
|
57
|
+
public partial class MainWindow : Window
|
|
58
|
+
{
|
|
59
|
+
public MainWindow() => InitializeComponent();
|
|
60
|
+
|
|
61
|
+
private void Window_Loaded(object sender, RoutedEventArgs e)
|
|
62
|
+
{
|
|
63
|
+
var p = aaa.PointToScreen(new Point(aaa.ActualWidth + 10, 0));
|
|
64
|
+
var b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "aaaの説明", Content = "なんたらかんたら", Owner = this, };
|
|
65
|
+
b.ShowDialog();
|
|
66
|
+
|
|
67
|
+
p = bbb.PointToScreen(new Point(bbb.ActualWidth + 10, 0));
|
|
68
|
+
b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "bbbの説明", Content = "ほげほげふがふが", Owner = this, };
|
|
69
|
+
b.ShowDialog();
|
|
70
|
+
|
|
71
|
+
p = ccc.PointToScreen(new Point(ccc.ActualWidth + 10, 0));
|
|
72
|
+
b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "cccの説明", Content = "なんたらかんたら\nほげほげふがふが", Owner = this, };
|
|
73
|
+
b.ShowDialog();
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
```xml:BalloonWindow.xaml
|
|
80
|
+
<Window
|
|
81
|
+
x:Class="Questions296394.BalloonWindow"
|
|
82
|
+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
83
|
+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
|
84
|
+
<Window.Style>
|
|
85
|
+
<Style TargetType="{x:Type Window}">
|
|
86
|
+
<Setter Property="AllowsTransparency" Value="True" />
|
|
87
|
+
<Setter Property="SizeToContent" Value="WidthAndHeight" />
|
|
88
|
+
<Setter Property="WindowStyle" Value="None" />
|
|
89
|
+
<Setter Property="Template">
|
|
90
|
+
<Setter.Value>
|
|
91
|
+
<ControlTemplate TargetType="{x:Type Window}">
|
|
92
|
+
<Grid>
|
|
93
|
+
<Border
|
|
94
|
+
Margin="20,0,0,0"
|
|
95
|
+
Padding="10"
|
|
96
|
+
Background="WhiteSmoke"
|
|
97
|
+
BorderBrush="Black"
|
|
98
|
+
BorderThickness="2"
|
|
99
|
+
CornerRadius="10">
|
|
100
|
+
<StackPanel>
|
|
101
|
+
<TextBlock
|
|
102
|
+
HorizontalAlignment="Center"
|
|
103
|
+
FontSize="20"
|
|
104
|
+
Text="{TemplateBinding Title}" />
|
|
105
|
+
<ContentPresenter Margin="10" Content="{TemplateBinding Content}" />
|
|
106
|
+
<Button
|
|
107
|
+
HorizontalAlignment="Right"
|
|
108
|
+
Click="Button_Click"
|
|
109
|
+
Content="OK" />
|
|
110
|
+
</StackPanel>
|
|
111
|
+
</Border>
|
|
112
|
+
<Polygon
|
|
113
|
+
Fill="WhiteSmoke"
|
|
114
|
+
Points="2,20 20,20 20,40"
|
|
115
|
+
Stroke="Black"
|
|
116
|
+
StrokeThickness="4" />
|
|
117
|
+
<Polygon Fill="WhiteSmoke" Points="2,20 22,20 22,42" />
|
|
118
|
+
</Grid>
|
|
119
|
+
</ControlTemplate>
|
|
120
|
+
</Setter.Value>
|
|
121
|
+
</Setter>
|
|
122
|
+
</Style>
|
|
123
|
+
</Window.Style>
|
|
124
|
+
</Window>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
```cs:BalloonWindow.xaml.cs
|
|
128
|
+
using System.Windows;
|
|
129
|
+
|
|
130
|
+
namespace Questions296394
|
|
131
|
+
{
|
|
132
|
+
public partial class BalloonWindow : Window
|
|
133
|
+
{
|
|
134
|
+
public BalloonWindow() => InitializeComponent();
|
|
135
|
+
|
|
136
|
+
private void Button_Click(object sender, RoutedEventArgs e) => DialogResult = true;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
143
141
|
|