XAMLで、マウスオーバー時だけスクロールバーのつまみを表示させる方法

WPFのXAMLで、scrollviewer内にマウスオーバーしたときだけ、スクロールバーのつまみを表示させたいです。
言い換えると、マウスオーバーしていないときに、つまみを透過（あるいは背景と同一色に）する方法が知りたいです。
以下、ググって見つけた方法がありますが、これだと、つまみが表示されるときとhiddenのときで、
コントロール内の内容がずれてしまいます（マウスオーバーさせて、つまみを表示させると、
右に寄せた内容物が、スクロールバーの分だけ左にずれていまいます）。

xaml
1<Style TargetType="ScrollViewer">
2    <Style.Triggers>
3        <Trigger Property="IsMouseOver" Value="True">
4            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
5            <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
6        </Trigger>
7        <Trigger Property="IsMouseOver" Value="False">
8            <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
9            <Setter Property="VerticalScrollBarVisibility" Value="Hidden"/>
10        </Trigger>
11    </Style.Triggers>
12</Style>

解決策をお分かりの方がおられましたら、ご教授お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

表示内容がわからないですが、仮に回答xamlのGroupBox「original」のような状態だったとします。
縦スクロールバーが出るとボタンが左にずれて、見苦しいということですね？

StackPanelの縦方向はサイズが決まりますが、横方向は決まっていません。
スクロールバーが出てScrollViewerのコンテンツエリアが狭まると、StackPanelも横に縮まりボタンも左に移動します。

「fixed size」のようにStackPanelのサイズを固定してしまえばこのようにはなりませんが、やりたいのはそういうことではありませんね？（ウィンドウのサイズを変えるとすぐわかります）

「custom template」の状態が、求めているものであっていますでしょうか（無駄に長いですが、単にScrollContentPresenterをスクロールバーのエリアに、はみ出させるというだけです）

