WPF　DataGrid内部のスクロールバーのスタイル変更方法がわからない

いつもお世話になっております。
現在、WPFのDataGrid内部のスクロールバーにスタイルを適用する方法を探しているのですが、
内部のスクロールバーの変更方法や仕様がわからず困っております。

下記のサイトを参考にして、データグリッド外のスクロールバーのスタイルは適用できました。

以下
参考にさせていただいたサイトのURLです。
http://gootara.org/library/2016/06/wpf-scb.html

###実現したいこと

DataGrid内部スクロールバーにスタイルを適用させたい
・カラムとスタイルは現在のものを維持したまま、スクロールバーだけ色・形を変更したい。

###適用したいソースコード

C#
1<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
4    <!-- ボタンの長さ -->
5    <sys:Double x:Key="ScrollBarRepeatButtonSize">15</sys:Double>
6    <!-- スクロールバーのマージン -->
7    <sys:Double x:Key="MarginSize">10</sys:Double>
8    <!-- スクロールバーの色-->
9    <SolidColorBrush x:Key="ScrollBarColorBrush" Color="DimGray" />
10    <!-- トラック（レーン）の色 -->
11    <SolidColorBrush x:Key="ScrollBarTrackBrush" Color="LightPink" />
12 
13    <!-- 終端の三角ボタンのスタイル -->
14    <Style x:Key="ScrollBarRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
15        <Setter Property="Template">
16            <Setter.Value>
17                <ControlTemplate TargetType="{x:Type RepeatButton}">
18                    <Border x:Name="Border" Background="{StaticResource ScrollBarColorBrush}"  BorderThickness="1"/>
19                </ControlTemplate>
20            </Setter.Value>
21        </Setter>
22    </Style>
23
24    <!-- トラック（レーン）のスタイル -->
25    <Style x:Key="ScrollBarTrackStyle" TargetType="{x:Type RepeatButton}">
26        <Setter Property="Template">
27            <Setter.Value>
28                <ControlTemplate TargetType="{x:Type RepeatButton}">
29                    <Border Background="Transparent"/>
30                </ControlTemplate>
31            </Setter.Value>
32        </Setter>
33    </Style>
34
35    <!-- つまみのスタイル -->
36    <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
37        <Setter Property="Template">
38            <Setter.Value>
39                <ControlTemplate TargetType="{x:Type Thumb}">
40                    <Border CornerRadius="15"  Background="{StaticResource ScrollBarColorBrush}" BorderThickness="1"/>
41                </ControlTemplate>
42            </Setter.Value>
43        </Setter>
44    </Style>
45
46    <!-- カスタムスクロールバーのスタイル -->
47    <Style x:Key="CustomScrollBarStyle" TargetType="{x:Type ScrollBar}">
48        <Setter Property="OverridesDefaultStyle" Value="true"/>
49        <Style.Triggers>
50            <!--縦向きのスクロールバー-->
51            <Trigger Property="Orientation" Value="Vertical">
52                <Setter Property="Width" Value="10"/>
53                <Setter Property="Height" Value="Auto" />
54                <Setter Property="Margin">
55                    <Setter.Value>
56                        <Thickness Left="0" Top="{StaticResource MarginSize}" Right="{StaticResource MarginSize}" Bottom="{StaticResource MarginSize}" />
57                    </Setter.Value>
58                </Setter>
59                <Setter Property="Template">
60                    <Setter.Value>
61                        <ControlTemplate>
62                            <Grid>
63                                <Grid.RowDefinitions>
64                                    <RowDefinition MaxHeight="{StaticResource ScrollBarRepeatButtonSize}"/>
65                                    <RowDefinition/>
66                                    <RowDefinition MaxHeight="{StaticResource ScrollBarRepeatButtonSize}"/>
67                                </Grid.RowDefinitions>
68                                <Border Grid.RowSpan="3" CornerRadius="30" Background="{StaticResource ScrollBarTrackBrush}" />
69                                <RepeatButton Grid.Row="0" Height="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineUpCommand"  />
70                                <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
71                                    <Track.DecreaseRepeatButton>
72                                        <RepeatButton Style="{StaticResource ScrollBarTrackStyle}"  Command="ScrollBar.PageUpCommand" />
73                                    </Track.DecreaseRepeatButton>
74                                    <Track.Thumb>
75                                        <Thumb Style="{StaticResource ScrollBarThumbStyle}"  Margin="0,1,0,1"/>
76                                    </Track.Thumb>
77                                    <Track.IncreaseRepeatButton>
78                                        <RepeatButton Style="{StaticResource ScrollBarTrackStyle}" Command="ScrollBar.PageDownCommand" />
79                                    </Track.IncreaseRepeatButton>
80                                </Track>
81                                <RepeatButton Grid.Row="2" Height="{StaticResource ScrollBarRepeatButtonSize}"  Command="ScrollBar.LineDownCommand" />
82                            </Grid>
83                        </ControlTemplate>
84                    </Setter.Value>
85                </Setter>
86            </Trigger>
87            <!--横向きのスクロールバー-->
88            <Trigger Property="Orientation" Value="Horizontal">
89                <Setter Property="Width" Value="Auto"/>
90                <Setter Property="Height" Value="10" />
91                <Setter Property="Margin">
92                    <Setter.Value>
93                        <Thickness Left="{StaticResource MarginSize}" Top="0" Right="{StaticResource MarginSize}" Bottom="{StaticResource MarginSize}" />
94                    </Setter.Value>
95                </Setter>
96                <Setter Property="Template">
97                    <Setter.Value>
98                        <ControlTemplate>
99                            <Grid>
100                                <Grid.ColumnDefinitions>
101                                    <ColumnDefinition MaxWidth="{StaticResource ScrollBarRepeatButtonSize}"/>
102                                    <ColumnDefinition/>
103                                    <ColumnDefinition MaxWidth="{StaticResource ScrollBarRepeatButtonSize}"/>
104                                </Grid.ColumnDefinitions>
105                                <Border Grid.ColumnSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarTrackBrush}" />
106                                <RepeatButton Grid.Column="0" Width="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineLeftCommand"/>
107                                <Track x:Name="PART_Track" Grid.Column="1" IsDirectionReversed="false">
108                                    <Track.DecreaseRepeatButton>
109                                        <RepeatButton Style="{StaticResource ScrollBarTrackStyle}"  Command="ScrollBar.PageLeftCommand" />
110                                    </Track.DecreaseRepeatButton>
111                                    <Track.Thumb>
112                                        <Thumb Style="{StaticResource ScrollBarThumbStyle}"  Margin="1,0,1,0"/>
113                                    </Track.Thumb>
114                                    <Track.IncreaseRepeatButton>
115                                        <RepeatButton Style="{StaticResource ScrollBarTrackStyle}" Command="ScrollBar.PageRightCommand" />
116                                    </Track.IncreaseRepeatButton>
117                                </Track>
118                                <RepeatButton Grid.Column="2" Width="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineRightCommand"/>
119                            </Grid>
120                        </ControlTemplate>
121                    </Setter.Value>
122                </Setter>
123            </Trigger>
124        </Style.Triggers>
125    </Style>
126
127    <!-- カスタム ScrollViewer のスタイル -->
128    <Style x:Key="CustomScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
129        <Setter Property="Template">
130            <Setter.Value>
131                <ControlTemplate TargetType="{x:Type ScrollViewer}">
132                    <Grid>
133                        <Grid.ColumnDefinitions>
134                            <ColumnDefinition/>
135                            <ColumnDefinition Width="Auto"/>
136                        </Grid.ColumnDefinitions>
137                        <Grid.RowDefinitions>
138                            <RowDefinition/>
139                            <RowDefinition Height="Auto"/>
140                        </Grid.RowDefinitions>
141                        <ScrollContentPresenter Grid.Column="0" Grid.Row="0">
142                            <ScrollContentPresenter.Margin>
143                                <Thickness Left="{StaticResource MarginSize}" Top="{StaticResource MarginSize}" Right="{StaticResource MarginSize}" Bottom="{StaticResource MarginSize}" />
144                            </ScrollContentPresenter.Margin>
145                        </ScrollContentPresenter>
146                        <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="1" Grid.Row="0" Orientation="Vertical" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Style="{StaticResource CustomScrollBarStyle}"/>
147                        <ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Style="{StaticResource CustomScrollBarStyle}"/>
148                        <Border Grid.Column="1" Grid.Row="1" />
149                    </Grid>
150                </ControlTemplate>
151            </Setter.Value>
152        </Setter>
153    </Style>
154</ResourceDictionary>
155

