样式1 直角
1 <Style x:Key="RightAngleScrollViewer" 2 TargetType="{x:Type ScrollViewer}"> 3 <Setter Property="OverridesDefaultStyle" Value="True"/> 4 <Setter Property="CanContentScroll" Value="True"></Setter> 5 <Style.Resources> 6 <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#D6D4D4" /> 7 <SolidColorBrush x:Key="NormalBrush" Color="Transparent" /> 8 <SolidColorBrush x:Key="NormalBorderBrush" Color="#D6D4D4" /> 9 <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#D6D4D4" /> 10 <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#D6D4D4" /> 11 <!--方向箭头颜色--> 12 <SolidColorBrush x:Key="GlyphBrush" Color="Black" /> 13 <LinearGradientBrush x:Key="PressedBrush" 14 StartPoint="0,0" EndPoint="0,1"> 15 <GradientBrush.GradientStops> 16 <GradientStopCollection> 17 <GradientStop Color="#BBB" Offset="0.0"/> 18 <GradientStop Color="#EEE" Offset="0.1"/> 19 <GradientStop Color="#EEE" Offset="0.9"/> 20 <GradientStop Color="#FFF" Offset="1.0"/> 21 </GradientStopCollection> 22 </GradientBrush.GradientStops> 23 </LinearGradientBrush> 24 <!--方向箭头按钮--> 25 <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}"> 26 <Setter Property="SnapsToDevicePixels" Value="True"/> 27 <Setter Property="OverridesDefaultStyle" Value="true"/> 28 <Setter Property="Focusable" Value="false"/> 29 <Setter Property="Template"> 30 <Setter.Value> 31 <ControlTemplate TargetType="{x:Type RepeatButton}"> 32 <Border Name="Border" Margin="1" Background="{StaticResource NormalBrush}"> 33 <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource GlyphBrush}" 34 Data="{Binding Path=Content, 35 RelativeSource={RelativeSource TemplatedParent}}" /> 36 </Border> 37 <ControlTemplate.Triggers> 38 <!--选择箭头时的背景色--> 39 <Trigger Property="IsPressed" Value="true"> 40 <Setter TargetName="Border" Property="Background" 41 Value="#6A6A6A" /> 42 </Trigger> 43 <!--鼠标悬浮时 设置透明度--> 44 <Trigger Property="IsMouseOver" Value="True"> 45 <Setter Property="Opacity" TargetName="Border" Value="0.8"></Setter> 46 </Trigger> 47 <Trigger Property="IsEnabled" Value="false"> 48 <Setter Property="Foreground" 49 Value="{StaticResource DisabledForegroundBrush}"/> 50 </Trigger> 51 </ControlTemplate.Triggers> 52 </ControlTemplate> 53 </Setter.Value> 54 </Setter> 55 </Style> 56 <!--滚动条显示部分样式--> 57 <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 58 <Setter Property="SnapsToDevicePixels" Value="True"/> 59 <Setter Property="OverridesDefaultStyle" Value="true"/> 60 <Setter Property="IsTabStop" Value="false"/> 61 <Setter Property="Focusable" Value="false"/> 62 <Setter Property="Template"> 63 <Setter.Value> 64 <ControlTemplate TargetType="{x:Type RepeatButton}"> 65 <Border Background="Transparent" /> 66 </ControlTemplate> 67 </Setter.Value> 68 </Setter> 69 </Style> 70 <!--滚动条样式--> 71 <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 72 <Setter Property="SnapsToDevicePixels" Value="True"/> 73 <Setter Property="OverridesDefaultStyle" Value="true"/> 74 <Setter Property="IsTabStop" Value="false"/> 75 <Setter Property="Width" Value="8"/> 76 <Setter Property="Focusable" Value="false"/> 77 <Setter Property="Template"> 78 <Setter.Value> 79 <ControlTemplate TargetType="{x:Type Thumb}"> 80 <Border x:Name="border" Background="#D6D4D4" BorderBrush="{TemplateBinding BorderBrush}" 81 BorderThickness="0" /> 82 <ControlTemplate.Triggers> 83 <Trigger Property="IsMouseOver" Value="True"> 84 <Setter Property="Background" TargetName="border" Value="#6A6A6A"></Setter> 85 </Trigger> 86 </ControlTemplate.Triggers> 87 </ControlTemplate> 88 </Setter.Value> 89 </Setter> 90 </Style> 91 92 <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}"> 93 <Grid > 94 <Grid.RowDefinitions> 95 <RowDefinition MaxHeight="18"/> 96 <RowDefinition Height="*"/> 97 <RowDefinition MaxHeight="18"/> 98 </Grid.RowDefinitions> 99 <Border Grid.RowSpan="3" CornerRadius="2" Background="Transparent" BorderThickness="0" 100 BorderBrush="#D6D4D4" /> 101 <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButton}" 102 Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" /> 103 <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true"> 104 <Track.DecreaseRepeatButton> 105 <RepeatButton Style="{StaticResource ScrollBarPageButton}"/> 106 </Track.DecreaseRepeatButton> 107 <Track.Thumb> 108 <Thumb Style="{StaticResource ScrollBarThumb}" Margin="1,0,1,0" Background="{StaticResource HorizontalNormalBrush}" 109 BorderBrush="{StaticResource HorizontalNormalBorderBrush}" /> 110 </Track.Thumb> 111 <Track.IncreaseRepeatButton> 112 <RepeatButton 113 Style="{StaticResource ScrollBarPageButton}" 114 Command="ScrollBar.PageDownCommand" /> 115 </Track.IncreaseRepeatButton> 116 </Track> 117 <RepeatButton Grid.Row="3" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.PageDownCommand" Content="M 0 0 L 4 4 L 8 0 Z"/> 118 </Grid> 119 </ControlTemplate> 120 121 <Style x:Key="HScrollBarThumb" TargetType="{x:Type Thumb}"> 122 <Setter Property="SnapsToDevicePixels" Value="True"/> 123 <Setter Property="OverridesDefaultStyle" Value="true"/> 124 <Setter Property="IsTabStop" Value="false"/> 125 <Setter Property="Height" Value="9"/> 126 <Setter Property="HorizontalAlignment" Value="Stretch"/> 127 <Setter Property="Focusable" Value="false"/> 128 <Setter Property="Template"> 129 <Setter.Value> 130 <ControlTemplate TargetType="{x:Type Thumb}"> 131 <Border x:Name="border" CornerRadius="0" Background="#D6D4D4" 132 BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" /> 133 <ControlTemplate.Triggers> 134 <Trigger Property="IsMouseOver" Value="True"> 135 <Setter Property="Background" TargetName="border" Value="#6A6A6A"></Setter> 136 </Trigger> 137 </ControlTemplate.Triggers> 138 </ControlTemplate> 139 </Setter.Value> 140 </Setter> 141 </Style> 142 143 <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}"> 144 <Grid > 145 <Grid.ColumnDefinitions> 146 <ColumnDefinition MaxWidth="18"/> 147 <ColumnDefinition Width="*"/> 148 <ColumnDefinition MaxWidth="18"/> 149 </Grid.ColumnDefinitions> 150 <Border Grid.ColumnSpan="3" CornerRadius="2" Background="Transparent" BorderThickness="0" 151 BorderBrush="#D6D4D4" /> 152 <RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" /> 153 <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False"> 154 <Track.DecreaseRepeatButton> 155 <RepeatButton Style="{StaticResource ScrollBarPageButton}" 156 /> 157 </Track.DecreaseRepeatButton> 158 <Track.Thumb> 159 <Thumb Style="{StaticResource HScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}" 160 BorderBrush="{StaticResource NormalBorderBrush}" /> 161 </Track.Thumb> 162 <Track.IncreaseRepeatButton> 163 <RepeatButton Style="{StaticResource ScrollBarPageButton}" /> 164 </Track.IncreaseRepeatButton> 165 </Track> 166 <RepeatButton Grid.Column="2" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.PageRightCommand" 167 Content="M 0 0 L 4 4 L 0 8 Z"/> 168 </Grid> 169 </ControlTemplate> 170 <!--滚动条整体样式--> 171 <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}"> 172 <Setter Property="SnapsToDevicePixels" Value="True"/> 173 <Setter Property="OverridesDefaultStyle" Value="true"/> 174 <Style.Triggers> 175 <Trigger Property="Orientation" Value="Horizontal"> 176 <Setter Property="Width" Value="Auto"/> 177 <Setter Property="Height" Value="10" /> 178 <Setter Property="Template" 179 Value="{StaticResource HorizontalScrollBar}" /> 180 </Trigger> 181 <Trigger Property="Orientation" Value="Vertical"> 182 <Setter Property="Width" Value="10"/> 183 <Setter Property="Height" Value="Auto" /> 184 <Setter Property="Template" 185 Value="{StaticResource VerticalScrollBar}" /> 186 </Trigger> 187 </Style.Triggers> 188 </Style> 189 </Style.Resources> 190 </Style>
样式1 圆角
1 <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/> 2 <Style x:Key="FilletScrollViewer" TargetType="ScrollViewer"> 3 <Setter Property="Template"> 4 <Setter.Value> 5 <ControlTemplate TargetType="{x:Type ScrollViewer}"> 6 <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 7 <Grid.ColumnDefinitions> 8 <ColumnDefinition Width="*"/> 9 <ColumnDefinition Width="Auto"/> 10 </Grid.ColumnDefinitions> 11 <Grid.RowDefinitions> 12 <RowDefinition Height="*"/> 13 <RowDefinition Height="Auto"/> 14 </Grid.RowDefinitions> 15 <Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/> 16 <ScrollContentPresenter 17 x:Name="PART_ScrollContentPresenter" 18 CanContentScroll="{TemplateBinding CanContentScroll}" 19 CanHorizontallyScroll="False" 20 CanVerticallyScroll="False" 21 ContentTemplate="{TemplateBinding ContentTemplate}" 22 Content="{TemplateBinding Content}" 23 Grid.Column="0" 24 Margin="{TemplateBinding Padding}" 25 Grid.Row="0"/> 26 <ScrollBar 27 x:Name="PART_VerticalScrollBar" 28 AutomationProperties.AutomationId="VerticalScrollBar" 29 Cursor="Arrow" Grid.Column="1" 30 Maximum="{TemplateBinding ScrollableHeight}" 31 Minimum="0" Grid.Row="0" 32 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 33 Value="{Binding VerticalOffset, Mode=OneWay, 34 RelativeSource={RelativeSource TemplatedParent}}" 35 ViewportSize="{TemplateBinding ViewportHeight}" 36 Style="{DynamicResource MyScrollBarStyle}"/> 37 <ScrollBar 38 x:Name="PART_HorizontalScrollBar" 39 AutomationProperties.AutomationId="HorizontalScrollBar" 40 Cursor="Arrow" 41 Grid.Column="0" 42 Maximum="{TemplateBinding ScrollableWidth}" 43 Minimum="0" 44 Orientation="Horizontal" 45 Grid.Row="1" 46 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 47 Value="{Binding HorizontalOffset, Mode=OneWay, 48 RelativeSource={RelativeSource TemplatedParent}}" 49 ViewportSize="{TemplateBinding ViewportWidth}" 50 Style="{DynamicResource MyScrollBarStyle}"/> 51 </Grid> 52 </ControlTemplate> 53 </Setter.Value> 54 </Setter> 55 56 </Style> 57 58 <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 59 <Setter Property="OverridesDefaultStyle" Value="true"/> 60 <Setter Property="Background" Value="Transparent"/> 61 <Setter Property="Focusable" Value="false"/> 62 <Setter Property="IsTabStop" Value="false"/> 63 <Setter Property="Template"> 64 <Setter.Value> 65 <ControlTemplate TargetType="{x:Type RepeatButton}"> 66 <Rectangle Fill="{TemplateBinding Background}" 67 Height="{TemplateBinding Height}" 68 Width="{TemplateBinding Width}"/> 69 </ControlTemplate> 70 </Setter.Value> 71 </Setter> 72 </Style> 73 <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 74 <Setter Property="OverridesDefaultStyle" Value="true"/> 75 <Setter Property="IsTabStop" Value="false"/> 76 <Setter Property="Template"> 77 <Setter.Value> 78 <ControlTemplate TargetType="{x:Type Thumb}"> 79 <Rectangle Name="thumbRect" 80 Fill="LightGray" RadiusX="4" RadiusY="4"/> 81 <ControlTemplate.Triggers> 82 <Trigger Property="IsMouseOver" Value="True"> 83 <Setter Property="Fill" Value="Gray" TargetName="thumbRect" /> 84 </Trigger> 85 </ControlTemplate.Triggers> 86 </ControlTemplate> 87 </Setter.Value> 88 </Setter> 89 </Style> 90 <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 91 <Setter Property="OverridesDefaultStyle" Value="true"/> 92 <Setter Property="Background" Value="Transparent"/> 93 <Setter Property="Focusable" Value="false"/> 94 <Setter Property="IsTabStop" Value="false"/> 95 <Setter Property="Template"> 96 <Setter.Value> 97 <ControlTemplate TargetType="{x:Type RepeatButton}"> 98 <Rectangle Fill="{TemplateBinding Background}" 99 Height="{TemplateBinding Height}" 100 Width="{TemplateBinding Width}"/> 101 </ControlTemplate> 102 </Setter.Value> 103 </Setter> 104 </Style> 105 <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}"> 106 <Setter Property="Background" Value="AliceBlue"/> 107 <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> 108 <Setter Property="Stylus.IsFlicksEnabled" Value="false"/> 109 <Setter Property="Width" Value="8"/> 110 <Setter Property="MinWidth" Value="8"/> 111 <Setter Property="Template"> 112 <Setter.Value> 113 <ControlTemplate TargetType="{x:Type ScrollBar}"> 114 <Grid x:Name="Bg" Background="AliceBlue" 115 SnapsToDevicePixels="true" 116 Width="8"> 117 <Grid.RowDefinitions> 118 <RowDefinition /> 119 </Grid.RowDefinitions> 120 <Track x:Name="PART_Track" IsDirectionReversed="true" 121 IsEnabled="{TemplateBinding IsMouseOver}"> 122 <Track.DecreaseRepeatButton> 123 <RepeatButton 124 Command="{x:Static ScrollBar.PageUpCommand}" 125 Style="{StaticResource VerticalScrollBarPageButton}"/> 126 </Track.DecreaseRepeatButton> 127 <Track.IncreaseRepeatButton> 128 <RepeatButton 129 Command="{x:Static ScrollBar.PageDownCommand}" 130 Style="{StaticResource VerticalScrollBarPageButton}"/> 131 </Track.IncreaseRepeatButton> 132 <Track.Thumb> 133 <Thumb Style="{StaticResource ScrollBarThumb}"/> 134 </Track.Thumb> 135 </Track> 136 </Grid> 137 <ControlTemplate.Triggers> 138 <Trigger Property="IsEnabled" Value="false"> 139 <Setter Property="Background" TargetName="Bg" 140 Value="{StaticResource ScrollBarDisabledBackground}"/> 141 </Trigger> 142 </ControlTemplate.Triggers> 143 </ControlTemplate> 144 </Setter.Value> 145 </Setter> 146 <Style.Triggers> 147 <Trigger Property="Orientation" Value="Horizontal"> 148 <Setter Property="Width" Value="Auto"/> 149 <Setter Property="MinWidth" Value="0"/> 150 <Setter Property="Height" Value="8"/> 151 <Setter Property="MinHeight" Value="8"/> 152 <Setter Property="Background" Value="AliceBlue"/> 153 <Setter Property="Template"> 154 <Setter.Value> 155 <ControlTemplate 156 TargetType="{x:Type ScrollBar}"> 157 <Grid x:Name="Bg" 158 Background="AliceBlue" 159 SnapsToDevicePixels="true"> 160 <Grid.ColumnDefinitions> 161 <ColumnDefinition /> 162 </Grid.ColumnDefinitions> 163 <Track x:Name="PART_Track" 164 IsEnabled="{TemplateBinding IsMouseOver}"> 165 <Track.DecreaseRepeatButton> 166 <RepeatButton 167 Command="{x:Static ScrollBar.PageLeftCommand}" 168 Style="{StaticResource HorizontalScrollBarPageButton}"/> 169 </Track.DecreaseRepeatButton> 170 <Track.IncreaseRepeatButton> 171 <RepeatButton 172 Command="{x:Static ScrollBar.PageRightCommand}" 173 Style="{StaticResource HorizontalScrollBarPageButton}"/> 174 </Track.IncreaseRepeatButton> 175 <Track.Thumb> 176 <Thumb Style="{StaticResource ScrollBarThumb}" /> 177 </Track.Thumb> 178 </Track> 179 </Grid> 180 <ControlTemplate.Triggers> 181 <Trigger Property="IsEnabled" Value="false"> 182 <Setter Property="Background" 183 TargetName="Bg" 184 Value="{StaticResource ScrollBarDisabledBackground}"/> 185 </Trigger> 186 </ControlTemplate.Triggers> 187 </ControlTemplate> 188 </Setter.Value> 189 </Setter> 190 </Trigger> 191 </Style.Triggers> 192 </Style>
使用
直接在 App.xaml 的
1 <Application.Resources> 2 3 // 直角样式 4 5 // 圆角样式 6 7 <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource FilletScrollViewer}"></Style> 8 9 </Application.Resources>
效果：
