Click here to Skip to main content
15,877,525 members
Please Sign up or sign in to vote.
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
Updated 22-Oct-10 1:57am
v7
Comments
Tarun.K.S 21-Oct-10 8:30am    
Thanx a lot sandeep!

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>
 
Share this answer
 
v3
Comments
Tarun.K.S 22-Oct-10 4:32am    
Yes you are absolutely right. i tried that but was not able to add it there. Can you tell me how to add a style in the scrollviewer to set the style for. Here is the style that i am using to style the vertical scrollbar.
Venkatesh Mookkan 22-Oct-10 5:38am    
Answer updated.
Tarun.K.S 22-Oct-10 6:01am    
thanks for the style of scrollviewer..now how am i suppose to use it the "ControlListBox" Style?
and i dont have expression blend :( .
Tarun.K.S 22-Oct-10 6:02am    
i mean how am i going to declare the style like Style={DynamicResource ......} in the ScrollViewer of the ControlListBox style?
Tarun.K.S 22-Oct-10 6:18am    
i am still unclear how to add the above style into my "ControlListBox" style.
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>
 
Share this answer
 
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!!

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900