スタイル適用前のデータグリッド
![]
###補足情報(言語/FW/ツール等のバージョンなど)
.NetFramework 4.5

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

回答1件

ベストアンサー

DataGrid内のScrollViewer（DG_ScrollViewer）はテンプレートが当たっているため、ScrollBarのスタイルをいじることになります。
wpf/DataGrid.xaml at release/5.0 · dotnet/wpf

xml
1<!--  カスタムスクロールバーのスタイル  -->
2<Style TargetType="{x:Type ScrollBar}">

とx:Keyなし（既定を上書き）にした上で、アプリ全体でよければApp.xamlにマージします。
DataGridだけでいい場合は、こんな感じでいいと思います。

xml
1<DataGrid.Resources>
2  <ResourceDictionary Source="Dictionary1.xaml" />
3</DataGrid.Resources>

投稿2020/11/10 22:03

編集2023/07/23 09:47

TN8001

総合スコア9387

add-1914

2020/11/10 23:55

ご回答いただきありがとうございます。理解が追いつかなくてまだよくわかっていないのですが、DataGrid 内のScrollViewer.Template内のScrollbarのスタイルを変更するという認識でよろしいでしょうか？その場合カラムの指定等の盛り込みは、Template内に追加しないと反映されないのではないかとおもったのですが・・・以下のようなテンプレート(まだ途中ですが・・)をグリッドをユーザコントロール側のスタイルに適用する形になりますか・・（申し訳ありません。まだ認識があやふやなので認識が違うかもしれません・・） <Style TargetType="{x:Type DataGrid}" x:Key="CustomGrid"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGrid}"> <ScrollViewer x:Name="DG_ScrollViewer" Focusable="False" Style="{DynamicResource CustomScrollViewerStyle}"> <ScrollViewer.Template> <ControlTemplate TargetType="ScrollViewer"> <Grid> <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="7" CanContentScroll="{TemplateBinding CanContentScroll}"/> <ScrollBar x:Name="PART_VerticalScrollBar" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Style="{DynamicResource CustomScrollBarStyle}" ViewportSize="{TemplateBinding ViewportHeight}"/> <ScrollBar x:Name="PART_HorizotalScrollBar" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}"/> </Grid> </ControlTemplate> </ScrollViewer.Template> </ScrollViewer> </ControlTemplate> </Setter.Value> </Setter> </Style>

