Click here to Skip to main content
15,895,084 members
Articles / Desktop Programming / WPF

Creating a Blend like Scrollbar

Rate me:
Please Sign up or sign in to vote.
4.88/5 (19 votes)
26 Aug 2009CPOL5 min read 65.6K   3.5K   42  
This article shows how to style a scrollbar to look like the scrollbars in expression blend
<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<SolidColorBrush x:Key="ListBorder" Color="#FFA5ACB2"/>
    <LinearGradientBrush x:Key="ListBoxBg" StartPoint="0,0" EndPoint="1,0">        
        <GradientStop Offset="0" Color="#555555"></GradientStop>
        <GradientStop Offset="1" Color="#555555"></GradientStop>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="itemSelectedBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientStop Offset="0" Color="#efefef"></GradientStop>
        <GradientStop Offset="1" Color="#aaaaaa"></GradientStop>
    </LinearGradientBrush>
    
    <Style TargetType="{x:Type ListBox}">
        <Setter Property="Background" >
            <Setter.Value>
                <StaticResource ResourceKey="ListBoxBg"></StaticResource>
            </Setter.Value>
        </Setter>
            <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
		<Setter Property="BorderThickness" Value="1"/>
		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
		<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
		<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
		<Setter Property="VerticalContentAlignment" Value="Center"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ListBox}">
                    <ControlTemplate.Resources>
                        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#555555"/>
                    </ControlTemplate.Resources>
					<Border SnapsToDevicePixels="true" x:Name="Bd" 
                            Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}">
						<ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
						</ScrollViewer>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsEnabled" Value="false">
							<Setter Property="Background" 
                                    TargetName="Bd" 
                                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
						</Trigger>
						<Trigger Property="IsGrouping" Value="true">
							<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
	<!-- Resource dictionary entries should be defined here. -->
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border Name="Border" BorderThickness="0"
                            CornerRadius="0" Padding="1" >
                        <Border.Background>
                            <SolidColorBrush Color="#555555" x:Name="BorderBg"></SolidColorBrush>
                        </Border.Background>
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="True">
              <Setter Property="Background" TargetName="Border" Value="{StaticResource itemSelectedBrush}" />
                            <Setter Property="Foreground" Value="#333333"></Setter>
               </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="BorderBrush" Value="#acacac"></Setter>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="BorderBg" 
                                                Storyboard.TargetProperty="Color"
                                                To="#999999" Duration="0:0:0.1"></ColorAnimation>
                                
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBg" Storyboard.TargetProperty="Color"
        Duration="0:0:0.3">
</ColorAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
                        
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Romania Romania
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions