Not able to apply style on a scrollbar in ListBox? (Phew! Solved Thanks to venkatesh!)

Question

0.00/5 (No votes)

See more:

Background : Currently i have applied two styles for my listbox.
One style contains a control template with border to give a good look to the plain and simple ListBox.
My First Style:

XML

<LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="LightBlue" Offset="0.3"/>
            <GradientStop Color="AliceBlue" Offset="0.5"/>
            <GradientStop Color="AntiqueWhite" Offset="0.8"/>
    </LinearGradientBrush>
    <Style x:Key="ControlListBox" TargetType="ListBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border Name="ListBoxBorder" CornerRadius="3" BorderBrush="Crimson" BorderThickness="2"
                            Background="{StaticResource ListBoxBackgroundBrush}">
                        <ScrollViewer Focusable="False">
                            <ItemsPresenter Margin="2" ></ItemsPresenter>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and another style uses a control template with border to style the ListBoxItem.

My Second Style

XML

<Style x:Key="ControlListBoxItem" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="ListItemBorder" CornerRadius="3" BorderThickness="0.5" BorderBrush="Black">
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ListItemBorder" Property="BorderBrush" Value="Blue"/>
                            <Setter TargetName="ListItemBorder" Property="TextBlock.FontSize" Value="12"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="ListItemBorder" Property="TextBlock.Foreground" Value="White"/>
                            <Setter TargetName="ListItemBorder" Property="BorderBrush" Value="Red"/>
                            <Setter TargetName="ListItemBorder" Property="Background" Value="Green"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Current problem : now what i want is to Style my ScrollBar of the ListBox too. But where am i going to put the style in the Listbox because i have already used the two styles and dont know where to put the third style(for scrollbar)?

XML

<ListBox style="{DynamicResource ControlListBox}" ItemContainerStyle="{DynamicResource ControlListBoxItem}" and other things />

well the style for scrollbar is this :

here is the style to style the vertical scrollbar.
but i dont know how to add it in the scrollviewer defined in the ControlListBox style

XML

<Style x:Key="ScrollBarThumbStyle" TargetType="Thumb">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Margin" Value="1,0,1,0"/>
                    <Setter Property="Background" Value="LightBlue"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Thumb">
                                <Ellipse Stroke="Cyan" Fill="Gray"></Ellipse>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="ScrollBarLineButtonStyle" TargetType="RepeatButton">
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RepeatButton">
                                <Grid Margin="1">
                                    <Ellipse Name="MyEllipse" StrokeThickness="1"
                                 Stroke="DarkTurquoise"
                                 Fill="Azure">
                                    </Ellipse>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsPressed" Value="True">
                                        <Setter TargetName="MyEllipse" Property="Fill" Value="Black"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="ScrollBarPageButtonStyle" TargetType="RepeatButton">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RepeatButton">
                                <Border Background="Transparent"></Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="18"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition MaxHeight="18"/>
                        </Grid.RowDefinitions>
                        <RepeatButton Grid.Row="0" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineUpCommand">
                            <Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z">
                            </Path>
                        </RepeatButton>
                        <Track Name="Part_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="0">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="ScrollBar.PageUpCommand" Style="{DynamicResource ScrollBarPageButtonStyle}">
                                </RepeatButton>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{DynamicResource ScrollBarThumbStyle}"/>
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="ScrollBar.PageDownCommand" Style="{DynamicResource ScrollBarPageButtonStyle}"></RepeatButton>
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" />
                        <RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand">
                            <Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z"/>
                        </RepeatButton>
                    </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="Vertical">
                            <Setter Property="Width" Value="18"/>
                            <Setter Property="Height" Value="Auto"/>
                            <Setter Property="Template" Value="{StaticResource VerticalScrollBar}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>

Please suggest some way where I can put my third style(for scrollbar) in my listbox.

Thanx,
Tarun

Posted 21-Oct-10 2:12am

Tarun.K.S

Updated 22-Oct-10 1:57am

v7

Add a Solution

Comments

Tarun.K.S 21-Oct-10 8:30am

Thanx a lot sandeep!

2 solutions

Solution 2

here is the style to style the vertical scrollbar.
but i dont know how to add it in the scrollviewer defined in the ControlListBox style

XML