add-1914

2020/11/11 00:04

x:keyなしにすることで、何も定義しなくても規定のものを利用できるということでしょうか？

add-1914

2020/11/11 00:37

教えていただいた形で、自分で定義したカスタムスクロールバーのスタイルまでを Style.xaml（スタイル定義用xamlファイル）に定義して、ユーザコントロール側で、ユーザコントロール側で、 <DataGrid.Resource> <ResorceDictionary Sorce="Style.xaml"/> </DataGrid.Resource> と定義し、あとはそのままユーザコントロールのスタイルを適用したところ思っていた形でスクロールバーの変更ができました。本当にありがとうございます。

TN8001

2020/11/11 02:59

希望の見た目にできたようで何よりです^^ ちょっと混乱させてしまった気がします。 DataGridのTemplateも元々変えるつもりでしたら、 <ScrollBar x:Name="PART_VerticalScrollBar" Style="{StaticResource CustomScrollBarStyle}" とキー付きで書いたものを明示的に参照して（も）いいです。 >x:keyなしにすることで、何も定義しなくても規定のものを利用できるということでしょうか？既定を置き換えるって感じですかね？（暗黙のキー） https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/fundamentals/xaml-resources-define#styles-datatemplates-and-implicit-keys ScrollBarだけを置き換えたい時に、DataGridのTemplateを書かずに済ますのが回答の方法です。暗黙のキーを使って狙った階層以下（例えば特定のWindowやGridの子とかDataGridの中だけとか）に要素のスタイルを適用します。もちろん明示的にスタイルが書かれている場合はこの方法は使えません。つまりアプリ全体としてあるテーマを適用するような場合（[MahApps.Metro - Home](https://mahapps.com/ のような）は暗黙のキーが頻出することになります。一方明示的なスタイルでカスタマイズした場合、MahApps.Metro等を入れても見た目が変わることはありません。このようなものを入れる気がないならキーの有り無しはあまり関係しませんが、後から入れる可能性がある場合は理解して使い分ける必要があります（と言っても私もできていませんがｗ

add-1914

2020/11/11 06:54 編集

より詳しい内容をお話してくださりありがとうございます。 >DataGridのTemplateも元々変えるつもりでしたら、 <ScrollBar x:Name="PART_VerticalScrollBar" Style="{StaticResource CustomScrollBarStyle}" とキー付きで書いたものを明示的に参照こちらはDataGrid　Template内のScrollBarタグ内でStyleに、 x:key で指定したCustomScrollBarStyle などを明示的に参照する認識でよろしいでしょうか？ x:keyで明示的に指定しないことで暗黙のキーが利用できることは知りませんでした。要素内の特定部分だけを置き換えたい場合などに、とても便利だと感じたので、今後も利用していきたいです。フレームワークとして全体に適用する場合は暗黙のキーを利用して、全体のスタイル統一を行い、部分的に変更したい場合はx:Keyでキーを指定したスタイルを適用することで、一部分だけスタイル変更が可能ということですね。どのシーンで使うのかがイメージできなかったのですが、ご説明いただいた内容でわかりました。わかりやすく説明してくださりありがとうございます。

TN8001

2020/11/11 07:00

>x:key で指定したCustomScrollBarStyle などを明示的に参照する認識でよろしいでしょうか。そうです。「そうしてもいい」という意味です。明示するか暗黙でやるかは、add-1914さんにとっての都合のいいほうでやってください^^

add-1914

2020/11/11 09:59

承知いたしました。ありがとうございます、勉強になります。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

WPF　DataGrid内部のスクロールバーのスタイル変更方法がわからない

関連した質問