scroll bar style for WPF [closed]

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

开发者_运维知识库

Closed 2 years ago.

Improve this question

anyone know of a WPF scroll bar style that is out on the web that I can use instead of rolling my own, basically something like the Blend scroll bars would be cool. It would just save a lot of time if I didn't have to start from scratch. I know about this http://sachabarber.net/?p=122 but it isn't close enough to want I want. Like I said I could roll my own but it would save time if there was a pre-made example.

---

I've created a resource dictionary for scrollbar styles, that prominently exposes the colors. With this in place, I'm quick to adapt to a new style. The example below mimics the MS Outlook 2013 scrollbar.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:system="clr-namespace:System;assembly=mscorlib">

    <!-- this should better reside in a separate color resource dictionary-->
    <Color x:Key="White">#FFFFFFFF</Color>
    <Color x:Key="GrayUltraLight">#FFF2F2F2</Color>
    <Color x:Key="GrayLight">#FFD4D4D4</Color>
    <Color x:Key="GrayMedium">#FFAAAAAA</Color>
    <Color x:Key="GrayMediumDark">#FF777777</Color>
    <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}" />
    <SolidColorBrush x:Key="GrayUltraLightBrush" Color="{StaticResource GrayUltraLight}" />
    <SolidColorBrush x:Key="GrayLightBrush" Color="{StaticResource GrayLight}" />
    <SolidColorBrush x:Key="GrayMediumBrush" Color="{StaticResource GrayMedium}" />
    <SolidColorBrush x:Key="GrayMediumDarkBrush" Color="{StaticResource GrayMediumDark}" />

    <!-- changing height/width of scrollbar -->
    <system:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">15</system:Double>
    <system:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">15</system:Double>
    <system:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">15</system:Double>
    <system:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">15</system:Double>

    <!-- routing to base colors, but using new names in order to make changes easy -->
    <SolidColorBrush x:Key="VerticalScrollBarBackground" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" />
    <SolidColorBrush x:Key="HorizontalScrollBarBackground" Color="{Binding Color, Source={StaticResource VerticalScrollBarBackground}}" />
    <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" />

    <SolidColorBrush x:Key="ThumbBackground" Color="{Binding Color, Source={StaticResource WhiteBrush}}" />
    <SolidColorBrush x:Key="ThumbMouseOverBrush" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" />
    <SolidColorBrush x:Key="ThumbPressedBrush" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" />
    <Thickness x:Key="ThumbBorderThickness">1</Thickness>
    <SolidColorBrush x:Key="ThumbBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumBrush}}" />
    <SolidColorBrush x:Key="ThumbMouseOverBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumBrush}}" />
    <SolidColorBrush x:Key="ThumbPressedBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}" />

    <SolidColorBrush x:Key="ButtonBackground" Color="{Binding Color, Source={StaticResource WhiteBrush}}" />
    <SolidColorBrush x:Key="ButtonMouseOverBrush" Color="{Binding Color, Source={StaticResource WhiteBrush}}" />
    <SolidColorBrush x:Key="ButtonPressedBrush" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" />
    <Thickness x:Key="ButtonBorderThickness">1</Thickness>
    <SolidColorBrush x:Key="ButtonBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumBrush}}" />
    <SolidColorBrush x:Key="ButtonMouseOverBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}" />
    <SolidColorBrush x:Key="ButtonPressedBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}" />

    <SolidColorBrush x:Key="ArrowBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}"/>
    <SolidColorBrush x:Key="ArrowMouseOverBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}"/>
    <SolidColorBrush x:Key="ArrowPressedBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}"/>


    <!-- ScrollViewer (implicit style) -->
    <Style x:Key="{x:Type ScrollViewer}" TargetType="{x:Type ScrollViewer}">
        <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.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
                        <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"/>
                        <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 ScrollBarStyle1}"/>
                        <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 ScrollBarStyle1}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- Buttons (with arrows) -->
    <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type RepeatButton}">
                    <Grid x:Name="Root" Margin="0">
                        <Border x:Name="BackgroundBorder" Background="{StaticResource ButtonBackground}" BorderBrush="{StaticResource ButtonBorderBrush}" BorderThickness="{StaticResource ButtonBorderThickness}"/>
                        <Path x:Name="Arrow" Stretch="None" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" Fill="{StaticResource ArrowBrush}" HorizontalAlignment="Center"  VerticalAlignment="Center" SnapsToDevicePixels="True"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource ButtonMouseOverBrush}"/>
                            <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource ButtonMouseOverBorderBrush}"/>
                            <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource ArrowMouseOverBrush}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource ButtonPressedBrush}"/>
                            <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource ButtonPressedBorderBrush}"/>
                            <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource ArrowPressedBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- PageButtons -->
    <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Thumb -->
    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Background" Value="{StaticResource ThumbBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ThumbBorderBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Grid Background="Transparent">
                        <Border Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{StaticResource ThumbBorderThickness}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource ThumbMouseOverBrush}"/>
                            <Setter Property="BorderBrush" Value="{StaticResource ThumbMouseOverBorderBrush}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="True">
                            <Setter Property="Background" Value="{StaticResource ThumbPressedBrush}"/>
                            <Setter Property="BorderBrush" Value="{StaticResource ThumbPressedBorderBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ScrollBar -->
    <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
        <Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                        </Grid.RowDefinitions>
                        <RepeatButton Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Content="M 0 3.5 L 3.5 0 L 7 3.5 Z" />
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" />
                            </Track.Thumb>
                        </Track>
                        <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}" Content="M 0 0 L 7 0 L 3.5 3.5 Z" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Content="M 3.5 0 L 3.5 7 L 0 3.5 Z"/>
                                <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}" />
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}"  Content="M 0 0 L 3.5 3.5 L 0 7 Z" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>