WPF 滚动条样式

Posted 2023-04-01

技术标签:

【中文标题】WPF 滚动条样式【英文标题】：WPF ScrollBar styles 【发布时间】：2016-09-02 21:17:04 【问题描述】：

是否可以创建像这张图片中的滚动条？

这张照片来自这个链接：http://codesdirectory.blogspot.be/2013/01/wpf-scrollviewer-control-style.html。我尝试了帖子中的示例，但结果如下所示：

帖子是 3 岁，所以这可能是正常的。

是否可以像第一张图片一样创建滚动条？我一直在寻找几个小时来找到一个模板，这是我能得到的最接近的。我正在将 Windows 窗体应用程序转换为 WPF，主要原因是滚动条！这是上图中的xaml：

<Window x:Class="iBlock.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WPF ScrollViewer" SizeToContent="WidthAndHeight">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollBar.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>

        <ScrollViewer Background="#F7F7F7"

                      BorderBrush="#C7C7C7"

                      Height="300"

                      HorizontalScrollBarVisibility="Auto"

                      Margin="10"

                      Style="DynamicResource ResourceKey=styleScrollViewer"

                      VerticalScrollBarVisibility="Auto"

                      Width="400">

            <StackPanel Background="Red" Height="400" Width="500"></StackPanel>

        </ScrollViewer>

    </Grid>

</Window>

【问题讨论】：

【参考方案1】：

在一些研究的帮助下搞定了：

<Window.Resources>
    <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />
    <SolidColorBrush x:Key="StandardBackgroundBrush" Color="Black" />
    <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" />
    <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
    <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
    <SolidColorBrush x:Key="NormalBrush" Color="#888" />
    <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />
    <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#FF686868" />
    <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" />

    <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="White" Offset="0.0" />
                <GradientStop Color="White" Offset="0.6" />
                <GradientStop Color="#DDDDDD" Offset="1.2"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#CCC" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#BBB" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="0.1"/>
                <GradientStop Color="#EEE" Offset="0.9"/>
                <GradientStop Color="#FFF" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

    <Style x:Key="ScrollBarLineButton" TargetType="x:Type RepeatButton">
        <Setter Property="Visibility" Value="Hidden"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type RepeatButton">
                    <Border Name="Border" Margin="1" CornerRadius="2" Background="StaticResource NormalBrush" BorderBrush="StaticResource NormalBorderBrush" BorderThickness="1">
                        <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="StaticResource GlyphBrush" Data="Binding Path=Content, RelativeSource=RelativeSource TemplatedParent" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="StaticResource PressedBrush" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="StaticResource DisabledForegroundBrush"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarPageButton" TargetType="x:Type RepeatButton">
        <Setter Property="Visibility" Value="Hidden"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type RepeatButton">
                    <Border Background="Black" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumb" TargetType="x:Type Thumb">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type Thumb">
                    <Border CornerRadius="4" Background="TemplateBinding Background" BorderBrush="TemplateBinding BorderBrush" BorderThickness="0"  Width="8" Margin="8,0,-2,0"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="VerticalScrollBar" TargetType="x:Type ScrollBar">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="0"/>
                <RowDefinition Height="0.00001*"/>
                <RowDefinition MaxHeight="0"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="3" CornerRadius="2" Background="Transparent" />
    <RepeatButton Grid.Row="0" Style="StaticResource ScrollBarLineButton" Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />
    <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
        <Track.DecreaseRepeatButton>
            <RepeatButton Style="StaticResource ScrollBarPageButton" Command="ScrollBar.PageUpCommand" />
        </Track.DecreaseRepeatButton>
        <Track.Thumb>
            <Thumb Style="StaticResource ScrollBarThumb" Margin="1,0,1,0" Background="StaticResource HorizontalNormalBrush" BorderBrush="StaticResource HorizontalNormalBorderBrush" />
        </Track.Thumb>
        <Track.IncreaseRepeatButton>
            <RepeatButton Style="StaticResource ScrollBarPageButton" Command="ScrollBar.PageDownCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Row="3" Style="StaticResource ScrollBarLineButton" Height="18" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z"/>
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="HorizontalScrollBar" TargetType="x:Type ScrollBar">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="18"/>
                <ColumnDefinition Width="0.00001*"/>
                <ColumnDefinition MaxWidth="18"/>
            </Grid.ColumnDefinitions>
            <Border Grid.ColumnSpan="3" CornerRadius="2" Background="#F0F0F0"/>
            <RepeatButton Grid.Column="0"  Style="StaticResource ScrollBarLineButton" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
            <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="StaticResource ScrollBarPageButton" Command="ScrollBar.PageLeftCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="StaticResource ScrollBarThumb" Margin="0,1,0,1" Background="StaticResource NormalBrush" BorderBrush="StaticResource NormalBorderBrush" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="StaticResource ScrollBarPageButton" Command="ScrollBar.PageRightCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Column="3" Style="StaticResource ScrollBarLineButton" Width="18" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z"/>
        </Grid>
    </ControlTemplate>
    <Style x:Key="x:Type ScrollBar" TargetType="x:Type ScrollBar">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Height" Value="18" />
                <Setter Property="Template" Value="StaticResource HorizontalScrollBar" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="18"/>
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="StaticResource VerticalScrollBar" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="FavsScrollViewer" TargetType="x:Type ScrollViewer">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type ScrollViewer">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter Grid.Column="1"/>
                        <ScrollBar Name="PART_VerticalScrollBar" Value="TemplateBinding VerticalOffset" Maximum="TemplateBinding ScrollableHeight" ViewportSize="TemplateBinding ViewportHeight" Visibility="TemplateBinding ComputedVerticalScrollBarVisibility"/>
                        <ScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Value="TemplateBinding HorizontalOffset" Maximum="TemplateBinding ScrollableWidth" ViewportSize="TemplateBinding ViewportWidth" Visibility="TemplateBinding ComputedHorizontalScrollBarVisibility"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

