回答編集履歴
1
見直しキャンペーン中
test
CHANGED
@@ -1,285 +1,141 @@
|
|
1
1
|
スマホやゲームなどのチュートリアルで、ボタン等がアニメーションし(あるいはポップアップが出たりして)次の操作を促すようなものですよね?
|
2
|
-
|
3
2
|
そしてそれ以外の操作はブロックし、数段階の一連の操作をユーザーにやらせてみるみたいな。
|
4
3
|
|
5
|
-
|
6
|
-
|
7
4
|
それぞれ個別に考えれば、WPFでもそれほど難しくはありません。
|
8
|
-
|
9
5
|
しかし一連の操作をチュートリアルとしてやらせようとすると、頭を抱えますね^^;(理屈上は可能だと思いますが、かなりのコードと状態管理が必要になりそう)
|
10
|
-
|
11
6
|
サポートするようなライブラリも聞いたことないですし、やっている例も見たことありません(もしあったら私も参考にしたいです)
|
12
7
|
|
13
|
-
|
14
|
-
|
15
8
|
現実的には、
|
16
|
-
|
17
9
|
* ツールチップやウォーターマーク等で説明を入れる
|
18
|
-
|
19
10
|
* ツールチップやヘルプがあることをわかるように、?アイコンを表示する
|
20
|
-
|
21
11
|
* 初回画面でのポップアップで動画再生
|
22
|
-
|
23
|
-
|
24
12
|
|
25
13
|
あたりになるかなぁ?と思います。
|
26
14
|
|
27
|
-
|
28
|
-
|
29
15
|
理想を言えば、説明が要らないぐらい「シンプルでわかりやすいUIにする」ということなんでしょうけど^^;
|
30
|
-
|
31
|
-
|
32
16
|
|
33
17
|
---
|
34
18
|
|
35
|
-
|
36
|
-
|
37
19
|
一個一個の説明を順次出すだけでよければ、こんなのがお手軽でそこそこ見栄えもいいかもしれません(モーダルダイアログを吹き出し型にして、次々出すだけ)
|
38
20
|
|
39
|
-
|
40
|
-
|
41
|
-
MainWindow.xaml
|
21
|
+
```xml:MainWindow.xaml
|
42
|
-
|
43
|
-
```xaml
|
44
|
-
|
45
22
|
<Window
|
46
|
-
|
47
23
|
x:Class="Questions296394.MainWindow"
|
48
|
-
|
49
24
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
50
|
-
|
51
25
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
52
|
-
|
53
26
|
Width="450"
|
54
|
-
|
55
27
|
Height="450"
|
56
|
-
|
57
28
|
Loaded="Window_Loaded">
|
58
|
-
|
59
29
|
<StackPanel>
|
60
|
-
|
61
30
|
<Button
|
62
|
-
|
63
31
|
x:Name="aaa"
|
64
|
-
|
65
32
|
MinWidth="80"
|
66
|
-
|
67
33
|
Margin="10"
|
68
|
-
|
69
34
|
HorizontalAlignment="Center"
|
70
|
-
|
71
35
|
Content="aaa" />
|
72
|
-
|
73
36
|
<TextBox
|
74
|
-
|
75
37
|
x:Name="bbb"
|
76
|
-
|
77
38
|
MinWidth="80"
|
78
|
-
|
79
39
|
Margin="10"
|
80
|
-
|
81
40
|
HorizontalAlignment="Center"
|
82
|
-
|
83
41
|
Text="bbb" />
|
84
|
-
|
85
42
|
<Button
|
86
|
-
|
87
43
|
x:Name="ccc"
|
88
|
-
|
89
44
|
MinWidth="80"
|
90
|
-
|
91
45
|
Margin="10"
|
92
|
-
|
93
46
|
HorizontalAlignment="Center"
|
94
|
-
|
95
47
|
Content="ccc" />
|
96
|
-
|
97
48
|
</StackPanel>
|
98
|
-
|
99
49
|
</Window>
|
100
|
-
|
101
50
|
```
|
102
51
|
|
103
|
-
MainWindow.xaml.cs
|
52
|
+
```cs:MainWindow.xaml.cs
|
104
|
-
|
105
|
-
```C#
|
106
|
-
|
107
53
|
using System.Windows;
|
108
54
|
|
55
|
+
namespace Questions296394
|
56
|
+
{
|
57
|
+
public partial class MainWindow : Window
|
58
|
+
{
|
59
|
+
public MainWindow() => InitializeComponent();
|
109
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;
|
110
129
|
|
111
130
|
namespace Questions296394
|
131
|
+
{
|
132
|
+
public partial class BalloonWindow : Window
|
133
|
+
{
|
134
|
+
public BalloonWindow() => InitializeComponent();
|
112
135
|
|
113
|
-
{
|
114
|
-
|
115
|
-
public partial class MainWindow : Window
|
116
|
-
|
117
|
-
{
|
118
|
-
|
119
|
-
public MainWindow() => InitializeComponent();
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
private void
|
136
|
+
private void Button_Click(object sender, RoutedEventArgs e) => DialogResult = true;
|
124
|
-
|
125
|
-
{
|
126
|
-
|
127
|
-
var p = aaa.PointToScreen(new Point(aaa.ActualWidth + 10, 0));
|
128
|
-
|
129
|
-
var b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "aaaの説明", Content = "なんたらかんたら", Owner = this, };
|
130
|
-
|
131
|
-
b.ShowDialog();
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
p = bbb.PointToScreen(new Point(bbb.ActualWidth + 10, 0));
|
136
|
-
|
137
|
-
b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "bbbの説明", Content = "ほげほげふがふが", Owner = this, };
|
138
|
-
|
139
|
-
b.ShowDialog();
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
p = ccc.PointToScreen(new Point(ccc.ActualWidth + 10, 0));
|
144
|
-
|
145
|
-
b = new BalloonWindow { Left = p.X, Top = p.Y, Title = "cccの説明", Content = "なんたらかんたら\nほげほげふがふが", Owner = this, };
|
146
|
-
|
147
|
-
b.ShowDialog();
|
148
|
-
|
149
|
-
}
|
150
|
-
|
151
137
|
}
|
152
|
-
|
153
138
|
}
|
154
|
-
|
155
139
|
```
|
156
140
|
|
157
|
-
|
158
|
-
|
159
|
-
BalloonWindow.xaml
|
160
|
-
|
161
|
-
```xaml
|
162
|
-
|
163
|
-
<Window
|
164
|
-
|
165
|
-
x:Class="Questions296394.BalloonWindow"
|
166
|
-
|
167
|
-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
168
|
-
|
169
|
-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
170
|
-
|
171
|
-
<Window.Style>
|
172
|
-
|
173
|
-
<Style TargetType="{x:Type Window}">
|
174
|
-
|
175
|
-
<Setter Property="AllowsTransparency" Value="True" />
|
176
|
-
|
177
|
-
<Setter Property="SizeToContent" Value="WidthAndHeight" />
|
178
|
-
|
179
|
-
<Setter Property="WindowStyle" Value="None" />
|
180
|
-
|
181
|
-
<Setter Property="Template">
|
182
|
-
|
183
|
-
<Setter.Value>
|
184
|
-
|
185
|
-
<ControlTemplate TargetType="{x:Type Window}">
|
186
|
-
|
187
|
-
<Grid>
|
188
|
-
|
189
|
-
<Border
|
190
|
-
|
191
|
-
Margin="20,0,0,0"
|
192
|
-
|
193
|
-
Padding="10"
|
194
|
-
|
195
|
-
Background="WhiteSmoke"
|
196
|
-
|
197
|
-
BorderBrush="Black"
|
198
|
-
|
199
|
-
BorderThickness="2"
|
200
|
-
|
201
|
-
CornerRadius="10">
|
202
|
-
|
203
|
-
<StackPanel>
|
204
|
-
|
205
|
-
<TextBlock
|
206
|
-
|
207
|
-
HorizontalAlignment="Center"
|
208
|
-
|
209
|
-
FontSize="20"
|
210
|
-
|
211
|
-
Text="{TemplateBinding Title}" />
|
212
|
-
|
213
|
-
<ContentPresenter Margin="10" Content="{TemplateBinding Content}" />
|
214
|
-
|
215
|
-
<Button
|
216
|
-
|
217
|
-
HorizontalAlignment="Right"
|
218
|
-
|
219
|
-
Click="Button_Click"
|
220
|
-
|
221
|
-
Content="OK" />
|
222
|
-
|
223
|
-
</StackPanel>
|
224
|
-
|
225
|
-
</Border>
|
226
|
-
|
227
|
-
<Polygon
|
228
|
-
|
229
|
-
Fill="WhiteSmoke"
|
230
|
-
|
231
|
-
Points="2,20 20,20 20,40"
|
232
|
-
|
233
|
-
Stroke="Black"
|
234
|
-
|
235
|
-
StrokeThickness="4" />
|
236
|
-
|
237
|
-
<Polygon Fill="WhiteSmoke" Points="2,20 22,20 22,42" />
|
238
|
-
|
239
|
-
</Grid>
|
240
|
-
|
241
|
-
</ControlTemplate>
|
242
|
-
|
243
|
-
</Setter.Value>
|
244
|
-
|
245
|
-
</Setter>
|
246
|
-
|
247
|
-
</Style>
|
248
|
-
|
249
|
-
</Window.Style>
|
250
|
-
|
251
|
-
</Window>
|
252
|
-
|
253
|
-
```
|
254
|
-
|
255
|
-
BalloonWindow.xaml.cs
|
256
|
-
|
257
|
-
```C#
|
258
|
-
|
259
|
-
using System.Windows;
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
namespace Questions296394
|
264
|
-
|
265
|
-
{
|
266
|
-
|
267
|
-
public partial class BalloonWindow : Window
|
268
|
-
|
269
|
-
{
|
270
|
-
|
271
|
-
public BalloonWindow() => InitializeComponent();
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
private void Button_Click(object sender, RoutedEventArgs e) => DialogResult = true;
|
276
|
-
|
277
|
-
}
|
278
|
-
|
279
|
-
}
|
280
|
-
|
281
|
-
```
|
282
|
-
|
283
|
-
|
284
|
-
|
285
141
|
![イメージ説明](12dada25bca5b1919107b2767f1ffac5.png)
|