回答編集履歴

1

見直しキャンペーン中

2023/07/23 07:37

投稿

TN8001
TN8001

スコア9862

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 Window_Loaded(object sender, RoutedEventArgs e)
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)