C# WPF下自定义滚动条ScrollViewer样式

原文:C# WPF下自定义滚动条ScrollViewer样式

一、实现对ScrollViewer样式的自定义主要包括:
1、滚动条宽度设置
2、滚动条颜色
3、滚动条圆角
4、滚动条拉动时的效果mouseover
二、实现效果:
C# WPF下自定义滚动条ScrollViewer样式
三、实现方法
1、创建资源字典(ResourceDictionary)文件
由于style代码比较多,之间在控件文件中加载style比较混乱,也不利于其它窗口复用,这里单独创建了ScrollViewDictionary.xaml文件代码如下:

  1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  3. <ControlTemplate x:Key="MyScrollViewer" TargetType="{x:Type ScrollViewer}">
  4. <!--View区域背景色-->
  5. <Grid x:Name="Grid" Background="{TemplateBinding Background}">
  6. <Grid.ColumnDefinitions>
  7. <ColumnDefinition Width="*"/>
  8. <ColumnDefinition Width="Auto"/>
  9. </Grid.ColumnDefinitions>
  10. <Grid.RowDefinitions>
  11. <RowDefinition Height="*"/>
  12. <RowDefinition Height="Auto"/>
  13. </Grid.RowDefinitions>
  14. <Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/>
  15. <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
  16. <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
  17. <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource MyScrollBarStyle}"/>
  18. </Grid>
  19. </ControlTemplate>
  20. <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
  21. <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
  22. <Setter Property="OverridesDefaultStyle" Value="true"/>
  23. <Setter Property="Background" Value="Transparent"/>
  24. <Setter Property="Focusable" Value="false"/>
  25. <Setter Property="IsTabStop" Value="false"/>
  26. <Setter Property="Template">
  27. <Setter.Value>
  28. <ControlTemplate TargetType="{x:Type RepeatButton}">
  29. <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
  30. </ControlTemplate>
  31. </Setter.Value>
  32. </Setter>
  33. </Style>
  34. <!--滚动条颜色、圆角等设置-->
  35. <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
  36. <Setter Property="OverridesDefaultStyle" Value="true"/>
  37. <Setter Property="IsTabStop" Value="false"/>
  38. <Setter Property="Template">
  39. <Setter.Value>
  40. <ControlTemplate TargetType="{x:Type Thumb}">
  41. <!--滚动条颜色和圆角设置-->
  42. <Rectangle Name="thumbRect" Fill="#03ffea" RadiusX="3" RadiusY="3"/>
  43. <!--鼠标拉动滚动条时的颜色-->
  44. <ControlTemplate.Triggers>
  45. <Trigger Property="IsMouseOver" Value="True">
  46. <Setter Property="Fill" Value="CornflowerBlue" TargetName="thumbRect" />
  47. </Trigger>
  48. </ControlTemplate.Triggers>
  49. </ControlTemplate>
  50. </Setter.Value>
  51. </Setter>
  52. </Style>
  53. <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
  54. <Setter Property="OverridesDefaultStyle" Value="true"/>
  55. <Setter Property="Background" Value="Transparent"/>
  56. <Setter Property="Focusable" Value="false"/>
  57. <Setter Property="IsTabStop" Value="false"/>
  58. <Setter Property="Template">
  59. <Setter.Value>
  60. <ControlTemplate TargetType="{x:Type RepeatButton}">
  61. <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
  62. </ControlTemplate>
  63. </Setter.Value>
  64. </Setter>
  65. </Style>
  66. <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
  67. <Setter Property="Background" Value="AliceBlue"/>
  68. <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
  69. <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
  70. <!--滚动条宽度-->
  71. <Setter Property="Width" Value="8"/>
  72. <Setter Property="MinWidth" Value="6"/>
  73. <Setter Property="Template">
  74. <Setter.Value>
  75. <ControlTemplate TargetType="{x:Type ScrollBar}">
  76. <!--滚动条背景色-->
  77. <Grid x:Name="Bg" Background="#001f55" SnapsToDevicePixels="true" Width="8">
  78. <Grid.RowDefinitions>
  79. <RowDefinition />
  80. </Grid.RowDefinitions>
  81. <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
  82. <Track.DecreaseRepeatButton>
  83. <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
  84. </Track.DecreaseRepeatButton>
  85. <Track.IncreaseRepeatButton>
  86. <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
  87. </Track.IncreaseRepeatButton>
  88. <Track.Thumb>
  89. <Thumb Style="{StaticResource ScrollBarThumb}"/>
  90. </Track.Thumb>
  91. </Track>
  92. </Grid>
  93. <ControlTemplate.Triggers>
  94. <Trigger Property="IsEnabled" Value="false">
  95. <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
  96. </Trigger>
  97. </ControlTemplate.Triggers>
  98. </ControlTemplate>
  99. </Setter.Value>
  100. </Setter>
  101. <Style.Triggers>
  102. <Trigger Property="Orientation" Value="Horizontal">
  103. <Setter Property="Width" Value="Auto"/>
  104. <Setter Property="MinWidth" Value="0"/>
  105. <Setter Property="Height" Value="6"/>
  106. <Setter Property="MinHeight" Value="6"/>
  107. <Setter Property="Background" Value="AliceBlue"/>
  108. <Setter Property="Template">
  109. <Setter.Value>
  110. <ControlTemplate TargetType="{x:Type ScrollBar}">
  111. <Grid x:Name="Bg" Background="Red" SnapsToDevicePixels="true">
  112. <Grid.ColumnDefinitions>
  113. <ColumnDefinition />
  114. </Grid.ColumnDefinitions>
  115. <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
  116. <Track.DecreaseRepeatButton>
  117. <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
  118. </Track.DecreaseRepeatButton>
  119. <Track.IncreaseRepeatButton>
  120. <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
  121. </Track.IncreaseRepeatButton>
  122. <Track.Thumb>
  123. <Thumb Style="{StaticResource ScrollBarThumb}" />
  124. </Track.Thumb>
  125. </Track>
  126. </Grid>
  127. <ControlTemplate.Triggers>
  128. <Trigger Property="IsEnabled" Value="false">
  129. <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
  130. </Trigger>
  131. </ControlTemplate.Triggers>
  132. </ControlTemplate>
  133. </Setter.Value>
  134. </Setter>
  135. </Trigger>
  136. </Style.Triggers>
  137. </Style>
  138. </ResourceDictionary>

2、在窗口中引用资源字典 
  1. <Window.Resources>
  2. <ResourceDictionary>
  3. <ResourceDictionary.MergedDictionaries>
  4. <ResourceDictionary Source="ScrollViewDictionary.xaml" />
  5. </ResourceDictionary.MergedDictionaries>
  6. </ResourceDictionary>
  7. </Window.Resources>
3、scrollViewer中使用新样式
  1. <ScrollViewer Template="{StaticResource MyScrollViewer}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="350" Width="250">
  2. <StackPanel Orientation="Vertical" Name="layerList" ScrollViewer.VerticalScrollBarVisibility="Visible" Width="250" >
  3. </StackPanel>
  4. </ScrollViewer>

自定义完成,以上是所有步骤和代码,可以根据自己程序的整体设计来更改颜色、宽度、圆角等效果。


C# WPF下自定义滚动条ScrollViewer样式

上一篇:使用 GNU GCC 和 GDB 开发调试应用程序


下一篇:oracle查看被锁的表和被锁的进程,杀掉进程