回答編集履歴

3

見直しキャンペーン中

2023/08/10 09:54

投稿

TN8001
TN8001

スコア9341

test CHANGED
@@ -145,6 +145,7 @@
145
145
  </Grid>
146
146
  </Window>
147
147
  ```
148
+ ![アプリ動画](https://ddjkaamml8q8x.cloudfront.net/questions/2023-08-10/c6e33db7-f242-44d0-a207-b0dcb9fbf0bb.gif)
148
149
 
149
150
  ---
150
151
 

2

見直しキャンペーン中

2023/07/20 14:46

投稿

TN8001
TN8001

スコア9341

test CHANGED
@@ -1,339 +1,168 @@
1
1
  表示内容がわからないですが、仮に回答xamlの`GroupBox`「original」のような状態だったとします。
2
-
3
2
  縦スクロールバーが出るとボタンが左にずれて、見苦しいということですね?
4
3
 
5
-
6
-
7
4
  `StackPanel`の縦方向はサイズが決まりますが、横方向は決まっていません。
8
-
9
5
  スクロールバーが出て`ScrollViewer`のコンテンツエリアが狭まると、`StackPanel`も横に縮まりボタンも左に移動します。
10
6
 
7
+ 「fixed size」のように`StackPanel`のサイズを固定してしまえばこのようにはなりませんが、やりたいのはそういうことではありませんね?(ウィンドウのサイズを変えるとすぐわかります)
11
8
 
9
+ 「custom template」の状態が、求めているものであっていますでしょうか(無駄に長いですが、単に`ScrollContentPresenter`をスクロールバーのエリアに、はみ出させるというだけです)
12
10
 
13
- 「fixed size」のように`StackPanel`のサイズを固定してしまえば、このようにはなりません。
14
-
15
-
16
-
17
- が、やりたいのはそういうことではありませんね?(ウィンドウのサイズを変えるとすぐわかります)
18
-
19
- 「custom template」の状態が、求めているものであっていますでしょうか。
20
-
21
- (無駄に長いですが、単に`ScrollContentPresenter`をスクロールバーのエリアに、はみ出させるというだけです)
22
-
23
-
24
-
25
- ```xaml
11
+ ```xml
26
-
27
12
  <Window
28
-
29
13
  x:Class="Questions242970.MainWindow"
30
-
31
14
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
32
-
33
15
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
34
-
35
16
  Width="400"
36
-
37
17
  Height="600">
38
-
39
18
  <Window.Resources>
40
-
41
19
  <Style TargetType="ScrollViewer">
42
-
43
20
  <Style.Triggers>
44
-
45
21
  <Trigger Property="IsMouseOver" Value="True">
46
-
47
22
  <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
48
-
49
23
  <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
50
-
51
24
  </Trigger>
52
-
53
25
  <Trigger Property="IsMouseOver" Value="False">
54
-
55
26
  <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
56
-
57
27
  <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
58
-
59
28
  </Trigger>
60
-
61
29
  </Style.Triggers>
62
-
63
30
  </Style>
64
31
 
65
-
66
-
67
32
  <!-- Blend for Visual Studio 2019の「テンプレートの編集」で出力されたもの -->
68
-
69
33
  <ControlTemplate x:Key="template" TargetType="{x:Type ScrollViewer}">
70
-
71
34
  <Grid x:Name="Grid" Background="{TemplateBinding Background}">
72
-
73
35
  <Grid.ColumnDefinitions>
74
-
75
36
  <ColumnDefinition Width="*" />
76
-
77
37
  <ColumnDefinition Width="Auto" />
78
-
79
38
  </Grid.ColumnDefinitions>
80
-
81
39
  <Grid.RowDefinitions>
82
-
83
40
  <RowDefinition Height="*" />
84
-
85
41
  <RowDefinition Height="Auto" />
86
-
87
42
  </Grid.RowDefinitions>
88
-
89
43
  <Rectangle
90
-
91
44
  x:Name="Corner"
92
-
93
45
  Grid.Row="1"
94
-
95
46
  Grid.Column="1"
96
-
97
47
  Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
98
48
 
99
-
100
-
101
49
  <!--
102
-
103
50
  Grid.RowSpan="2"
104
-
105
51
  Grid.ColumnSpan="2"
106
-
107
52
  を追加
108
-
109
53
  -->
110
-
111
54
  <ScrollContentPresenter
112
-
113
55
  x:Name="PART_ScrollContentPresenter"
114
-
115
56
  Grid.Row="0"
116
-
117
57
  Grid.RowSpan="2"
118
-
119
58
  Grid.Column="0"
120
-
121
59
  Grid.ColumnSpan="2"
122
-
123
60
  Margin="{TemplateBinding Padding}"
124
-
125
61
  CanContentScroll="{TemplateBinding CanContentScroll}"
126
-
127
62
  CanHorizontallyScroll="False"
128
-
129
63
  CanVerticallyScroll="False"
130
-
131
64
  Content="{TemplateBinding Content}"
132
-
133
65
  ContentTemplate="{TemplateBinding ContentTemplate}" />
134
-
135
66
  <ScrollBar
136
-
137
67
  x:Name="PART_VerticalScrollBar"
138
-
139
68
  Grid.Row="0"
140
-
141
69
  Grid.Column="1"
142
-
143
70
  AutomationProperties.AutomationId="VerticalScrollBar"
144
-
145
71
  Cursor="Arrow"
146
-
147
72
  Maximum="{TemplateBinding ScrollableHeight}"
148
-
149
73
  Minimum="0"
150
-
151
74
  ViewportSize="{TemplateBinding ViewportHeight}"
152
-
153
75
  Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
154
-
155
76
  Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
156
-
157
77
  <ScrollBar
158
-
159
78
  x:Name="PART_HorizontalScrollBar"
160
-
161
79
  Grid.Row="1"
162
-
163
80
  Grid.Column="0"
164
-
165
81
  AutomationProperties.AutomationId="HorizontalScrollBar"
166
-
167
82
  Cursor="Arrow"
168
-
169
83
  Maximum="{TemplateBinding ScrollableWidth}"
170
-
171
84
  Minimum="0"
172
-
173
85
  Orientation="Horizontal"
174
-
175
86
  ViewportSize="{TemplateBinding ViewportWidth}"
176
-
177
87
  Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
178
-
179
88
  Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
180
-
181
89
  </Grid>
182
-
183
90
  </ControlTemplate>
184
-
185
91
  </Window.Resources>
186
-
187
92
  <Grid>
188
-
189
93
  <Grid.RowDefinitions>
190
-
191
94
  <RowDefinition />
192
-
193
95
  <RowDefinition />
194
-
195
96
  <RowDefinition />
196
-
197
97
  </Grid.RowDefinitions>
198
98
 
199
-
200
-
201
99
  <GroupBox Header="original">
202
-
203
100
  <ScrollViewer>
204
-
205
101
  <StackPanel>
206
-
207
102
  <Button HorizontalAlignment="Left" Content="Button" />
208
-
209
103
  <Button HorizontalAlignment="Center" Content="Button" />
210
-
211
104
  <Button HorizontalAlignment="Right" Content="Button" />
212
-
213
105
  <Button Content="Button" />
214
-
215
106
  <Button Content="Button" />
216
-
217
107
  <Button Content="Button" />
218
-
219
108
  <Button Content="Button" />
220
-
221
109
  </StackPanel>
222
-
223
110
  </ScrollViewer>
224
-
225
111
  </GroupBox>
226
112
 
227
-
228
-
229
113
  <GroupBox Grid.Row="1" Header="fixed size">
230
-
231
114
  <ScrollViewer>
232
-
233
115
  <StackPanel
234
-
235
116
  Width="372"
236
-
237
117
  Height="196"
238
-
239
118
  HorizontalAlignment="Left"
240
-
241
119
  VerticalAlignment="Top">
242
-
243
120
  <Button HorizontalAlignment="Left" Content="Button" />
244
-
245
121
  <Button HorizontalAlignment="Center" Content="Button" />
246
-
247
122
  <Button HorizontalAlignment="Right" Content="Button" />
248
-
249
123
  <Button Content="Button" />
250
-
251
124
  <Button Content="Button" />
252
-
253
125
  <Button Content="Button" />
254
-
255
126
  <Button Content="Button" />
256
-
257
127
  </StackPanel>
258
-
259
128
  </ScrollViewer>
260
-
261
129
  </GroupBox>
262
130
 
263
-
264
-
265
131
  <GroupBox Grid.Row="2" Header="custom template">
266
-
267
132
  <ScrollViewer Template="{StaticResource template}">
268
-
269
133
  <StackPanel>
270
-
271
134
  <Button HorizontalAlignment="Left" Content="Button" />
272
-
273
135
  <Button HorizontalAlignment="Center" Content="Button" />
274
-
275
136
  <Button HorizontalAlignment="Right" Content="Button" />
276
-
277
137
  <Button Content="Button" />
278
-
279
138
  <Button Content="Button" />
280
-
281
139
  <Button Content="Button" />
282
-
283
140
  <Button Content="Button" />
284
-
285
141
  </StackPanel>
286
-
287
142
  </ScrollViewer>
288
-
289
143
  </GroupBox>
290
144
 
291
-
292
-
293
145
  </Grid>
294
-
295
146
  </Window>
296
-
297
147
  ```