【讨论】：

我无法理解您是如何隐藏重复按钮的？由于更改 ScrollBarLineButton 的可见性不起作用【参考方案2】：

好的，Danny 的代码存在一些问题。当我尝试激活水平滚动条时它非常小

<ScrollViewer Grid.Row="1" Style="DynamicResource FavsScrollViewer" FlowDirection="RightToLeft"
                  ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"
                  Margin="6,0,0,0">
        <TextBox x:Name="TextBox" 
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch" 
                 AcceptsReturn="True"
                 FlowDirection="LeftToRight"/>
    </ScrollViewer>

old scroll bar 所以我找到了解决方案。你必须像我一样创造一种新的风格：

<Style x:Key="ScrollBarThumbHor" TargetType="x:Type Thumb">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type Thumb">
                    <Border CornerRadius="1" Background="#c8c8c8" BorderBrush="TemplateBinding BorderBrush" BorderThickness="0"  Height="8" Margin="0,0,-2,0"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后在水平滚动条模板中改变拇指样式

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="x:Type ScrollBar">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="12"/>
                <ColumnDefinition Width="0.00001*"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>
            <Border Grid.ColumnSpan="3" CornerRadius="0" Background="#006464"/>
            <RepeatButton Grid.Column="0"  Style="StaticResource ScrollBarLineButton" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
            <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="StaticResource ScrollBarPageButton" Command="ScrollBar.PageLeftCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="StaticResource ScrollBarThumbHor" Margin="0,1,0,1" Background="StaticResource NormalBrush" BorderBrush="StaticResource NormalBorderBrush" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="StaticResource ScrollBarPageButton" Command="ScrollBar.PageRightCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Column="3" Style="StaticResource ScrollBarLineButton" Width="18" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z"/>
        </Grid>
    </ControlTemplate>

所以现在看起来不错

【讨论】：

以上是关于WPF 滚动条样式的主要内容，如果未能解决你的问题，请参考以下文章

WPF 滚动条样式

WPF ScrollViewer 滚动条问题

如何修改 WPF FlowDocumentScrollViewer 滚动条样式

wpf datagrid 滚动条如何设置宽度和颜色

WPF ScrollViewer 滚动条宽度

如何设置滚动条的样式?