<Style x:Key="ScrollBarThumbStyle" TargetType="Thumb">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Margin" Value="1,0,1,0"/>
                    <Setter Property="Background" Value="LightBlue"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Thumb">
                                <Ellipse Stroke="Cyan" Fill="Gray"></Ellipse>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="ScrollBarLineButtonStyle" TargetType="RepeatButton">
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RepeatButton">
                                <Grid Margin="1">
                                    <Ellipse Name="MyEllipse" StrokeThickness="1"
                                 Stroke="DarkTurquoise"
                                 Fill="Azure">
                                    </Ellipse>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsPressed" Value="True">
                                        <Setter TargetName="MyEllipse" Property="Fill" Value="Black"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="ScrollBarPageButtonStyle" TargetType="RepeatButton">
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="RepeatButton">
                                <Border Background="Transparent"></Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="18"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition MaxHeight="18"/>
                        </Grid.RowDefinitions>
                        <RepeatButton Grid.Row="0" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineUpCommand">
                            <Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z">
                            </Path>
                        </RepeatButton>
                        <Track Name="Part_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="0">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="ScrollBar.PageUpCommand" Style="{DynamicResource ScrollBarPageButtonStyle}">
                                </RepeatButton>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{DynamicResource ScrollBarThumbStyle}"/>
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="ScrollBar.PageDownCommand" Style="{DynamicResource ScrollBarPageButtonStyle}"></RepeatButton>
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" />
                        <RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand">
                            <Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z"/>
                        </RepeatButton>
                    </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="Vertical">
                            <Setter Property="Width" Value="18"/>
                            <Setter Property="Height" Value="Auto"/>
                            <Setter Property="Template" Value="{StaticResource VerticalScrollBar}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>

Posted 21-Oct-10 22:35pm

Tarun.K.S

Updated 21-Oct-10 23:39pm

v3

Comments

Venkatesh Mookkan 22-Oct-10 5:40am

You are suppose to update your question. Click Improve Question and add this code snippet over there.

Tarun.K.S 22-Oct-10 6:04am

thanx i hav added the code snippet.

Tarun.K.S 22-Oct-10 7:59am

And who the hell Down voted this Answer! this is a part of the answer! A major part without it scrolling would have been impossible!!

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Venkatesh Mookkan · Accepted Answer · 2010-10-21T17:50:00

Actually you have set the style for Scrollbar by writing style for the ScrollViewer in the "ControlListBox" style. ScrollViewer has both Horizontal and Vertical scrollbars.

The below is your ListBox Style,

XML

<LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="LightBlue" Offset="0.3"/>
            <GradientStop Color="AliceBlue" Offset="0.5"/>
            <GradientStop Color="AntiqueWhite" Offset="0.8"/>
    </LinearGradientBrush>
    <Style x:Key="ControlListBox" TargetType="ListBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border Name="ListBoxBorder" CornerRadius="3" BorderBrush="Crimson" BorderThickness="2"
                            Background="{StaticResource ListBoxBackgroundBrush}">
                        <ScrollViewer Focusable="False">
                            <ItemsPresenter Margin="2" ></ItemsPresenter>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I have highlighted the ScrollViewer in there. Use Expression Blend, and "Edit a Copy" of the ScrollViewer Template. There you can modify the Vertical or Horizontal Scrollbar style. The below is the style of a Template of a ScrollViewer with Vertical ScrollBar. Here you need to again write a style to change the style of the Vertical Scrollbatr.

XML

<Style x:Key="MyScrollViewerStyle"
        TargetType="{x:Type ScrollViewer}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Margin="0,0,0,0" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
                        <ScrollBar Style="{StaticResource scrollBarStyle}"
                              x:Name="PART_VerticalScrollBar"
                              Grid.Column="1"
                              Grid.Row="0"
                              Margin="0,4,4,4"
                              AutomationProperties.AutomationId="VerticalScrollBar"
                              Maximum="{TemplateBinding ScrollableHeight}"
                              Minimum="0"
                              Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                              ViewportSize="{TemplateBinding ViewportHeight}"
                              Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger SourceName="PART_VerticalScrollBar" Property="Visibility" Value="Visible">
                            <Setter TargetName="PART_ScrollContentPresenter" Property="Margin" Value="0,0,4,0" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>