[WPF,XAML,ScrollBar,ScrollViewer,Style] 自定义滚动条

自定义 ScrollViewer 的滚动条样式，如下图所示：

ScrollBar 在滚动时会自动显示并隐藏，而且 ScrollBar 存在于 Viewport 的区域中。

ScrollViewer.xaml

[html] view plaincopy

1. <ResourceDictionary  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
4.   
5.     <Style x:Key="ScrollBarThumb"  
6.            TargetType="{x:Type Thumb}">  
7.         <Setter Property="OverridesDefaultStyle"  
8.                 Value="true"/>  
9.         <Setter Property="IsTabStop"  
10.                 Value="false"/>  
11.         <Setter Property="Template">  
12.             <Setter.Value>  
13.                 <ControlTemplate TargetType="{x:Type Thumb}">  
14.                     <Grid>  
15.                         <Rectangle  
16.                             Fill="#90000000"  
17.                             RadiusX="3"  
18.                             RadiusY="3"/>  
19.                     </Grid>  
20.                 </ControlTemplate>  
21.             </Setter.Value>  
22.         </Setter>  
23.     </Style>  
24.     <Style x:Key="HorizontalScrollBarPageButton"  
25.            TargetType="{x:Type RepeatButton}">  
26.         <Setter Property="OverridesDefaultStyle"  
27.                 Value="true"/>  
28.         <Setter Property="Background"  
29.                 Value="Transparent"/>  
30.         <Setter Property="Focusable"  
31.                 Value="false"/>  
32.         <Setter Property="IsTabStop"  
33.                 Value="false"/>  
34.         <Setter Property="Opacity"  
35.                 Value="0"/>  
36.         <Setter Property="Template">  
37.             <Setter.Value>  
38.                 <ControlTemplate TargetType="{x:Type RepeatButton}">  
39.                     <Rectangle Fill="{TemplateBinding Background}"  
40.                                Width="{TemplateBinding Width}"  
41.                                Height="{TemplateBinding Height}"/>  
42.                 </ControlTemplate>  
43.             </Setter.Value>  
44.         </Setter>  
45.     </Style>  
46.     <Style x:Key="VerticalScrollBarPageButton"  
47.            TargetType="{x:Type RepeatButton}">  
48.         <Setter Property="OverridesDefaultStyle"  
49.                 Value="true"/>  
50.         <Setter Property="Background"  
51.                 Value="Transparent"/>  
52.         <Setter Property="Focusable"  
53.                 Value="false"/>  
54.         <Setter Property="IsTabStop"  
55.                 Value="false"/>  
56.         <Setter Property="Opacity"  
57.                 Value="0"/>  
58.         <Setter Property="Template">  
59.             <Setter.Value>  
60.                 <ControlTemplate TargetType="{x:Type RepeatButton}">  
61.                     <Rectangle Fill="{TemplateBinding Background}"  
62.                                Width="{TemplateBinding Width}"  
63.                                Height="{TemplateBinding Height}"/>  
64.                 </ControlTemplate>  
65.             </Setter.Value>  
66.         </Setter>  
67.     </Style>  
68.     <Style x:Key="for_scrollbar"  
69.            TargetType="{x:Type ScrollBar}">  
70.         <Setter Property="Stylus.IsPressAndHoldEnabled"  
71.                 Value="false"/>  
72.         <Setter Property="Stylus.IsFlicksEnabled"  
73.                 Value="false"/>  
74.         <Setter Property="Background"  
75.                 Value="Transparent"/>  
76.         <Setter Property="Margin"  
77.                 Value="0,1,1,6"/>  
78.         <Setter Property="Width"  
79.                 Value="5"/>  
80.         <Setter Property="MinWidth"  
81.                 Value="5"/>  
82.         <Setter Property="Opacity"  
83.                 Value="0"/>  
84.         <Setter Property="Template">  
85.             <Setter.Value>  
86.                 <ControlTemplate TargetType="{x:Type ScrollBar}">  
87.                     <Grid x:Name="Bg" SnapsToDevicePixels="true">  
88.                         <Track x:Name="PART_Track"  
89.                                IsEnabled="{TemplateBinding IsMouseOver}"  
90.                                IsDirectionReversed="true">  
91.                             <Track.DecreaseRepeatButton>  
92.                                 <RepeatButton  
93.                                     Style="{StaticResource VerticalScrollBarPageButton}"  
94.                                     Command="{x:Static ScrollBar.PageUpCommand}"/>  
95.                             </Track.DecreaseRepeatButton>  
96.                             <Track.IncreaseRepeatButton>  
97.                                 <RepeatButton  
98.                                     Style="{StaticResource VerticalScrollBarPageButton}"  
99.                                     Command="{x:Static ScrollBar.PageDownCommand}"/>  
100.                             </Track.IncreaseRepeatButton>  
101.                             <Track.Thumb>  
102.                                 <Thumb Style="{StaticResource ScrollBarThumb}"/>  
103.                             </Track.Thumb>  
104.                         </Track>  
105.                     </Grid>  
106.                 </ControlTemplate>  
107.             </Setter.Value>  
108.         </Setter>  
109.         <Style.Triggers>  
110.             <Trigger Property="Orientation"  
111.                      Value="Horizontal">  
112.                 <Setter Property="Background"  
113.                         Value="Transparent"/>  
114.                 <Setter Property="Margin"  
115.                         Value="1,0,6,1"/>  
116.                 <Setter Property="Height"  
117.                         Value="5"/>  
118.                 <Setter Property="MinHeight"  
119.                         Value="5"/>  
120.                 <Setter Property="Width"  
121.                         Value="Auto"/>  
122.                 <Setter Property="Opacity"  
123.                         Value="0"/>  
124.                 <Setter Property="Template">  
125.                     <Setter.Value>  
126.                         <ControlTemplate TargetType="{x:Type ScrollBar}">  
127.                             <Grid x:Name="Bg" SnapsToDevicePixels="true">  
128.                                 <Track x:Name="PART_Track"  
129.                                        IsEnabled="{TemplateBinding IsMouseOver}">  
130.                                     <Track.DecreaseRepeatButton>  
131.                                         <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  
132.                                                       Command="{x:Static ScrollBar.PageLeftCommand}"/>  
133.                                     </Track.DecreaseRepeatButton>  
134.                                     <Track.IncreaseRepeatButton>  
135.                                         <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  
136.                                                       Command="{x:Static ScrollBar.PageRightCommand}"/>  
137.                                     </Track.IncreaseRepeatButton>  
138.                                     <Track.Thumb>  
139.                                         <Thumb Style="{StaticResource ScrollBarThumb}"/>  
140.                                     </Track.Thumb>  
141.                                 </Track>  
142.                             </Grid>  
143.                         </ControlTemplate>  
144.                     </Setter.Value>  
145.                 </Setter>  
146.             </Trigger>  
147.         </Style.Triggers>  
148.     </Style>  
149.   
150.     <!-- ScrollViewer -->  
151.     <Style x:Key="for_scrollviewer"  
152.            TargetType="{x:Type ScrollViewer}">  
153.         <Setter Property="BorderBrush"  
154.                 Value="LightGray"/>  
155.         <Setter Property="BorderThickness"  
156.                 Value="0"/>  
157.         <Setter Property="HorizontalContentAlignment"  
158.                 Value="Left"/>  
159.         <Setter Property="HorizontalScrollBarVisibility"  
160.                 Value="Auto"/>  
161.         <Setter Property="VerticalContentAlignment"  
162.                 Value="Top"/>  
163.         <Setter Property="VerticalScrollBarVisibility"  
164.                 Value="Auto"/>  
165.         <Setter Property="Template">  
166.             <Setter.Value>  
167.                 <ControlTemplate TargetType="{x:Type ScrollViewer}">  
168.                     <Border BorderBrush="{TemplateBinding BorderBrush}"  
169.                             BorderThickness="{TemplateBinding BorderThickness}"  
170.                             SnapsToDevicePixels="True">  
171.                         <Grid Background="{TemplateBinding Background}">  
172.                             <ScrollContentPresenter  
173.                                 Cursor="{TemplateBinding Cursor}"  
174.                                 Margin="{TemplateBinding Padding}"  
175.                                 ContentTemplate="{TemplateBinding ContentTemplate}"/>  
176.                             <ScrollBar x:Name="PART_VerticalScrollBar"  
177.                                        HorizontalAlignment="Right"  
178.                                        Maximum="{TemplateBinding ScrollableHeight}"  
179.                                        Orientation="Vertical"  
180.                                        Style="{StaticResource for_scrollbar}"  
181.                                        ViewportSize="{TemplateBinding ViewportHeight}"  
182.                                        Value="{TemplateBinding VerticalOffset}"  
183.                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>  
184.                             <ScrollBar x:Name="PART_HorizontalScrollBar"  
185.                                        Maximum="{TemplateBinding ScrollableWidth}"  
186.                                        Orientation="Horizontal"  
187.                                        Style="{StaticResource for_scrollbar}"  
188.                                        VerticalAlignment="Bottom"  
189.                                        Value="{TemplateBinding HorizontalOffset}"  
190.                                        ViewportSize="{TemplateBinding ViewportWidth}"  
191.                                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>  
192.                         </Grid>  
193.                     </Border>  
194.                     <ControlTemplate.Triggers>  
195.                         <EventTrigger RoutedEvent="ScrollChanged">  
196.                             <BeginStoryboard>  
197.                                 <Storyboard>  
198.                                     <DoubleAnimation  
199.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
200.                                         Storyboard.TargetProperty="Opacity"  
201.                                         To="1"  
202.                                         Duration="0:0:1"/>  
203.                                     <DoubleAnimation  
204.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
205.                                         Storyboard.TargetProperty="Opacity"  
206.                                         To="0"  
207.                                         Duration="0:0:1"  
208.                                         BeginTime="0:0:1"/>  
209.                                     <DoubleAnimation  
210.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
211.                                         Storyboard.TargetProperty="Opacity"  
212.                                         To="1"  
213.                                         Duration="0:0:1"/>  
214.                                     <DoubleAnimation  
215.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
216.                                         Storyboard.TargetProperty="Opacity"  
217.                                         To="0"  
218.                                         Duration="0:0:1"  
219.                                         BeginTime="0:0:1"/>  
220.                                 </Storyboard>  
221.                             </BeginStoryboard>  
222.                         </EventTrigger>  
223.                         <EventTrigger RoutedEvent="MouseEnter"  
224.                                       SourceName="PART_VerticalScrollBar">  
225.                             <BeginStoryboard>  
226.                                 <Storyboard>  
227.                                     <DoubleAnimation  
228.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
229.                                         Storyboard.TargetProperty="Opacity"  
230.                                         To="1"  
231.                                         Duration="0:0:1"/>  
232.                                 </Storyboard>  
233.                             </BeginStoryboard>  
234.                         </EventTrigger>  
235.                         <EventTrigger RoutedEvent="MouseLeave"  
236.                                       SourceName="PART_VerticalScrollBar">  
237.                             <BeginStoryboard>  
238.                                 <Storyboard>  
239.                                     <DoubleAnimation  
240.                                         Storyboard.TargetName="PART_VerticalScrollBar"  
241.                                         Storyboard.TargetProperty="Opacity"  
242.                                         To="0"  
243.                                         Duration="0:0:1"/>  
244.                                 </Storyboard>  
245.                             </BeginStoryboard>  
246.                         </EventTrigger>  
247.                         <EventTrigger RoutedEvent="MouseEnter"  
248.                                       SourceName="PART_HorizontalScrollBar">  
249.                             <BeginStoryboard>  
250.                                 <Storyboard>  
251.                                     <DoubleAnimation  
252.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
253.                                         Storyboard.TargetProperty="Opacity"  
254.                                         To="1"  
255.                                         Duration="0:0:1"/>  
256.                                 </Storyboard>  
257.                             </BeginStoryboard>  
258.                         </EventTrigger>  
259.                         <EventTrigger RoutedEvent="MouseLeave"  
260.                                       SourceName="PART_HorizontalScrollBar">  
261.                             <BeginStoryboard>  
262.                                 <Storyboard>  
263.                                     <DoubleAnimation  
264.                                         Storyboard.TargetName="PART_HorizontalScrollBar"  
265.                                         Storyboard.TargetProperty="Opacity"  
266.                                         To="0"  
267.                                         Duration="0:0:1"/>  
268.                                 </Storyboard>  
269.                             </BeginStoryboard>  
270.                         </EventTrigger>  
271.                     </ControlTemplate.Triggers>  
272.                 </ControlTemplate>  
273.             </Setter.Value>  
274.         </Setter>  
275.     </Style>  
276.   
277. </ResourceDictionary>  

MainWindow.xaml

[html] view plaincopy

1. <Window x:Class="WpfApplication1.MainWindow"  
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.         Title="MainWindow" Height="300" Width="300">  
5.     <Window.Resources>  
6.         <ResourceDictionary>  
7.             <ResourceDictionary.MergedDictionaries>  
8.                 <ResourceDictionary Source="resources/scrollviewer.xaml"/>  
9.             </ResourceDictionary.MergedDictionaries>  
10.         </ResourceDictionary>  
11.     </Window.Resources>  
12.       
13.     <Grid>  
14.         <ContentControl Margin="10">  
15.             <ContentControl.Template>  
16.                 <ControlTemplate TargetType="{x:Type ContentControl}">  
17.                     <ScrollViewer Style="{StaticResource for_scrollviewer}">  
18.                         <ContentPresenter/>  
19.                     </ScrollViewer>  
20.                 </ControlTemplate>  
21.             </ContentControl.Template>  
22.             <Canvas Height="1600" Width="1600" Background="AliceBlue">  
23.                   
24.             </Canvas>  
25.         </ContentControl>  
26.     </Grid>  
27. </Window>  

这个滚动样式同样可以应用到其他控件，例如： ItemsControl，有兴趣的朋友可以试试！