xml
1<Window
2  x:Class="Questions242970.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="400"
6  Height="600">
7  <Window.Resources>
8    <Style TargetType="ScrollViewer">
9      <Style.Triggers>
10        <Trigger Property="IsMouseOver" Value="True">
11          <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
12          <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
13        </Trigger>
14        <Trigger Property="IsMouseOver" Value="False">
15          <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
16          <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
17        </Trigger>
18      </Style.Triggers>
19    </Style>
20
21    <!--  Blend for Visual Studio 2019の「テンプレートの編集」で出力されたもの  -->
22    <ControlTemplate x:Key="template" TargetType="{x:Type ScrollViewer}">
23      <Grid x:Name="Grid" Background="{TemplateBinding Background}">
24        <Grid.ColumnDefinitions>
25          <ColumnDefinition Width="*" />
26          <ColumnDefinition Width="Auto" />
27        </Grid.ColumnDefinitions>
28        <Grid.RowDefinitions>
29          <RowDefinition Height="*" />
30          <RowDefinition Height="Auto" />
31        </Grid.RowDefinitions>
32        <Rectangle
33          x:Name="Corner"
34          Grid.Row="1"
35          Grid.Column="1"
36          Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
37
38        <!--
39          Grid.RowSpan="2"
40          Grid.ColumnSpan="2"
41          を追加
42        -->
43        <ScrollContentPresenter
44          x:Name="PART_ScrollContentPresenter"
45          Grid.Row="0"
46          Grid.RowSpan="2"
47          Grid.Column="0"
48          Grid.ColumnSpan="2"
49          Margin="{TemplateBinding Padding}"
50          CanContentScroll="{TemplateBinding CanContentScroll}"
51          CanHorizontallyScroll="False"
52          CanVerticallyScroll="False"
53          Content="{TemplateBinding Content}"
54          ContentTemplate="{TemplateBinding ContentTemplate}" />
55        <ScrollBar
56          x:Name="PART_VerticalScrollBar"
57          Grid.Row="0"
58          Grid.Column="1"
59          AutomationProperties.AutomationId="VerticalScrollBar"
60          Cursor="Arrow"
61          Maximum="{TemplateBinding ScrollableHeight}"
62          Minimum="0"
63          ViewportSize="{TemplateBinding ViewportHeight}"
64          Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
65          Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
66        <ScrollBar
67          x:Name="PART_HorizontalScrollBar"
68          Grid.Row="1"
69          Grid.Column="0"
70          AutomationProperties.AutomationId="HorizontalScrollBar"
71          Cursor="Arrow"
72          Maximum="{TemplateBinding ScrollableWidth}"
73          Minimum="0"
74          Orientation="Horizontal"
75          ViewportSize="{TemplateBinding ViewportWidth}"
76          Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
77          Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
78      </Grid>
79    </ControlTemplate>
80  </Window.Resources>
81  <Grid>
82    <Grid.RowDefinitions>
83      <RowDefinition />
84      <RowDefinition />
85      <RowDefinition />
86    </Grid.RowDefinitions>
87
88    <GroupBox Header="original">
89      <ScrollViewer>
90        <StackPanel>
91          <Button HorizontalAlignment="Left" Content="Button" />
92          <Button HorizontalAlignment="Center" Content="Button" />
93          <Button HorizontalAlignment="Right" Content="Button" />
94          <Button Content="Button" />
95          <Button Content="Button" />
96          <Button Content="Button" />
97          <Button Content="Button" />
98        </StackPanel>
99      </ScrollViewer>
100    </GroupBox>
101
102    <GroupBox Grid.Row="1" Header="fixed size">
103      <ScrollViewer>
104        <StackPanel
105          Width="372"
106          Height="196"
107          HorizontalAlignment="Left"
108          VerticalAlignment="Top">
109          <Button HorizontalAlignment="Left" Content="Button" />
110          <Button HorizontalAlignment="Center" Content="Button" />
111          <Button HorizontalAlignment="Right" Content="Button" />
112          <Button Content="Button" />
113          <Button Content="Button" />
114          <Button Content="Button" />
115          <Button Content="Button" />
116        </StackPanel>
117      </ScrollViewer>
118    </GroupBox>
119
120    <GroupBox Grid.Row="2" Header="custom template">
121      <ScrollViewer Template="{StaticResource template}">
122        <StackPanel>
123          <Button HorizontalAlignment="Left" Content="Button" />
124          <Button HorizontalAlignment="Center" Content="Button" />
125          <Button HorizontalAlignment="Right" Content="Button" />
126          <Button Content="Button" />
127          <Button Content="Button" />
128          <Button Content="Button" />
129          <Button Content="Button" />
130        </StackPanel>
131      </ScrollViewer>
132    </GroupBox>
133
134  </Grid>
135</Window>

もっと手軽に実現するなら、こんなのはどうでしょうか？

xml
1<Style TargetType="ScrollBar">
2  <Style.Triggers>
3    <Trigger Property="IsMouseOver" Value="True">
4      <Setter Property="Opacity" Value="1" />
5    </Trigger>
6    <Trigger Property="IsMouseOver" Value="False">
7      <Setter Property="Opacity" Value="0" />
8    </Trigger>
9  </Style.Triggers>
10</Style>

上には被さらずに隙間ができてしまうのが難点ですが。

わたしもUWPのような「マウスが乗っていないときは細くなるスクロールバー」を作る際、苦労しました^^;

投稿2020/02/22 22:52

編集2023/08/10 09:54

TN8001

総合スコア9862

ffshtt

2020/02/23 01:46

ありがとうございます！上の方の回答がまさに求めていたものです！「ScrollContentPresenterをスクロールバーのエリアにはみ出させる」というのも考えたのですが、やり方がわからず困ってました。。大変、勉強になります。あとはちょこちょこっと自分のコードに合うよう調整して使わせていただきたいと思います。どうもありがとうございました！

行動規範の内容に同意します