WPF 에서 Scrollbar 꾸미기
WPF 에서 Scrollbar 꾸미기
WPF 에서 Scrollbar Style 을 꾸미는 법을 간단하게 알아보겠습니다.
1. Scrollbar Style 비교
Default Scrollbar Style
Chrome Scrollbar Style
2. Scrollbar 구조
Scrollbar 의 구조는 Vertical 기준 3행으로 구성되어있다.
1행에는 Lineup Button 으로
RepeatButton컨트롤을 사용한다.2행에는
Track컨트롤이 이 들어가며 Track 안에DecreaseRepeatButton / Thumb / IncreaseRepaetButton을 사용한다.3행에는 LineDown Button 으로
RepeatButton컨트롤을 사용한다.
RepeatButton(Lineup)
RepeatButton(Pageup)
Thumb(스크롤 네모)
RepaetButton(PageDown)
RepeatButton(LineDown)
으로 구성되어있다고 생각해도 될 것 같다.
3. Scrollbar Style Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<Style TargetType="{x:Type ScrollBar}" x:Key="ChromeScrollbarStyle">
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="18" />
<Setter Property="Height" Value="Auto" />
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="#FCFCFC"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
<RowDefinition Height="0.00001*" />
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
</Grid.RowDefinitions>
<RepeatButton Content="▲"
Command="ScrollBar.LineUpCommand" >
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False" />
<Setter Property="TextElement.Foreground" Value="#8B8B8B" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="#FCFCFC"
BorderBrush="Black"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
<Track Grid.Row="1"
x:Name="PART_Track"
IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="#FCFCFC" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb>
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid Background="#FCFCFC">
<Border BorderThickness="{TemplateBinding BorderThickness}"
Margin="4 0"
Background="#8B8B8B"
CornerRadius="5">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="#FCFCFC" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2"
Content="▼"
Command="ScrollBar.LineDownCommand" >
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="False" />
<Setter Property="TextElement.Foreground" Value="#8B8B8B" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="#FCFCFC"
BorderBrush="Black"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.