298
-
299
-
300
148
 
301
149
  ---
302
150
 
303
-
304
-
305
151
  もっと手軽に実現するなら、こんなのはどうでしょうか?
306
-
307
- ```xaml
152
+ ```xml
308
-
309
153
  <Style TargetType="ScrollBar">
310
-
311
154
  <Style.Triggers>
312
-
313
155
  <Trigger Property="IsMouseOver" Value="True">
314
-
315
156
  <Setter Property="Opacity" Value="1" />
316
-
317
157
  </Trigger>
318
-
319
158
  <Trigger Property="IsMouseOver" Value="False">
320
-
321
159
  <Setter Property="Opacity" Value="0" />
322
-
323
160
  </Trigger>
324
-
325
161
  </Style.Triggers>
326
-
327
162
  </Style>
328
-
329
163
  ```
330
-
331
164
  上には被さらずに隙間ができてしまうのが難点ですが。
332
-
333
-
334
165
 
335
166
  ---
336
167
 
337
-
338
-
339
168
  わたしもUWPのような「マウスが乗っていないときは細くなるスクロールバー」を作る際、苦労しました^^;

1

Resourcesの定義場所でコントロール可能でした

2020/02/22 23:09

投稿

TN8001
TN8001

スコア9341

test CHANGED
@@ -328,7 +328,7 @@
328
328
 
329
329
  ```
330
330
 
331
- すべてのスクロールバーに影響してしまうのと、上には被さらずに隙間ができてしまうのが難点ですが。
331
+ 上には被さらずに隙間ができてしまうのが難点ですが。
332
332
 
333
333
 
334
334