WPF自定义ScrollViewer滚动条样式

    <!-- 滚动条颜色 -->
    <SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent"/>
    <SolidColorBrush x:Key="ScrollBarThumbNormal" Color="Black" Opacity="0.1" />
    <SolidColorBrush x:Key="ScrollBarThumbBright" Color="Black" Opacity="0.5" />
    <!-- 滚动条拇钮样式 -->
    <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="thumbRect" Fill="{StaticResource ScrollBarThumbNormal}" RadiusX="4" RadiusY="4"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Cursor" Value="Hand"/>
                            <Setter Property="Fill" Value="{StaticResource ScrollBarThumbBright}" TargetName="thumbRect" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Fill" Value="{StaticResource ScrollBarThumbNormal}" TargetName="thumbRect" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 水平滚动条样式 -->
    <Style x:Key="HorizontalScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource ScrollBarBackground}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="PART_Background" SnapsToDevicePixels="True" Background="{StaticResource ScrollBarBackground}">
                        <Track x:Name="PART_Track" IsDirectionReversed="False" IsEnabled="{TemplateBinding IsMouseOver}">
                            <Track.Thumb>
                                <Thumb x:Name="PART_Thumb" Style="{StaticResource ScrollBarThumbStyle}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 垂直滚动条样式 -->
    <Style x:Key="VerticalScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource ScrollBarBackground}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="PART_Background" SnapsToDevicePixels="True" Background="{StaticResource ScrollBarBackground}">
                        <Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
                            <Track.Thumb>
                                <Thumb x:Name="PART_Thumb" Style="{StaticResource ScrollBarThumbStyle}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 细滚动视图样式 -->
    <Style x:Key="ThinScrollViewer" TargetType="ScrollViewer">
        <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="Corner" Grid.Row="1" Grid.Column="1" Fill="{StaticResource ScrollBarBackground}" RadiusX="4" RadiusY="4"/>
                        <ScrollContentPresenter 
                            x:Name="PART_ScrollContentPresenter" 
                            Grid.Row="0" Grid.Column="0" 
                            Margin="{TemplateBinding Padding}" 
                            CanContentScroll="{TemplateBinding CanContentScroll}" 
                            CanHorizontallyScroll="False" 
                            CanVerticallyScroll="False" 
                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                            Content="{TemplateBinding Content}" />
                        <ScrollBar 
                            x:Name="PART_HorizontalScrollBar" 
                            Height="4" MinHeight="4" 
                            Style="{DynamicResource HorizontalScrollBarStyle}" 
                            Grid.Row="1" Grid.Column="0" 
                            Orientation="Horizontal" 
                            AutomationProperties.AutomationId="HorizontalScrollBar"
                            Minimum="0"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                            Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                            ViewportSize="{TemplateBinding ViewportWidth}" 
                            Width="Auto" MinWidth="0"/>
                        <ScrollBar 
                            x:Name="PART_VerticalScrollBar" 
                            Width="4" MinWidth="4" 
                            Style="{DynamicResource VerticalScrollBarStyle}" 
                            Grid.Row="0" Grid.Column="1" 
                            Orientation="Vertical" 
                            AutomationProperties.AutomationId="VerticalScrollBar" 
                            Minimum="0" 
                            Maximum="{TemplateBinding ScrollableHeight}" 
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                            ViewportSize="{TemplateBinding ViewportHeight}" 
                            Height="Auto" MinHeight="0"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- 粗滚动视图样式 -->
    <Style x:Key="ThickScrollViewer" TargetType="ScrollViewer">
        <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="Corner" Grid.Row="1" Grid.Column="1" Fill="{StaticResource ScrollBarBackground}" RadiusX="4" RadiusY="4"/>
                        <ScrollContentPresenter
                            x:Name="PART_ScrollContentPresenter" 
                            Grid.Row="0" Grid.Column="0"
                            CanHorizontallyScroll="False" 
                            CanVerticallyScroll="False" 
                            CanContentScroll="{TemplateBinding CanContentScroll}" 
                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                            Content="{TemplateBinding Content}" 
                            Margin="{TemplateBinding Padding}"/>
                        <ScrollBar 
                            x:Name="PART_HorizontalScrollBar" 
                            Height="8" MinHeight="8" 
                            Style="{DynamicResource HorizontalScrollBarStyle}" 
                            Grid.Row="1" Grid.Column="0" 
                            Orientation="Horizontal" 
                            AutomationProperties.AutomationId="HorizontalScrollBar"
                            Minimum="0"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                            Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                            ViewportSize="{TemplateBinding ViewportWidth}" 
                            Width="Auto" MinWidth="0"/>
                        <ScrollBar 
                            x:Name="PART_VerticalScrollBar" 
                            Width="8" MinWidth="8" 
                            Style="{DynamicResource VerticalScrollBarStyle}" 
                            Grid.Row="0" Grid.Column="1" 
                            Orientation="Vertical" 
                            AutomationProperties.AutomationId="VerticalScrollBar" 
                            Minimum="0" 
                            Maximum="{TemplateBinding ScrollableHeight}" 
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                            ViewportSize="{TemplateBinding ViewportHeight}" 
                            Height="Auto" MinHeight="0"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

猜你喜欢

转载自blog.csdn.net/FireGhost57/article/details/87519721