欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WPF自定义ScrollViewer滚动条样式

程序员文章站 2022-06-08 18:40:47
...
    <!-- 滚动条颜色 -->
    <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>