首页 > 代码库 > ScrollBar 滚动条的样式

ScrollBar 滚动条的样式

下面是一个简单的示例

 1 <ControlTemplate x:Key="ScrollBackground" TargetType="RepeatButton"> 2     <Border Background="Transparent"/> 3 </ControlTemplate> 4  5 <Style x:Key="ScrollThumbStyle" TargetType="Thumb"> 6     <Setter Property="SnapsToDevicePixels" Value="True"/> 7     <Setter Property="OverridesDefaultStyle" Value="true"/> 8     <Setter Property="IsTabStop" Value="false"/> 9     <Setter Property="Focusable" Value="false"/>10     <Setter Property="Template">11         <Setter.Value>12             <ControlTemplate TargetType="Thumb">13                 <Rectangle Width="15" Fill="#AAA" RadiusX="10" RadiusY="10">14                 </Rectangle>15             </ControlTemplate>16         </Setter.Value>17     </Setter>18 </Style>19 20 <Style TargetType="ScrollBar">21     <Setter Property="Template">22         <Setter.Value>23             <ControlTemplate TargetType="ScrollBar">24                 <Grid>25                     <Track HorizontalAlignment="Center" Name="PART_Track" Width="{TemplateBinding Width}" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}"26                         Value="{TemplateBinding Value}"  IsDirectionReversed="true">27                         <Track.DecreaseRepeatButton>28                             <RepeatButton Template="{StaticResource ScrollBackground}" Command="ScrollBar.LineUpCommand"  />29                         </Track.DecreaseRepeatButton>30                         <Track.IncreaseRepeatButton>31                             <RepeatButton Template="{StaticResource ScrollBackground}" Command="ScrollBar.LineDownCommand" />32                         </Track.IncreaseRepeatButton>33                         <Track.Thumb>34                             <Thumb Style="{StaticResource ScrollThumbStyle}" />35                         </Track.Thumb>36                     </Track>37                 </Grid>38             </ControlTemplate>39         </Setter.Value>40     </Setter>41 </Style>

 

ScrollBar 滚动条的样式